JavaScript链式调用实例浅析
本文实例分析了JavaScript链式调用。分享给大家供大家参考，具体如下：
对$函数你已经很熟悉了。它通常返回一个html元素或一个html元素的集合，如下：
function$(){
varelements=[];
for(vari=0,len=arguments.length;i
但是，如果把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中，并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用，那么它就具有了链式调用的能力。我首先需要把这个$函数改为一个工厂方法，它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数，以便我们能够使用与原来一样的公用接口。
(function(){
//useprivateclass
function_$(els){
this.elements=[];
for(vari=0,len=els.length;i
由于所有对象都会继承其原型对象的属性和方法，所以我们可以让定义在原型对象中的那几个方法都返回用以调用方法的实例对象的引用，这样就可以对那些方法进行链式调用。想好这一点，我们现在就动手在_$这个私用构造函数的prototype对象中添加方法，以便实现链式调用
(function(){
//useprivateclass
function_$(els){
//..省略之前上面的代码
}
_$.prototype={
each:function(fn){
for(vari=0,len=this.elements.length;i
但是如果某个库或者框架已经定义了一个$函数，那么我们的这个库会将其改写，有个简单的办法是在源码中为$函数另去一个名字。但是如果你是从一个现有的库获得的源码，那么每次代码库获取更新的版本后你都得重新改名字，因此这个方案并不是很好。好的解决办法就是像下面一样添加一个安装器：
window.installHelper=function(scope,interface){
scope[interface]=function(){
returnnew_$(arguments);
}
};
用户可以这样去使用：
installHelper(window,'$');
$('example').show();
下面是一个更复杂的例子，它展示了如何把这种功能添加到一个事先定义好的命名对象中：
//Defineanamespacewithoutoverwritingitifitalreadyexists.
window.com=window.com||{};
com.example=com.example||{};
com.example.util=com.example.util||{};
installHelper(com.example.util,'get');
(function(){
varget=com.example.util.get;
get('example').addEvent('click',function(e){
get(this).addClass('hello');
});
})();
有时候把方法连起来并不是一个好主意。链式调用很适合于赋值器方法，但对于取值器的方法，你可能会希望他们返回你要的数据而不是返回this。不过，如果你把链式调用作为首要目标，希望所有方法的使用方式保持一致的话，那么变通的方法还是有的：你可以利用回调技术来返回所要的数据下面有两个例子：其中API类使用了普通的取值器（它中断了调用链），而API2类则使用了回调方法：
//Accessorwithoutfunctioncallbacks:returningrequesteddatainaccessors.
window.API=window.API||{};
API.prototype=function(){
varname='Helloworld';
//Privilegedmutatormethod.
setName:function(newName){
name=newName;
returnthis;
},
//Privilegedaccessormethod.
getName:function(){
returnname;
}
}();
//Implementationcode.
varo=newAPI;
console.log(o.getName());//Displays'Helloworld'.
console.log(o.setName('Meow').getName());//Displays'Meow'.
//Accessorwithfunctioncallbacks.
window.API2=window.API2||{};
API2.prototype=function(){
varname='Helloworld';
//Privilegedmutatormethod.
setName:function(newName){
name=newName;
returnthis;
},
//Privilegedaccessormethod.
//通过把函数作为参数传入
getName:function(callback){
callback.call(this,name);
returnthis;
}
}();
//Implementationcode.
varo2=newAPI2;
o2.getName(console.log).setName('Meow').getName(console.log);
//Displays'Helloworld'andthen'Meow'.
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript常用函数技巧汇总》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。