JavaScript链式调用小结
zYUI3 Node对象实现链式调用的方式如下：
?
Y.one('#id').setStyle('border','1px').setAttribute('title','test');?
大家都知道，JavaScript链式调用只是语法的招数。依据JavaScript的灵活性，实现的方法也不止一种，一起来看。
注：前两种实现我直接拷贝了 zhouyrt的文章?JavaScript中链式调用之研习?中的代码，在此谢过。
第一种链式调用方法，代码如下。缺点是每个需要链式调用的方法都要返回当前对象。
?
function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, method3 : function(p3){ this.prop3 = p3; return this; } }var obj = new ClassA(); //链式调用obj.method1(1).method2(2).method(3); // obj -> prop1=1,prop2=2,prop3=3 ?
第二种方法可以在不改变原有方法的情况下模拟链式调用。无论原有方法是否返回当前对象，都可以使用。
但使用的风格略有不同。如下：
function chain(obj){ var fn = function(method){ if(arguments.length <= 0){ return fn; } var args = Array.prototype.slice.call(arguments, 1); obj[method].apply(obj, args); return fn; } return fn; } function ClassB(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassB.prototype = { method1 : function(p1){ this.prop1 = p1; }, method2 : function(p2){ this.prop2 = p2; }, method3 : function(p3){ this.prop3 = p3; } }//链式调用模拟方式var result = chain(obj)('method1',4)('method2',5)('method3',6)(); // result -> prop1=4,prop2=5,prop3=6 ?接下来介绍YUI中Node类实现的链式调用方法。
在YUI3中，Node类的基础是Dom，很多Node类的方法都是调用Dom类的同名方法，如上面提到的setAttribute、setStyle等，
在Dom类源码中也未设置返回本对象，在Node类提供了importMethods方法来导入Dom中相同的方法并支持链式调用。示例代码如下：
?
//Dom类及静态方法function Dom(id){this.dom = document.getElementById(id);} Dom.setStyle = function(node,name,value){node.dom.style[name] = value;}Dom.setAttribute = function(node,name,v){node.dom.setAttribute(name,v);}//Node类function Node(id){this.dom = document.getElementById(id);}//添加方法的函数Node.addMethod = function(method,fn){//,contextNode.prototype[method] = function(){var me = this;//Array.prototype.unshift.call(arguments,me);//or arguments = Array.prototype.slice.call(arguments);arguments.unshift(me);fn.apply(me,arguments);return me;} }//批量添加方法的函数Node.importMethods = function(host,methods){for(var i in methods){ var m = methods[i];var fn = host[m];Node.addMethod(m,fn);}}//定义需要给Node类添加的方法名 列表var methods = ['setStyle','setAttribute'];//使用批量添加方法的函数将Dom中的相关方法添加到Node中 Node.importMethods(Dom,methods); //可以在Node中进行链式调用var n = new Node('log').setStyle('border','2px solid red').setAttribute('t',22); ?在实际使用中，可以对原有的对象方法（如Dom中的方法）扩展到另一个类中（如Node类），在Node类中进行链式调用。当然也可以使用同样的方式（importMethods）不扩展而是覆盖Dom中的方法。
?
?
??