1. プロトタイプモードプロトタイプ パターンは、オブジェクトの作成時にオブジェクト プロトタイプのプロパティとメソッドを共有することで、パフォーマンスを向上させ、メモリ使用量を削減し、コードを再利用するために使用されます。 例1関数 Person(名前) { this.name = 名前; この.config = { a: "1", b: "2", }; this.hello = 関数(){ console.info("こんにちは"); }; } 上記のコードを使用して 100 個のインスタンスを作成する必要がある場合は、 100 個の そのため、共通コードを抽出することでオイルの最適化を行うことができます。 定数設定 = { a: "1", b: "2", }; const hello = 関数() { console.info("こんにちは"); }; 関数 Person(名前) { this.name = 名前; this.config = 設定; this.hello = こんにちは } この方法では、Person オブジェクトがいくつ作成されても、1 つの したがって、プロトタイピングを通じて最適化を行うことができます。 関数 Person() {} var p = new Person(); インスタンスを作成するときのこの関数のプロトタイプ図は次のとおりです。 例2関数 Person(名前) { this.name = 名前; この.config = { a: "1", b: "2", }; this.hello = 関数(){ console.info("こんにちは"); }; } // このメソッドはプロトタイプを書き換え、コンストラクターが失われて Object() になります。 //Person.prototype.xx=yy を使って記述するか、Person.prototype.constructor=Person を再指定することができます。 Person.プロトタイプ = { バージョン: 1.0, 言う: 関数 (arg) { console.info(`${this.name} は ${arg} と言います`); }, コンストラクタ: Person, }; var p1 = 新しい Person("p1"); var p2 = 新しい Person("p2"); console.info(p1.config == p2.config); // 偽 console.info(p1.hello == p2.hello); // 偽 console.info(p1.say === p2.say); //true p1.say("qq"); p2.say("qq"); console.info(p1.version === p2.version); //true コンソール.info(p1.バージョン); インスタンスを作成するときのこの関数のプロトタイプ図は次のとおりです。 例3関数 Person(名前) { this.name = 名前; この.config = { a: "1", b: "2", }; this.hello = 関数(){ console.info("こんにちは"); }; } //このメソッドはプロトタイプを書き換え、コンストラクタが失われて Object() になります Person.プロトタイプ = { バージョン: 1.0, 言う: 関数 (arg) { console.info(`${this.name} は ${arg} と言います`); }, }; 関数 PersonA(名前) { Person.call(これ、名前); } PersonA のプロトタイプ = Person.プロトタイプ; 関数 PersonB(名前) { Person.call(これ、名前); } PersonB のプロトタイプ = Person.プロトタイプ; var pA = new PersonA("pa"); var pB = new PersonB("pb"); console.info(pA.config == pB.config); // 内部プロパティの比較が誤っています console.info(pA.hello == pB.hello); // 内部プロパティの比較が誤っています console.info(pA.say === pB.say); // プロトタイプ メソッドの共有が誤っています pA.say("qq"); pB.say("qq"); console.info(pA.version === pB.version); // 真のプロトタイププロパティの共有 console.info(pA.version); // 1.0 Person.prototype.version = 2.0; //プロトタイプの共有プロパティを変更する console.info(pB.version); //2.0 console.info(新しいPerson().バージョン); //2.0 //プロトタイプ共有メソッドを変更する PersonB.prototype.say = function (arg) { console.info(`v2--- ${this.name} は ${arg} と言います`); }; pB.say("qq"); 新しい Person("Person").say("ww"); 要約:
2. オブザーバーパターン
モジュールとコンポーネント間の通信方法 モジュールとコンポーネント間で直接参照通信が使用される 定数モジュールA = { 言う: 関数 (メッセージ) { console.info("A は " + msg と言います); }, letBrun: 関数() { //モジュールBを直接参照 モジュールBを実行します。 }, }; 定数モジュールB = { 実行: 関数 () { console.info("B 実行 "); }, letAsay: 関数() { // moduleAを直接参照する moduleA.say("hello"); }, }; moduleA.letBrun(); //B 実行 moduleB.letAsay(); //Aが挨拶する 親コンポーネント通信はモジュールとコンポーネント間で使用されます 定数モジュールA = { 言う: 関数 (メッセージ) { console.info("A は " + msg と言います); }, }; 定数モジュールB = { 実行: 関数 () { console.info("B 実行 "); }, }; const 親モジュール = { モジュールA、 モジュールB、 letBrun: 関数() { this.moduleB.run(); }, letAsay: 関数() { this.moduleA.say("hello"); }, }; parentModule.letBrun(); //B 実行 parentModule.letAsay(); //A がこんにちはと言う イベントモジュールが通信を実現 関数エミッター() { イベントを次のように記述します。 this.res_oldアクション = {} this.res_action_events = {} } //リソースをサブスクライブEmitter.prototype.subscribe = function (res, action, fn) { if(!this.res_oldAction[res.name]){ this.res_oldAction[res.name] = res[アクション] res[アクション] = (データ) => { this.res_oldAction[res.name](データ) const fns = this.res_action_events[res.name].action; (i = 0 とします; i < fns.length; i++) { fns[i](データ); } } } if(!this.res_action_events[res.name]){ this.res_action_events[res.name] = {} } if(!this.res_action_events[res.name][action]){ this.res_action_events[res.name][アクション] = [] } this.res_action_events[res.name].action.push(fn) } //購読解除 resourcesEmitter.prototype.unsubscribe = function (res, action, fn) { const fns = this.res_action_events[res.name].action; (i = 0 とします; i < fns.length; i++) { もし(fns[i] === fn) { fns.splice(i, 1); 私 - ; } } } Emitter.prototype.on = 関数 (名前、関数) { if (!this.events[名前]) { this.events[名前] = []; } this.events[名前].push(fn); }; Emitter.prototype.remove = 関数 (名前、関数) { if (!this.events[名前]) { 戻る; } const fns = this.events[名前]; (i = 0 とします; i < fns.length; i++) { もし(fns[i] === fn) { fns.splice(i, 1); 私 - ; } } }; Emitter.prototype.fire = 関数 (名前、データ) { if (!this.events[名前]) { 戻る; } const fns = this.events[名前]; (i = 0 とします; i < fns.length; i++) { fns[i](データ); } }; const エミッター = 新しい Emitter(); //モジュールAにイベントを登録する const methodA = (data) => { console.info("モジュールAが食品メッセージを受信しました:"); console.info(データ); }; エミッターをオン("食べ物", メソッドA); //モジュールBにイベントを登録する const methodB = (data) => { console.info("モジュール B は food メッセージを受信します:"); console.info(データ); }; エミッターをオン("食べ物", メソッドB); //モジュール C でイベントをトリガーする emitting diode.fire("food", "Rice is coming"); //モジュール B からイベントを削除します。emitter.remove("food", methodB); //モジュール C でイベントを再度トリガーします。emitter.fire("food", "Rice is here again"); 実行結果は次のとおりです。
要約:
これで、Javascript デザイン パターンのプロトタイプ パターンに関する詳細な記事は終了です。Javascript プロトタイプ パターンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Navicat Premium が MySQL 8.0 に接続してエラー「1251」を報告する問題を解決する方法の分析
HTTP圧縮とは場合によっては、比較的大きなメッセージ データがクライアントとサーバー間で送信され、...
この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...
構造関連タグ--------------------------------------------...
今日は何もすることがなかったので、いくつかのツール(オンラインとクライアント)、よく使用する URL...
目次双方向バインディングの原理ngモデルレンダリングカスタム双方向バインディングプロパティコンポーネ...
序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...
いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...
目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...
目次1. proxy_pass を設定した後に Nginx が 404 を返す問題のトラブルシューテ...
目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...
ファイルシステムとは何かInnoDB や MyIASM などのストレージ エンジンはテーブルをディス...
序文以前、MySQL 5.6 をインストールしました。3 か月後、開発者から MySQL で JSO...
この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...
MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...
div 要素は、HTML ドキュメント内のブロックレベル コンテンツの構造と背景を提供するために使用...