学习JavaScript设计模式(链式调用)
1、什么是链式调用
这个很容易理解，例如:
$(this).setStyle('color','red').show();
一般的函数调用和链式调用的区别：调用完方法后，returnthis返回当前调用方法的对象。
functionDog(){
this.run=function(){
alert("Thedogisrunning....");
returnthis;//返回当前对象Dog
};
this.eat=function(){
alert("Afterrunningthedogiseatting....");
returnthis;//返回当前对象Dog
};
this.sleep=function(){
alert("Aftereattingthedogisrunning....");
returnthis;//返回当前对象Dog
};
}
//一般的调用方式；
/*vardog1=newDog();
dog1.run();
dog1.eat();
dog1.sleep();*/
vardog2=newDog();
dog2.run().eat().sleep();
2、分解链式调用
链式调用其实是两个部分：
1）.操作对象(也就是被操作的DOM元素，如上例的$(this))
2）.操作方法(具体要做什么事情，如上例的setStyle和show)
如何实现操作对象与操作方法
创建一般的$函数：
function$(){
varelements=[];
for(vari=0,len=arguments.length;i<len;i++){
varelement=arguments[i];
if(typeofelement==='string'){
element=document.getElementById(element);
}
if(arguments.length==1){
returnelement;
}
elements.push(element);
}
returnelements;
}
但是，如果把这个函数改造为一个构造器，把那些元素作为数组保存在一个实例属性中，并让所有定义在构造器函数的prototype属性所指对象中的方法都返回用以调用方法的那个实例的引用，那么它就具有了链式调用的能力。(说了这么多，就是在每个方法最后returnthis;)，
我首先需要把这个$函数改为一个工厂方法，它负责创建支持链式调用的对象。这个函数应该能接受元素数组形式的参数，以便我们能够使用与原来一样的公用接口。这样以来，它就具有了进行链式调用的能力。
改造后如下：
(function(){
function_$(els){
this.elements=[];//把那些元素作为数组保存在一个实例属性中，
for(vari=0,len=els.length;i<len;i++){
varelement=els[i];
if(typeofelement==='string'){
element=document.getElementById(element);
}
this.elements.push(element);
}
}
_$.prototype={
each:function(fn){
for(vari=0,len=this.elements.length;i<len;i++){
fn.call(this,this.elements[i]);
}
returnthis;//在每个方法的最后returnthis;
},
setStyle:function(prop,val){
this.each(function(el){
el.style[prop]=val;
});
returnthis;//在每个方法的最后returnthis;
},
show:function(){
varthat=this;
this.each(function(el){
that.setStyle('display','block');
});
returnthis;//在每个方法的最后returnthis;
},
addEvent:function(type,fn){
varadd=function(el){
if(window.addEventListener){
el.addEventListener(type,fn,false);
}elseif(window.attachEvent){
el.addEvent('on'+type,fn);
}
};
this.each(function(el){
add(el);
});
returnthis;//在每个方法的最后returnthis;
}
}
window.$=function(){
returnnew_$(arguments);
}
})();
在最后returnthis,这就将调用方法的对象传给调用链上的下一个方法。
3、模拟jquery底层链式编程
//块级作用域
//特点1程序启动的时候里面的代码直接执行了
//特点2内部的成员变量外部无法去访问（除了不加var修饰的变量）
(function(window,undefined){
//$最常用的对象返回给外界大型程序开发一般使用'_'作为私用的对象(规范)
function_$(arguments){
//实现代码...这里仅实现ID选择器
//正则表达式匹配id选择器
varidselector=/#\w+/;
this.dom;//此属性接受所得到的元素
//如果匹配成功则接受dom元素arguments[0]='#inp'
if(idselector.test(arguments[0])){
this.dom=document.getElementById(arguments[0].substring(1));
}else{
thrownewError('argumentsiserror!');
}
};
//在Function类上扩展一个可以实现链式编程的方法
Function.prototype.method=function(methodName,fn){
this.prototype[methodName]=fn;
returnthis;//链式编程的关键
}
//在_$的原型对象上加一些公共的方法
_$.prototype={
constructor:_$,
addEvent:function(type,fn){
//给你的得到的元素注册事件
if(window.addEventListener){//FF
this.dom.addEventListener(type,fn);
}elseif(window.attachEvent){//IE
this.dom.attachEvent('on'+type,fn);
}
returnthis;
},
setStyle:function(prop,val){
this.dom.style[prop]=val;
returnthis;
}
};
//window上先注册一个全局变量与外界产生关系
window.$=_$;
//写一个准备的方法
_$.onReady=function(fn){
//1实例化出来_$对象真正的注册到window上
window.$=function(){
returnnew_$(arguments);
};
//2执行传入进来的代码
fn();
//3实现链式编程
_$.method('addEvent',function(){
//nothingtodo
}).method('setStyle',function(){
//nothingtodo
});
};
})(window);//程序的入口window传入作用域中
$.onReady(function(){
varinp=$('#inp');
//alert(inp.dom.nodeName);
//alert($('#inp'));
inp.addEvent('click',function(){
alert('我被点击了!');
}).setStyle('backgroundColor','red');
});
4、使用回调函数从支持链式调用的方法获取数据
链式调用很适合于赋值器方法，但对于取值器方法，就不方便了，因为每个方法返回的都是this啊。
不过，变通的方法还是有的，那就是回调函数。
未使用回调函数时
//withoutcallback
window.API=window.API||function(){
varname='JChen';
this.setName=function(newName){
name=newName;
returnthis;
};
this.getName=function(){
returnname;
};
};
varo=newAPI();
console.log(o.getName());
console.log(o.setName('Haha').getName());
使用回调函数时
//withcallback
window.API2=window.API2||function(){
varname='JChen';
this.setName=function(newName){
name=newName;
returnthis;
};
this.getName=function(callback){
callback.call(this,name);
returnthis;
};
};
varo2=newAPI2();
o2.getName(console.log).setName('Hehe').getName(console.log);
在使用回调函数时候callback.call(this,name)在一般情况下是没问题的，但是，这个例子偏偏用到了console.log，那么就有问题了。原因是console的this是指向console而不是winodw。
这个问题也很好解决。如下：
//withcallback
window.API2=window.API2||function(){
varname='JChen';
this.setName=function(newName){
name=newName;
returnthis;
};
this.getName=function(callback){
callback.call(this,name);
returnthis;
};
};
varo2=newAPI2();
varlog=function(para){
console.log(para);
};
o2.getName(log).setName('Hehe').getName(log);
链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量，希望大家可以熟练掌握。