JavaScriptを深く理解するシリーズ(31)：デザインパターンのプロキシパターンを詳しく解説_JavaScriptスキル

はじめに

エージェントは、その名前が示すように、他の人が何かをするのを助けることです。GoF はエージェンシー モデルを次のように定義します。

プロキシ モード (プロキシ) は、このオブジェクトへのアクセスを制御するために他のオブジェクトにプロキシを提供します。

プロキシ パターンを使用すると、プロキシ オブジェクトが特定のオブジェクトへの参照を制御できるようになります。プロキシには、ファイル、リソース、メモリ内のオブジェクト、またはコピーが難しいものなど、ほぼすべてのオブジェクトを指定できます。

テキスト

簡単な例を挙げましょう。ドゥドゥがヨーグルトの女の子にバラを贈りたいが、彼女の連絡先を知らなかったり、恥ずかしいので、バラを贈るのをおじさんに任せたいとします。エージェント（実際にはかなり良いです）、あなたの義理の娘のためにいくつかの花を差し引くことができます）、それではどうすればよいですか？

コードをコピー コードは次のとおりです:

// 最初に美容オブジェクトを宣言します
var girl = 関数 (名前) {
This.name = 名前;
};
// こちらはドゥドゥ

var dudu = 関数 (女の子) {
This.girl = 女の子;
This.send Gift = 関数 (ギフト) {
alert("こんにちは " girl.name "、ドゥドゥがあなたに贈り物をします: " Gift);
}
};

//おじさんはエージェントです

var proxyTom = 関数 (女の子) {
This.girl = 女の子;
This.send Gift = 関数 (ギフト) {
(new dudu(girl)).send Gift(gift) // dudu
に花を送ります。 }
};

呼び出しメソッドは非常に簡単です:

コードをコピー コードは次のとおりです:

var proxy = new proxyTom(new girl("ヨーグルトガール"));
proxy.sendギフト("999本のバラ");

実戦

上記のコードを通して、プロキシ モードについては皆さんよく理解できたと思います。実際に練習してみましょう。単純なプレイリストがあり、単一のリンクをクリックしたとき (またはすべてを選択したとき)、リンクの下にビデオ音楽を表示する必要があります。紹介と再生ボタン 再生ボタンをクリックすると、リスト構造は次のようになります:

コードをコピー コードは次のとおりです:

デイブ マシューズの動画

すべて選択/反転選択

1. グレイブディガー


2. 保存してください
> ;

3. クラッシュ


4. 水を飲まないでください


5. このままでは面白い
   
6. 何と言いますか
   

まず、接続のクリック イベントを監視するだけでなく、「すべて選択/反転選択」のクリック イベントも監視する必要があります。次に、サーバーにビデオ情報のクエリを要求し、 HTML 情報を li 要素の最後の位置に表示すると、次のような効果になります。

次に、再生接続のクリック イベントを監視し、クリック後に再生を開始します。その効果は次のとおりです。

それでは、jQuery を使わずにセレクターをカスタマイズしてみましょう:

コードをコピー コードは次のとおりです:

var $ = 関数 (id) {
document.getElementById(id);
を返す };

Yahoo の json サービスはコールバック パラメーターを提供するため、データを受け入れるためにカスタム コールバックを渡します。具体的なクエリ文字列アセンブリ コードは次のとおりです。

コードをコピー コードは次のとおりです:

var http = {
MakeRequest: 関数 (ID、コールバック) {
var url = 'http://query.yahooapis.com/v1/public/yql?q=',
sql = 'select * from music.video.id where ids IN ("%ID%")',
format = "format=json",
ハンドラー = "callback=" コールバック,
script = document.createElement('script');
sql = sql.replace('%ID%', ids.join('","'));

sql = encodeURIComponent(sql);

url = SQL '&' 形式 '&' ハンドラー;

script.src = url;

document.body.appendChild(script);

}
};

プロキシ オブジェクトは次のとおりです:

コードをコピー コードは次のとおりです:

var プロキシ = {
id: []、
遅延: 50、
タイムアウト: null、
コールバック: null、
コンテキスト: null、
// リクエスト ID とコールバックを設定して、再生中にコールバックをトリガーします
MakeRequest: 関数 (ID、コールバック、コンテキスト) {
// キューに追加 dd をキューに追加

This.ids.push(id);

this.callback = コールバック;

This.context = コンテキスト;

// タイムアウトを設定します

If (!this.timeout) {
This.timeout = setTimeout(function () {
proxy.flush();
}, this.delay);
}
}、
// リクエストをトリガーし、プロキシ責任を使用して http.makeRequest
を呼び出します フラッシュ: function () {
// proxy.handler は yahoo をリクエストするときのコールバック
です http.makeRequest(this.ids, 'proxy.handler'); // データをリクエストした後、proxy.handler メソッドを実行します (別のコールバックが設定されています)

//タイムアウトとキューをクリア
This.timeout = null;
This.ids = [];

},

ハンドラー: 関数 (データ) {

var i, max;

// 単一のビデオに対するコールバック呼び出し

If (parseInt(data.query.count, 10) === 1) {

proxy.callback.call(proxy.context, data.query.results.Video);
return;
}

// 複数のビデオに対するコールバック呼び出し

for (i = 0, max = data.query.results.Video.length; i proxy.callback.call(proxy.context, data.query.results.Video[i]);
}
}
};

ビデオ処理モジュールには主に、情報の取得、情報の表示、ビデオの再生という 3 つのサブ機能があります。

コードをコピー コードは次のとおりです:

var ビデオ = {
    // 初始化播放器代码，开始播放
    getPlayer: 関数 (id) {
        戻ります ''
            '';
                }、
    // メッセージを受信すると内容が表示され、その後 li の下部に表示されます
    updateList: 関数 (データ) {
        変数ID、
            html = '',
            情報;

if (data.query) {
            データ = data.query.results.Video;
        }
        id = data.id;
        html = '';
        html = '

' data.title '

';
        html = '

' data.copyrightyear ', ' data.label '

';
        if (data.Album) {
            html = '

アルバム: ' data.Album.Release.title ', ' data.Album.Release.release Year '
';
        }
        html = '

»再生

';
        info = document.createElement('div');
        info.id = "情報" id;
        info.innerHTML = html;
        $('v' id).appendChild(info);
    }、
    // 获取情報并显示
    getInfo: 関数 (id) {
        var info = $('info' id);

if (!info) {
            proxy.makeRequest(id, videos.updateList, videos); //実行代理职责，并传入videos.updateList回调関数
            戻る;
        }

if (info.style.display === "none") {
info.style.display = '';
} else {
info.style.display = 'none';
}
}
};

これで、クリック イベントのコードを処理できるようになりました。多数の A 接続があるため、各接続がイベントをバインドすると、明らかにパフォーマンスの問題が発生するため、イベントを

要素にバインドします。クリックは接続です。接続されている場合、ビデオ アドレスをクリックすると再生できることを意味します:
コードをコピーします コードは次のとおりです:

$('vids').onclick = function (e) {
var src, id;

e = e || ウィンドウ.イベント;
src = e.target || e.srcElement;

// 接続されていない場合、プロセスは続行されません
If (src.nodeName.toUpperCase() !== "A") {
return;
}
// 泡立ちを止める
If (typeof e.preventDefault === "関数") {
e.preventDefault();
}
e.returnValue = false;

id = src.href.split('--')[1];

//作成された動画情報エリアのリンク再生をクリックすると再生を開始します
// その場合、リターンは続行されません
If (src.className === "play") {
src.parentNode.innerHTML = videos.getPlayer(id);
return;
}

src.parentNode.id = "v" id;
Videos.getInfo(id); // 初回クリック時に動画情報を表示する処理コードです
};


すべてを選択するコードと選択を反転するコードは似ているため、説明しません。

コードをコピーします コードは次のとおりです:

$('toggle-all').onclick = function (e) {

var hrefs、i、max、id;

hrefs = $('vids').getElementsByTagName('a');
for (i = 0, max = hrefs.length; i // プレイ接続を無視します
If (hrefs[i].className === "play") {
続行;
}
//選択されていない項目を無視します
If (!hrefs[i].parentNode.firstChild.checked) {
続行;
}

id = hrefs[i].href.split('--')[1];
hrefs[i].parentNode.id = "v" id;
videos.getInfo(id);
}
};


概要

プロキシ モードは通常、次の状況に適しています:

1. リモート プロキシは、Web サービスのプロキシ クラスと同様に、異なるアドレス空間にあるオブジェクトのローカル表現を提供します。
2. 仮想プロキシ。必要に応じて高価なオブジェクトを作成し、インスタンス化に時間がかかる実際のオブジェクトを保存するために使用します。たとえば、ブラウザーがレンダリングするときに問題が最初に表示され、画像の表示が遅くなる可能性があります。つまり、仮想プロキシを介して、実イメージの代わりに、仮想エージェントは実イメージ
のパスとサイズを保存します。 3. セキュリティ プロキシは、実際のオブジェクトにアクセスする際の権限を制御するために使用されます。通常、異なるアクセス権限を持つ必要があるオブジェクトに使用されます。
4. インテリジェントなガイダンス。実際のオブジェクトが呼び出されたときのみ、エージェントは他のことを処理します。たとえば、C# のガベージ コレクションでは、オブジェクトが使用されると参照カウントが発生し、そのオブジェクトが参照されなくなった場合、GC はそのオブジェクトをリサイクルできます。

参考:「Dahua デザインパターン」