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');});