JavaScript デザイン パターンを学ぶ - プロキシ パターン_JavaScript スキル
- 有名人はマネージャーによって代表されます。有名人にコマーシャルパフォーマンスの司会を依頼する場合は、エージェントに連絡するだけで済みます。エージェントはコマーシャルパフォーマンスの詳細と報酬について交渉し、その後、有名人に契約書に署名してもらいます。
1. 定義
プロキシ パターン: オブジェクトへのアクセスを制御するために、オブジェクトのサロゲートまたはプレースホルダーを提供します。
エージェントは次のように分類されます: 保護エージェントと仮想エージェント
保護エージェント: は、対象オブジェクトに対する異なる権限を持つオブジェクトのアクセスを制御するために使用されます。 JavaScript では、誰がオブジェクトにアクセスしたかを判断することが難しいため、保護エージェントは困難です。実装する。
2. イメージのプリロード (最も一般的な仮想エージェント アプリケーションのシナリオ)
画像のプリロードは一般的な技術です。img タグ ノードの src 属性を直接設定すると、画像が大きすぎるか、ネットワークが貧弱であるために、画像の位置が一定期間空白になることがよくあります。一般的なアプローチは、事前に読み込み中の画像をプレースホルダーとして使用し、画像が読み込まれた後にその画像を img ノードに埋め込むことです。
実装原則:
Image オブジェクトを作成します: var a = new Image();
Image オブジェクトの src を定義します: a.src = “xxx.gif”;
これは、ブラウザーの画像をキャッシュすることと同じです。
画像オブジェクトの complete 属性を通じて、画像が読み込まれたかどうかを確認できます。各 Image オブジェクトには complete 属性があり、onload、onerror、onabort イベントのいずれかが発生すると、その時点で属性値が終了します。 complete 属性は true です。
(1) 非プロキシ実装
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
var img = new Image();
img.onload = function() {
imgNode.src = img.src;
};
return {
setSrc: function(src) {
imgNode.src = "./images/loading.gif";
img.src = src;
}
}
})();
myImage.setSrc("./images/originImg.png");
(2) プロキシ実装
// 创建图片DOM
var myImage = (function() {
var imgNode = document.createElement("img");
document.body.appendChild(imgNode);
return {
setSrc: function(src) {
imgNode.src = src;
}
};
})();
// 代理
var proxyImage = (function() {
var img = new Image();
img.onload = function() {
myImage.setSrc(this.src); // this指向img！img加载完成后，将img.src传递给myImage
};
return {
setSrc: function(src) {
myImage.setSrc("./images/loading.gif"); // loading
img.src = src;
}
};
})();
proxyImage.setSrc("./images/originImg.png");
ファイル同期機能を実行しているとします。チェックボックスを選択すると、対応するファイルが別のサーバーに同期されます。
<body>
<input type="checkbox" id="1" />文件1
<input type="checkbox" id="2" />文件2
<input type="checkbox" id="3" />文件3
<input type="checkbox" id="4" />文件4
<input type="checkbox" id="5" />文件5
<input type="checkbox" id="6" />文件6
</body>
解決策: プロキシ機能を使用して、一定期間内のリクエストを収集し、それらを一度にサーバーに送信します。
var synchronousFile = function(id) {
console.log("开始同步文件，id为：" + id);
};
var proxySynchonousFile = (function() {
var cache = [], // 保存本次需要同步文件的id
timer; // 定时器
return function(id) {
cache.push(id);
if(timer) {
// 不要覆盖已经启动的定时
return;
}
timer = setTimeout(function(){
synchronousFile(cache.join(","));
clearTimeout(timer);
timer = null;
cache.length = 0; // 清空缓存
}, 2000);
}
})();
var checkboxs = document.getElementsByTagName("input");
for(var i = 0, c; c = checkboxs[i]; i++) {
c.onclick = function() {
if(this.checked === true) {
proxySynchonousFile(this.id);
}
}
}
var mult = function() {
var result = 1;
for(var i = 0, l = arguments.length; i < l; i++) {
result= result * arguments[i];
}
return result;
};
var proxyMult = (function() {
var cache = {}; // {"1,2,3": 6}
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = mult.apply(this, arguments);
}
})();
console.log(proxyMult(1, 2, 3));
// 改造：
var proxyFactory = function(fn) {
var cache = {};
return function() {
var args = Array.prototype.join.call(arguments, ",");
if(args in cache) {
return cache[args];
}
return cache[args] = fn.apply(this, arguments);
}
};
console.log(proxyFactory(mult)(1, 2, 3));
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7647
15
1392
52
91
11
34
152
Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違い
Jun 02, 2024 pm 12:59 PM
Java フレームワークにおけるデザイン パターンとアーキテクチャ パターンの違いは、デザイン パターンがソフトウェア設計における一般的な問題に対する抽象的な解決策を定義し、ファクトリ パターンなどのクラスとオブジェクト間の相互作用に焦点を当てていることです。アーキテクチャ パターンは、階層化アーキテクチャなどのシステム コンポーネントの編成と相互作用に焦点を当てて、システム構造とモジュールの間の関係を定義します。
Java デザイン パターンにおけるデコレータ パターンの分析
May 09, 2024 pm 03:12 PM
デコレータ パターンは、元のクラスを変更せずにオブジェクトの機能を動的に追加できる構造設計パターンです。抽象コンポーネント、具象コンポーネント、抽象デコレータ、具象デコレータの連携によって実装され、ニーズの変化に合わせてクラス機能を柔軟に拡張できます。この例では、ミルクとモカのデコレーターが総額 2.29 ドルで Espresso に追加されており、オブジェクトの動作を動的に変更するデコレーター パターンの力を示しています。
PHP設計パターンの実践事例分析
May 08, 2024 am 08:09 AM
1. ファクトリ パターン: オブジェクト作成とビジネス ロジックを分離し、ファクトリ クラスを通じて指定された型のオブジェクトを作成します。 2. オブザーバー パターン: サブジェクト オブジェクトが状態の変化をオブザーバー オブジェクトに通知できるようにし、疎結合とオブザーバー パターンを実現します。
デザインパターンがコードメンテナンスの課題にどのように対処するか
May 09, 2024 pm 12:45 PM
デザイン パターンは、再利用可能で拡張可能なソリューションを提供することで、コード メンテナンスの課題を解決します。 オブザーバー パターン: オブジェクトがイベントをサブスクライブし、イベントが発生したときに通知を受信できるようにします。ファクトリ パターン: 具象クラスに依存せずにオブジェクトを作成するための集中的な方法を提供します。シングルトン パターン: クラスには、グローバルにアクセス可能なオブジェクトの作成に使用されるインスタンスが 1 つだけ存在することが保証されます。
Java 設計パターンにおけるアダプター パターンの素晴らしい使用法
May 09, 2024 pm 12:54 PM
アダプター パターンは、互換性のないオブジェクトが連携できるようにする構造設計パターンであり、オブジェクトがスムーズに対話できるように、あるインターフェイスを別のインターフェイスに変換します。オブジェクト アダプタは、適応されたオブジェクトを含むアダプタ オブジェクトを作成し、ターゲット インターフェイスを実装することにより、アダプタ パターンを実装します。実際のケースでは、クライアント (MediaPlayer など) はアダプター モードを通じて高度な形式のメディア (VLC など) を再生できますが、クライアント自体は通常のメディア形式 (MP3 など) のみをサポートします。
PHP デザイン パターン: テスト駆動開発の実践
Jun 03, 2024 pm 02:14 PM
TDD は、高品質の PHP コードを作成するために使用されます。その手順には、テスト ケースを作成し、期待される機能を記述し、テスト ケースを失敗させることが含まれます。過度な最適化や詳細な設計を行わずに、テスト ケースのみが通過するようにコードを記述します。テスト ケースが合格したら、コードを最適化およびリファクタリングして、可読性、保守性、およびスケーラビリティを向上させます。
Javaフレームワークのプロキシモードの長所と短所は何ですか?
Jun 03, 2024 am 09:34 AM
プロキシ パターンは、プロキシ オブジェクトを作成することでクライアントとターゲット オブジェクトの間を仲介する Java フレームワークの設計パターンです。その利点には、ターゲット オブジェクトの保護、データの整合性とセキュリティの提供、ターゲットへのアクセスの制御、権限制御とセキュリティ対策の実装、ロギング、キャッシュ、トランザクション管理などの追加機能の追加、テストの簡素化、およびモックとスタブの実行が含まれます。目標。ただし、プロキシ パターンには次のような欠点もあります。 オーバーヘッド: プロキシ オブジェクトの作成と維持によりパフォーマンスが低下する可能性があります。 複雑さ: ターゲットへのアクセスが制限されるため、場合によっては適切ではありません。
Guice フレームワークでのデザイン パターンの適用
Jun 02, 2024 pm 10:49 PM
Guice フレームワークは、次のような多くの設計パターンを適用します。 シングルトン パターン: @Singleton アノテーションによってクラスのインスタンスが 1 つだけであることを保証します。ファクトリ メソッド パターン: @Provides アノテーションを使用してファクトリ メソッドを作成し、依存関係の注入中にオブジェクト インスタンスを取得します。戦略モード: アルゴリズムをさまざまな戦略クラスにカプセル化し、@Named アノテーションを通じて特定の戦略を指定します。
