JavasRiptでは、プロキシとデリゲートがしばしば登場します。
それでは、実際にどのような状況で使用していますか？その原則は何ですか？
ここでは、JavaScript Delegateの使用と原則、およびDojo、JQueryなどのフレームワークにおける代表者のインターフェイスを紹介します。
JavaScriptイベントプロキシ
イベントプロキシは、JSの世界で非常に便利で興味深い機能です。多くの要素にイベントを追加する必要がある場合、親ノードにイベントを追加し、イベントを親ノードに委任することにより、処理機能をトリガーできます。
これは主にブラウザのイベントバブルメカニズムによるものです。この機能の使用方法を説明するための具体的な例を示しましょう。
この例は、主にDavid Walshの関連記事（JavaScript Event Dedigationがどのように機能するか）から取得しています。
多くのLiの子供を含むUL親ノードがあるとします：
<ul id = "list"> <li id = "li-1"> li 1 </li> <li id = "li-2"> li 2 </li> <li id = "li-3"> li 3 </li> <li id = "li-4"> li 4 </li> <li id = "li-5"> li 5 </li> </ul>
マウスがLIに移動する場合、このLIに関する関連情報を取得し、詳細情報を表示するために浮動ウィンドウから浮かぶ必要があります。
私たちの通常の書き方は、オンマウスオーバーや各LIにオンクリックなどのイベント監視を追加することです。
関数addlistenersli（lielement）{lielement.onclick = function clickhandler（）{// todo}; lielement.onmouseover = function mouseoverhandler（）{// todo}} window.onload = function（）{var ulelement = document.getElementbyId（ "list"）; var lielements = ulelement.getElementBytagname（ "li"）; for（var i = lielements.length-1; i> = 0; i-）{addlistenersli（lielements [i]）; }}このULのLi子要素が頻繁に追加または削除される場合、LIを追加するたびにAddListenersliメソッドを呼び出す必要があります。
これにより、追加または削除プロセスにエラーの複雑さと可能性が生じる可能性があります。
問題の解決策は、イベントプロキシメカニズムを使用することです。イベントがより高いレベルの親ノードにスローされると、イベントのターゲットオブジェクトをチェックすることにより、イベントソースLIを判断して取得します。
次のコードは、望ましい効果を達成できます。
/親ノードを取得してクリックイベントをitに追加しますdocument.getElementById（ "list"）。AddEventListener（ "click"、function（e）{//イベントソースE.targeがli if（e.target && e.target.nodename.touppercase == "li"）{//クリック！ "）;}}）;親ノードにクリックイベントを追加します。子ノードがクリックされると、クリックイベントが子ノードから上向きになります。親ノードがイベントをキャッチした後、e.target.nodenameを判断して処理する必要があるノードであるかどうかを決定します。クリックされたLiノードはE.Targetを介して取得されました。したがって、対応する情報を取得して処理できます。
イベントバブルとキャプチャ
ブラウザのイベントバブルメカニズム、さまざまなブラウザメーカーには、イベントのキャプチャと処理のための処理メカニズムが異なります。ここでは、Dom2.0のW3Cで定義された標準イベントを紹介します。
DOM2.0モデルは、イベント処理プロセスを3つの段階に分割します。
1。イベントキャプチャステージ、
2。イベントターゲットステージ、
3。イベントの泡立ち段階。
下の図に示すように：
イベントキャプチャ：要素がイベント（OnClickなど）をトリガーすると、トップレベルのオブジェクトドキュメントはイベントストリームを発し、イベントが実際に発生するターゲット要素に到達するまで、DOMツリーのノードを使用してターゲット要素ノードに流れます。このプロセスでは、イベントの対応するリスニング機能はトリガーされません。
イベントターゲット：ターゲット要素に到達した後、ターゲット要素のイベントの対応する処理関数が実行されます。バウンドリスナー機能がない場合、実行されません。
イベントバブル：ターゲット要素から始めて、上部要素に伝播します。ノードが途中で対応するイベント処理機能にバインドすると、これらの機能は一度にトリガーされます。イベントのバブルを防ぎたい場合は、E.StopPropagation（）（Firefox）またはE.CancelBubble = True（IE）を使用して、イベントのバブルスプレッドを整理できます。
JQueryとDojoの委任機能
DojoとJQueryで提供されるイベントプロキシインターフェイスの使用方法を見てみましょう。
jQuery：
$（ "＃list"）。delegate（ "li"、 "click"、function（）{// "$（this）"は、console.log（ "linkをクリックしました！"、$（this））;}）をクリックしたノードです。jQueryデリゲートメソッドには、セレクター、タイム名、およびイベントハンドラーの3つのパラメーターが必要です。
DojoのJQueryとの類似性は、2つの間のプログラミングスタイルの違いにすぎません。
["dojo/query"、 "dojox/nodelist/delegate"]、function（query、delegate）{query（ "＃list"）。DojoのDelegateモジュールはdojox.nodelistにあり、提供されるインターフェイスはjqueryと同じであり、パラメーターは同じです。
委任を通じて、イベント代表団を開発に使用することのいくつかの利点を理解することができます。
1.管理されている関数は少なくなります。各要素にリスナー関数を追加する必要はありません。同じ親ノードの下の同様の子要素の場合、イベントは親要素に委任されたリスニング機能を介して処理できます。
2。要素を動的に追加および変更するのは簡単であり、要素の変更によりイベントバインディングを変更する必要はありません。
3. JavaScriptとDOMノードの間の相関は減少し、円形の参照によって引き起こされるメモリ漏れの確率が低下します。
JavaScriptプログラミングでプロキシを使用します
上記では、DOMイベントを処理する際にDOM要素にイベントプロキシを追加するために、ブラウザバブルメカニズムの使用を導入します。実際、純粋なJSプログラミングでは、このプログラミングパターンを使用してプロキシオブジェクトを作成してターゲットオブジェクトを操作することもできます。
var Delegate = function（client、clientMethod）{return function（）{return clientmethod.apply（client、arguments）; }} var apple = function（）{var _color = "red"; return {getColor：function（）{console.log（ "color：" + _color）; }、setColor：function（color）{_color = color; }}; }; var a = new Apple（）; var b = new Apple（）; a.getColor（）; a.setColor（ "green"）; a.getColor（）; // Proxy var d = Delegate（a、a.setcolor）の呼び出し; d（ "blue"）; //実行プロキシA.getColor（）; //b.getColor（）;上記の例では、Aの変更は、Delegate（）関数によって作成されたプロキシ関数Dを呼び出すことにより動作します。
この方法では、適用（通話も使用できます）を使用してコールオブジェクトを転送しますが、特定のオブジェクトをプログラミングモードから隠すことを実装します。これにより、これらのオブジェクトが自由にアクセスおよび変更されるのを防ぎます。
代表者の概念は、多くのフレームワークで参照され、メソッドの操作範囲を指定します。
典型的な例は、dojo.hitch（scope、method）とextjsのcreatedelegate（obj、args）です。
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。