灵活的javaScript

通常我们不像下面这样声明函数，因为会创建很多全局变量。

function checkName() {// code
}function checkEmail() {// code
}

所以，我们可以用一个对象将变量收编。

var checkObj = {checkName: function () {// code
    },checkEmail: function() {// code
    }
}

// 调用checkObj.checkName();checkObj.checkEmail();

当然，我们也可以先声明一个对象，然后给它添加方法，调用方式同上面一样。

var checkObj = function () {};

checkObj.checkName = function () { 　　// code  };

checkObj.checkEmail = function() { 　　// code  };

但是，当别人有需要用我们上面那些方法时就有些麻烦了。因为这个对象不能复制一份，或者说这个对象类在使用new关键字创建对象时，新创建的对象是不能继承这些方法的。

如果只是想简单的复制下对象，我们可以将这些方法放在一个函数对象中，这样每次调用调用checkObj这个函数的时候，就会返回一个新的包含这些方法的对象，如下：

var checkObj = function () {return {　　　　　　　　checkName: function () {           　　　　　　// code　　　　},

 　　checkEmail: function() { // code 　　　　　　}　　} }

// 调用var obj = checkObj();obj.checkName();

但是，上述方式并不是一个真正类的创建方式，所以我们将其稍微改造一下：

var CheckObj = function () {this.checkName = function () {// code
    };this.checkEmail = function () {// code
    };
};// 调用
var obj = new CheckObj();
obj.checkName();

然而，这种方式有时候造成的消耗是很奢侈的，因为我们在使用new关键字创建实例的时候，每个实例都会对this上的属性进行复制，因此会造成每个实例都会拥有自己的一套方法，

所以我们有必要改进一下。将这些方法都挂在到原型上，这样每个实例所有的方法就都是同一个了，因为它们都要依赖prototype依次查找，找到的方法都会是同一个，

即CheckObj类的原型对象上，如下：

var CheckObj = function () {};CheckObj.prototype.checkName = function () {// code
};CheckObj.prototype.checkEmail = function () {// code
};// 调用
var obj = new CheckObj();
obj.checkName();

这种方式要将protoype写好多遍，可以像下面这样做：

var CheckObj = function () {};CheckObj.prototype = {checkName: function () {// code
    },checkEmail: function () {// code
    };
};// 调用
var obj = new CheckObj();
obj.checkName();

但使用这种方式要注意，一定不要和前面那种混用，后者为对象原型对用赋值新对象的这种方式如果用在前者为原型对象添加方法这种方式之后，后者将会覆盖前者。

此时，我们每调用一个方法，都要写一遍示例对象(如obj)，我们还可以继续改进，在每个方法末尾将当前对象返回，在JavaScript中，当前对象就是this，

所以，我们可以在函数末尾将this返回。

var CheckObj = function () {};CheckObj.prototype = {checkName: function () {// codereturn this;},checkEmail: function () {// codereturn this;};
};// 调用
var obj = new CheckObj();
obj.checkName().checkEmail();

一款JavaScript框架，其实就是里面为我们封装了很多方法，最大的特点就是对源生对象的拓展，比如如果想给每个函数添加一个检测姓名的方法，可以这么做：

Function.prototype.checkName = function () {// code
};

// 调用var fn = function () {};f.checkName();

但这种平时开发中是绝对不允许的，因为这样会污染原生对象Function，那要怎么做呢？

我们可以抽象一个统一添加方法的方法：

Function.prototype.addMethod = function (name, fn) {this[name] = fn;
};var methods = function () {};
methods.addMethod('checkName', function () {console.log('checkName');
});methods.addMethod('checkEmail', function () {console.log('checkEmail');
});methods.checkName();
methods.checkEmail();

同样，我们可以使用链式添加的方式：

Function.prototype.addMethod = function (name, fn) {this[name] = fn;return this;
};var methods = function () {};
methods.addMethod('checkName', function () {console.log('checkName');　　return this;
}).addMethod('checkEmail', function () {console.log('checkEmail');　　return this;
});methods.checkName().checkEmail();

按照上述方式我们使用的是函数调用方式，对于习惯类式调用的我们可以稍微简单改一下：

Function.prototype.addMethod = function (name, fn) {this.prototype[name] = fn; // 挂载到原型上return this;
};var Methods = function () {};
Methods.addMethod('checkName', function () {console.log('checkName');return this;
}).addMethod('checkEmail', function () {console.log('checkEmail');return this;
});var m = new Methods();
m.checkName().checkEmail();

JavaScript是不是很灵活呢? *(^_^)*~~~

转载于:https://www.cnblogs.com/zhangxiaos/p/6417660.html

灵活的javaScript相关推荐

简易而又灵活的Javascript拖拽框架（五）
====================================================== 注:本文源代码点此下载 ================================= ...
简易而又灵活的Javascript拖拽框架（四）
一.开篇似乎拖拽已经被写烂了,没得写的了,可是我这次又来了- 上一次写的是跨列拖放,这次我要带给大家的是跨页拖放. 可以到这里来看看效果:示例效果说明:1.如果将方框拖动到页签上立刻释放掉的话,则 ...
javascript基础07
1.节点元素.childNodes : 属性只读属性子节点列表集合元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有12种标准下:包含了文本节点 ...
10个顶级的CSS和Javascript动画框架推荐
在网站中嵌入动画已成为近年来的一个设计趋势,许多公司都已开始转向并拥抱HTML5.CSS3和JavaScript这个技术"三人组".尽管这些技术还不能制作一些非常复杂的动画(像fl ...
7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢
JavaScript运行网络.您可以在浏览器中使用它,也可以在服务器上使用它,并且可以将其用于移动应用程序. 当今的生态系统充满了强大的库和框架,可帮助工程师为任何平台构建功能强大,以用户为中心的应用 ...
前端开发者常用的9个JavaScript图表库
当前,数据可视化已经成为数据科学领域非常重要的一部分.不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析. 对任何一个组织来说,如果能够充分的获取数据.可视化数据和分 ...
github桌面版_GitHub 上周 JavaScript 趋势榜项目
1. yemount/pose-animator 项目地址:https://github.com/yemount/pose-animator ⭐stars:4237 | forks:354 | 211 ...
顶级的CSS和Javascript动画框架
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果 1. jQuery Transit 该jQuery插件扩 ...
顶级的CSS和Javascript动画框架推荐
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果 9. 3D Synth Pure CSS 3D Synt ...
10 个优秀的JavaScript开发框架
实用的Javascript开发框架 JavaScript基本上是一个面向对象的脚本语言,创建web应用程序和互动网站.Javascript框架也被称为Javascript库.JavaScript框架很 ...

灵活的javaScript

灵活的javaScript相关推荐

最新文章

热门文章