jQueryチェーン呼び出し

2268 ワード

http://www.imooc.com/code/3402   
jQueryの核心理念はWrite lessで、Do more(書くのが更に少なくて、するのがもっと多いです)、それではチェーン式の方法の設計とこの核心の理念は期せずして一致します。このようなデザインを深い層から考えると、実はInternal DSLです。
DSLとは、Domain Specific Language、すなわち特定の分野の問題を記述し解決するための言語です。
チェーンコードの一部を見ます。
$('input[type="button"]')
    .eq(0).click(function() {
        alert('   !');
}).end().eq(1)
.click(function() {
    $('input[type="button"]:eq(0)').trigger('click');
}).end().eq(2)
.toggle(function() {
    $('.aa').hide('slow');
}, function() {
    $('.aa').show('slow');
});
このコードの構造を見て、私達は多かれ少なかれその意味を推測できます。
  ☑  typeタイプがbuttonのinput元素を探します。
  ☑  最初のボタンを見つけて、clickイベント処理関数を結びつけます。
  ☑  すべてのボタンを返して、二つ目のボタンを見つけます。
  ☑  二番目のボタンのための結合clickイベント処理関数
  ☑  三つ目のボタンのためにToggaleイベントハンドリング関数をバインドします。
      jQueryのInternal DSL形式のメリットが分かります。コードを書く時、コードを作者の思考モードに近づけます。コードを読む時、コードの意味を読者に分かりやすくします。DSLを適用すると、システムの維持性を効果的に向上させ(モデルと分野モデルを実現する距離を縮小し、実現可能な可読性を向上させる)、柔軟性を高め、開発の効率を提供することができる。
jQueryのこのパイプスタイルのDSLチェーンコードは、全体として:
  ☑  JSコードを節約する
  ☑  同じオブジェクトを返します。コードの効率を向上させます。
プロトタイプ法を簡単に拡張し、return thisの形式でブラウザをまたぐチェーンコールを実現する。JSにおける単純工場法モードを利用して、同じDOMオブジェクトに対する動作の全てを同じ例に指定する。
この原理は超簡単です。次のコードです。
aQuery().init().name()
分解:
a = aQuery();
a.init()
a.name()
コードを分解して、チェーン式の基本条件を明らかに実現するということは、インスタンスオブジェクトを先に作成して、自分の方法を呼び出すということです。
aQuery.prototype = {
    init: function() {
        return this;
    },
    name: function() {
        return this
    }
}
      したがって、チェーンの処理が必要であれば、現在の例のthisを返すことで、コード量を節約して、コードの効率を高めます。コードはより優雅に見えます。しかし、この方法には問題があります。すべての対象の方法は対象自体、つまり戻り値がないので、この方法はどの環境においても当てはまるとは限りません。
      Javascriptは無閉塞言語ですが、彼は閉塞していないのではなく、閉塞できないので、彼はイベントを通じて駆動し、非同期で閉塞プロセスの操作を完成する必要があります。このように処理するのは同期チェーン式だけで、同期チェーン式以外にも非同期チェーン式があります。非同期チェーン式jQueryは1.5からPromiseを導入しました。jQuery.Deferred後期に再検討します。