javascript学习(10)——[知识储备]链式调用

上次我们简单的说了下单例的用法，这个也是在我们java中比较常见的设计模式。

今天简单说下链式调用，可能有很多人并没有听过链式调用，但是其实只要我简单的说下的话，你肯定基本上都在用，大家熟知的jQuery中我们通常都是调用完一个函数后，我们直接就继续调用其他函数，而不需要再去new一个新的对象。这就是典型的链式调用。

首先我们列举个例子，说明下并非链式调用，给我们带来的不方便的地方：

Javascript代码  

1. /** 
2.  * 从一个实例引出立案时调用的需求 
3.  */  
4. (function(){  
5.     //创建一个cat  
6.     function Cat(name){  
7.         this.name = name;  
8.         this.run = function(){  
9.             document.write(name+ " start run");  
10.         }  
11.         this.stopRun = function(){  
12.             document.write(name+ " stop run");  
13.         }  
14.         this.sing = function(){  
15.             document.write(name+ " start sing");  
16.         }  
17.         this.StopSing = function(){  
18.             document.write(name+ " stop sing");  
19.         }         
20.     }  
21.     //测试  
22.     var c = new Cat("abc");  
23.     c.run();  
24.     c.sing();  
25.     c.StopSing();  
26.     c.stopRun();  
27. })()  

下面我们举个例子说明下链式调用的好处，从而和上边非链式调用做比较：

Javascript代码  

1. /** 
2.  * 从一个实例引出立案时调用的需求 
3.  */  
4. (function(){  
5.     //创建一个cat  
6.     function Cat(name){  
7.         this.name = name;  
8.         this.run = function(){  
9.             document.write(name+ " start run");  
10.             return this;  
11.         }  
12.         this.stopRun = function(){  
13.             document.write(name+ " stop run");  
14.             return this;  
15.         }  
16.         this.sing = function(){  
17.             document.write(name+ " start sing");  
18.             return this;  
19.         }  
20.         this.StopSing = function(){  
21.             document.write(name+ " stop sing");  
22.             return this;  
23.         }         
24.     }  
25.     //测试  
26.     var c = new Cat("abc");  
27.     c.run().stopRun().sing().StopSing();  
28. })()  

以上两个例子也比较简单的说明了链式调用和非链式调用的区别。

那么下面我们模仿jquery做一个链式调用的例子：

Javascript代码  

1. /** 
2.  * 模仿jquery的链式调用 
3.  */  
4. //为了类(Function)扩展函数,我们定义一个他的静态函数  
5. Function.prototype.method = function(name,fn){  
6.     this.prototype[name] = fn;  
7.     return this;  
8. };  
9. (function(){  
10.     //还记得吗他是私有变量的写法  
11.     function _$(els){};   
12.     //准备方法  
13.     _$.onready = function(obj,fn){  
14.         if(obj){  
15.             //按需求吧对象(_$)注册到window上  
16.             obj.$ = function(){  
17.                 return new _$(arguments);  
18.             }             
19.         }else{  
20.             //按需求吧对象(_$)注册到window上  
21.             window.$ = function(){  
22.                 return new _$(arguments);  
23.             }  
24.         }  
25.         fn();  
26.     }  
27.     //链式的对象增加jquery库提供的操作函数  
28.     _$.method("addEvent",function(type,fn){  
29.         fn();  
30.     }).method("getEvent",function(fn,e){  
31.         fn();  
32.     }).method("addClass",function(className){  
33.         fn();  
34.     }).method("removeClass",function(className){  
35.         fn();  
36.     }).method("replaceClass",function(oldClass,newClass){  
37.         fn();  
38.     }).method("getStyle",function(el,fn){  
39.         fn();  
40.     }).method("setStyle",function(el,fn){  
41.         fn();  
42.     }).method("load",function(url,fn){  
43.         fn();  
44.     });  
45.     //开始使用  
46.     var com = {};  
47.     _$.onready(com,function(){  
48. //      $("div01").addEvent("click",function(){  
49. //          alert("click Event");  
50. //      })  
51.         com.$("div01").addEvent("click",function(){  
52.             alert("click Event");  
53.             com.$(this).getEvent(function(){  
54.                 alert("click getEvent");  
55.             })  
56.         })        
57.     })  
58. })()