JavaScript设计模式——方法的链式调用

方法的链式调用：

 1         (function() {
 2             //私有类
 3             function _$ (els) {
 4                 this.elements = [];
 5                 for(var i = 0, len = els.length; i < len; ++i){
 6                     var element = els[i];
 7                     if(typeof element === ‘string‘){
 8                         element = document.getElementById(element);
 9                     }
10                     this.elements.push(element);
11                 }
12             }
13             _$.prototype = {
14                 each: function(fn) {
15                     for (var i=0, len=this.elements.length; i<len.length; ++i) {
16                         fn.call(this, this.elements[i]);
17                     };
18                     return this;
19                 },
20                 setStyle: function(prop, val) {
21                     this.each(function(el){
22                         el.style[prop] = val;//el即dom元素，给每个元素设置样式
23                     });
24                     return this;
25                 },
26                 show: function() {
27                     var that = this;
28                     this.each(function() {
29                         that.setStyle(‘display‘, ‘block‘);
30                     });
31                     return this;
32                 },
33                 addEvent: function(type, fn) {
34                     var add = function(el) {
35                         if(widow.addEventListener){
36                             el.addEventListener(type, fn, false)
37                         }
38                         else if(widow.attachEvent){
39                             el.attachEvent(‘on‘+type, fn);
40                         }
41                     };
42
43                     this.each(function(el) {
44                         add(el);
45                     });
46                     return this;
47                 }
48             }
49             window.$ = function() {
50                 return new _$(arguments);
51             };
52         })();

看看该类的每一个方法的最后一行，你会发现他们都以“returen this”结束。这将会用以调用方法的对象传个调用链上的下一个方法。支持链式调用的接口带来的可能性是无穷的。现在你可以这样编写代码：

1         $(widow).addEvent(‘load‘, function() {
2             $(‘test-1‘,‘test-2‘).show().
3             setStyle(‘color‘, ‘red‘).
4             addEvent(‘click‘, function() {
5                 $(this).setStyle(‘color‘, ‘green‘);
6             });
7         }

这会把一个时事件监听器关联到window对象的load事件。它执行的时候回立即显示ID值为test-1和test-2的两个元素并将其中的文字设置为红色，随后，它会为这两个元素添加click事件监听器，其作用是在他们被点击时将文字设置为绿色。