JavaScriptのデザインパターン（チェーンコール）を学ぶ_JavaScriptスキル

1. チェーンコールとは
これは次のように理解するのが簡単です:

$(this).setStyle('color', 'red').show();

一般的な関数呼び出しとチェーン呼び出しの違い: メソッドを呼び出した後、これは現在呼び出しているメソッドのオブジェクトを返します。

function Dog(){
    this.run= function(){
      alert("The dog is running....");
      return this;//返回当前对象 Dog
    };
    this.eat= function(){
      alert("After running the dog is eatting....");
      return this;//返回当前对象 Dog

    };
    this.sleep= function(){
      alert("After eatting the dog is running....");
      return this;//返回当前对象 Dog

    };
  }
  //一般的调用方式；
/* var dog1 =new Dog();
  dog1.run();
  dog1.eat();
  dog1.sleep();*/
  var dog2 = new Dog();
  dog2.run().eat().sleep();

2. チェーンコールを分解する

チェーンコールは実際には 2 つの部分から構成されます:

1). 操作オブジェクト (つまり、上記の例の $(this) など、操作される DOM 要素)

2).操作方法（具体的に何をするのか、上記の例ではsetStyleやshowなど）

操作オブジェクトと操作メソッドの実装方法

汎用 $function を作成します:

function $(){
  var elements = [];
  for(var i= 0,len=arguments.length; i<len; i++){
    var element = arguments[i];
    if(typeof element==='string'){
      element = document.getElementById(element);
    }
    if(arguments.length==1){
      return element;
    }
    elements.push(element);
  }
  return elements;
}

ただし、この関数をコンストラクターに変換する場合は、それらの要素をインスタンス属性の配列として保存し、コンストラクター関数のプロトタイプ属性が指すオブジェクトに定義されているすべてのメソッドがメソッド A 参照の呼び出しに戻るようにします。そのインスタンスに呼び出しをチェーンする機能があります。 (ここまで言いましたが、これを返すだけです。各メソッドの最後に)、

まず、この $function をファクトリ メソッドに変更する必要があります。このメソッドは、チェーン呼び出しをサポートするオブジェクトを作成する役割を果たします。この関数は、以前と同じパブリック インターフェイスを使用できるように、要素の配列の形式で引数を受け入れることができる必要があります。このようにして、チェーンコールを行う機能があります。

変換は次のとおりです:

(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; i++){
        fn.call(this, this.elements[i]);
      }
      return this; //在每个方法的最后return this;
    },
    setStyle: function(prop, val){
      this.each(function(el){
        el.style[prop] = val;
      });
      return this; //在每个方法的最后return this;
    },
    show: function(){
      var that = this;
      this.each(function(el){
        that.setStyle('display', 'block');
      });
      return this; //在每个方法的最后return this;
    },
    addEvent: function(type, fn){
      var add = function(el){
        if(window.addEventListener){
          el.addEventListener(type, fn, false);
        }else if(window.attachEvent){
          el.addEvent('on'+type, fn);
        }
      };
      this.each(function(el){
        add(el);
      });
      return this; //在每个方法的最后return this;
    }
  }
  window.$ = function(){
    return new _$(arguments);
  }
})();

最後にこれを返します。これにより、呼び出し側メソッドのオブジェクトが呼び出し側チェーン内の次のメソッドに渡されます。

3. jQuery の基礎となるチェーン プログラミングをシミュレートします

// 块级作用域
//特点1 程序启动的时候 里面的代码直接执行了
//特点2 内部的成员变量 外部无法去访问 （除了不加var修饰的变量）

(function(window , undefined){
  // $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范)
  function _$(arguments){
    //实现代码...这里仅实现ID选择器
    // 正则表达式匹配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.$ = _$ ;
  // 写一个准备的方法
  _$.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');
  //alert(inp.dom.nodeName);
  //alert($('#inp'));
  inp.addEvent('click',function(){
    alert('我被点击了!');
  }).setStyle('backgroundColor' , 'red');
});

4. コールバック関数を使用して、チェーン呼び出しをサポートするメソッドからデータを取得します

連鎖呼び出しは代入メソッドには非常に適していますが、値取得メソッドの場合は、各メソッドがこれを返すため不便です。

ただし、まだ回避策はあります。それがコールバック関数です。

コールバック関数を使用しない場合

//without callback
window.API = window.API || function(){
  var name = 'JChen';
  this.setName = function(newName){
    name = newName;
    return this;
  };
  this.getName = function(){
    return name;
  };
};
var o = new API();
console.log(o.getName());
console.log(o.setName('Haha').getName());

コールバック関数を使用する場合

//with callback
window.API2 = window.API2 || function(){
  var name = 'JChen';
  this.setName = function(newName){
    name = newName;
    return this;
  };
  this.getName = function(callback){
    callback.call(this, name);
    return this;
  };
};
var o2 = new API2();
o2.getName(console.log).setName('Hehe').getName(console.log);

コールバック関数を使用する場合、通常は callback.call(this, name) で問題ありませんが、この例では console.log が使用されているため、問題が発生します。その理由は、コンソールの this が Windows ではなくコンソールを指しているためです。

この問題も簡単に解決できます。以下のように:

//with callback
window.API2 = window.API2 || function(){
  var name = 'JChen';
  this.setName = function(newName){
    name = newName;
    return this;
  };
  this.getName = function(callback){
    callback.call(this, name);
    return this;
  };
};
var o2 = new API2();
var log = function(para){
  console.log(para);
};
o2.getName(log).setName('Hehe').getName(log);

このスタイルのチェーン呼び出しは、コードの記述を簡素化し、コードをより簡潔にして読みやすくし、オブジェクト変数を何度も再利用することを避けるのに役立ちます。これを誰もが習得できることを願っています。