Javascriptの中の方法の鎖(Method Chining)は紹介します.

3309 ワード

Javascript APIをどのように設計するかを探している時、Method Chiningというものを発見しました.方法チェーンは強く見えるし、面白いです.これも昔よく見たものです.
Javascript Method Chining
ウィキペディアでは、こんな説明があります.
 
  
Method chaining, also known as named parameter idiom, is a common syntax for invoking multiple method calls in object-oriented programming languages. Each method returns an object, allowing the calls to be chained together in a single statement.Chaining is syntactic sugar which eliminates the need for intermediate variables. A method chain is also known as a train wreck due to the increase in the number of methods that come one after another in the same line that occurs as more methods are chained togethe even though line breaks are often added between methods.
翻訳ツールを使って翻訳しました.
 
  
, , 。 , , 。 , 。 。
Method Chining使用
目測が最も多く使われているのは、jQueryです.
 
  
// chaining
$("#person").slideDown('slow')
   .addClass('grouped')
   .css('margin-left', '11px');
私たちはこのような使い方でこれを呼び出すことができます.jQueryはリンクに大きく依存します.これにより、いくつかの方法が同じ選択で呼び出されやすくなります.これはコードをより明確にし、同じ選択を行うことを防止する(性能を向上させる).チェーンがない時は次のようです.
 
  
var p = $('#person');
p.slideDown('slow');
p.addClass('grouped');
p.css('margin-left', '11px');
デザインモードの中のブライダーと似ているように見えますが、ここのpは一つのタイプではなく、方法です.
Javascriptメソッドチェーンの例
以前私たちがJavascript高次関数について話した時、print('Hello')という使い方の結果はこうなるかもしれません.
 
  
function f(i){
  return function(e){
    i+=e;
    return function(e){
      i+=e;
      return function(e){
        alert(i+e);
      };
    };
  };
};
f(1)(2)(3)(4); //10
これはネットの一例ですが、私も前にチェーン式の呼び出しを書いたのです.弱そうです.
 
  
var func = (function() {
    return{
        add: function () {
            console.log('1');
            return{
                result: function () {
                    console.log('2');
                }
            }
        }
    }
})();

func.add().result();

実際には各functionにreturn thisが必要です.
 
  
Func = (function() {
    this.add = function(){
        console.log('1');
        return this;
    };
    this.result = function(){
        console.log('2');
        return this;
    };
    return this;
});

var func = new Func();
func.add().result();

もちろん私達も最後の二つの文を使ってもいいです.
 
  
var func = new Func();
func.add().result();
になります
 
  
new Func().add().result();
その他
最後に迷ったところの比較として:
Method Chining VS prototype Chining
プロトタイプチェーンと方法チェーンはいくつかの点で似ています.
1.プロトタイプチェーンはプロトタイプを使う必要があります.2.メソッドチェーンは方法です.