javascript设计模式-链式编程(3)

模拟简单的jquery中的链式调用

简单链式调用

function Dog(){
    this.run = function(){
        alert('dog is run...');
        return this ;
    };
    this.eat = function(){
        alert('dog is eat...');
        return this ;
    };
    this.sleep = function(){
        alert('dog is sleep...');
        return this ;
    }
}
var d1 = new Dog();
d1.run().eat().sleep();
//d1.eat();
//d1.sleep();

模拟jquery底层链式调用

第一步，模拟出全局的准备方法和$绑定：

(function(window, undefined) {
   //window上先注册一个全局变量，与外界产生关系
   window.$ = _$;
   //写一个准备方法，类似jquery调用的准备函数
   _$.onReady = function(fn) {
    //直接执行传入的函数
    fn();
   };

})(window);

$.onReady(function(){
    alert("invoked!");
});

第二步，实现简单的链式调用:

(function(window, undefined) {
     //$为返回给外界常用的对象,一般用'_'作为私有的对象,这里看做对象的构造函数
     function _$(arguments) {
        alert("constructor");
     }
     //在_$的原型对象上加一些公共的方法
     _$.prototype = {
         constructor: _$,
         addEvent: function() {
             alert("addEvent");
             return this;
         },
         setStyle: function() {
             alert("setStyle");
             return this;
         }

     };
     //window上先注册一个全局变量，与外界产生关系
     window.$ = _$;
     //写一个准备方法，类似jquery调用的准备函数
     _$.onReady = function(fn) {
         //1.实例化出来_$对象，真正的注册到window上
         window.$ = function() {
             return new _$(arguments);
         };
         //2.执行传入进来的代码
         fn();
          };

 })(window); //传入的入口window传入作用域中

 $.onReady(function() {
     // alert($("#inp"));  //constructor [object Object]
     $("#inp").addEvent().setStyle();//constructor addEvent  setStyle
 });

第三补，实现简单完整的jquery链式调用：

<input id="inp" type="button" value="点击我" />
<script type="text/javascript">
(function(window, undefined) {
    //$为返回给外界常用的对象,一般用'_'作为私有的对象,这里看做对象的构造函数
    function _$(arguments) {
        //正则表达式匹配id选择器
        var idselector = /#\w+/;
        this.dom; // 此属性 接受所得到的元素
        // 如果匹配成功 则接受dom元素   arguments[0] = '#inp'
        if (idselector.test(arguments[0])) {
            this.dom = document.getElementById(arguments[0].substring(1));
        } else {
            throw new Error(' arguments is error !');
        }
    }
    // 在Function类上扩展一个可以实现链式编程的方法  ①
    Function.prototype.method = function(methodName, fn) {
        this.prototype[methodName] = fn;
        return this; //链式编程的关键
    };

    //在_$的原型对象上加一些公共的方法
    _$.prototype = {
        constructor: _$,
        addEvent: function(type, fn) {
            //给元素注册事件
            if (window.addEventListener) { // FF 
                this.dom.addEventListener(type, fn);
            } else if (window.attachEvent) { // IE
                this.dom.attachEvent('on' + type, fn);
            }
            return this;
        },
        setStyle: function(prop, val) {
            this.dom.style[prop] = val;
            return this;
        }

    };
    //window上先注册一个全局变量，与外界产生关系
    window.$ = _$;
    //写一个准备方法，类似jquery调用的准备函数
    _$.onReady = function(fn) {
        //1.实例化出来_$对象，真正的注册到window上
        window.$ = function() {
            return new _$(arguments);
        };
        //2.执行传入进来的代码
        fn();
        // 3 实现链式编程  内部的一些组合  需要上述①处的支持
        _$.method('addEvent', function() {
            // nothing to do
        }).method('setStyle', function() {
            // nothing to do
        });
    };

})(window); //传入的入口window传入作用域中

$.onReady(function() {
    var inp = $("#inp");
    inp.addEvent('click', function() {
        alert('我被点击了!');
    }).setStyle('backgroundColor', 'red');
});