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

方法的链式调用：

         (function() {
             //私有类
             function _$ (els) {
                 this.elements = [];
                 for(var i = 0, len = els.length; i < len; ++i){
                     var element = els[i];
                     if(typeof element === 'string'){
                         element = document.getElementById(element);
                     }
                     this.elements.push(element);
                 }
             }
             _$.prototype = {
                 each: function(fn) {
                     for (var i=0, len=this.elements.length; i<len.length; ++i) {
                         fn.call(this, this.elements[i]);
                     };
                     return this;
                 },
                 setStyle: function(prop, val) {
                     this.each(function(el){
                         el.style[prop] = val;//el即dom元素，给每个元素设置样式
                     });
                     return this;
                 },
                 show: function() {
                     var that = this;
                     this.each(function() {
                         that.setStyle('display', 'block');
                     });
                     return this;
                 },
                 addEvent: function(type, fn) {
                     var add = function(el) {
                         if(widow.addEventListener){
                             el.addEventListener(type, fn, false)
                         }
                         else if(widow.attachEvent){
                             el.attachEvent('on'+type, fn);
                         }
                     };

                     this.each(function(el) {
                         add(el);
                     });
                     return this;
                 }
             }
             window.$ = function() {
                 return new _$(arguments);
             };
         })();

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

         $(widow).addEvent('load', function() {
             $('test-1','test-2').show().
             setStyle('color', 'red').
             addEvent('click', function() {
                 $(this).setStyle('color', 'green');
             });
         }

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