本文共 1585 字，大约阅读时间需要 5 分钟。

模拟简单的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链式调用：

转载地址：http://uergi.baihongyu.com/