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事件监听器，其作用是在他们被点击时将文字设置为绿色。