jQueryチェーン呼び出し
2268 ワード
http://www.imooc.com/code/3402
jQueryの核心理念はWrite lessで、Do more(書くのが更に少なくて、するのがもっと多いです)、それではチェーン式の方法の設計とこの核心の理念は期せずして一致します。このようなデザインを深い層から考えると、実はInternal DSLです。
DSLとは、Domain Specific Language、すなわち特定の分野の問題を記述し解決するための言語です。
チェーンコードの一部を見ます。
☑ typeタイプがbuttonのinput元素を探します。
☑ 最初のボタンを見つけて、clickイベント処理関数を結びつけます。
☑ すべてのボタンを返して、二つ目のボタンを見つけます。
☑ 二番目のボタンのための結合clickイベント処理関数
☑ 三つ目のボタンのためにToggaleイベントハンドリング関数をバインドします。
jQueryのInternal DSL形式のメリットが分かります。コードを書く時、コードを作者の思考モードに近づけます。コードを読む時、コードの意味を読者に分かりやすくします。DSLを適用すると、システムの維持性を効果的に向上させ(モデルと分野モデルを実現する距離を縮小し、実現可能な可読性を向上させる)、柔軟性を高め、開発の効率を提供することができる。
jQueryのこのパイプスタイルのDSLチェーンコードは、全体として:
☑ JSコードを節約する
☑ 同じオブジェクトを返します。コードの効率を向上させます。
プロトタイプ法を簡単に拡張し、
この原理は超簡単です。次のコードです。
Javascriptは無閉塞言語ですが、彼は閉塞していないのではなく、閉塞できないので、彼はイベントを通じて駆動し、非同期で閉塞プロセスの操作を完成する必要があります。このように処理するのは同期チェーン式だけで、同期チェーン式以外にも非同期チェーン式があります。非同期チェーン式jQueryは1.5からPromiseを導入しました。jQuery.Deferred後期に再検討します。
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後期に再検討します。