パターンとは
少し前に最終試験の準備をしていたのですが、とても疲れて記事を更新する時間がありませんでした。今日は JavaScript のデザインパターンについて話します。
まず第一に、知っておく必要があるのは、パターンは再利用可能なソリューションであるのに対し、アンチパターンは特定の問題に対する不適切なソリューションであるということです。
JS アンチパターンの一般的な例
1. 関数の代わりに文字列を setTimeout と setInterval に渡します。これにより、eval() の内部使用がトリガーされます。
2. グローバルコンテキストで多数の変数を定義して、グローバル名前空間を汚染します
3. オブジェクトクラス
のプロトタイプを変更する
4. js をインライン形式で使用します。HTML ファイルに埋め込まれた js コードは、外部単体テスト ツールに含めることはできません。
5. document.write の悪用: ページのロード後に document.write が実行されると、現在のページが書き換えられます。代わりに document.creatElement を使用できる場合は、document.write を使用しないようにしてください。
デザインパターンのカテゴリー
クリエイティブなデザインパターン
クリエイティブなデザイン パターンは、特定の状況に適した方法でオブジェクトを作成するためのオブジェクト作成メカニズムの処理に重点を置いています。このカテゴリに分類されるプロパティは次のとおりです:
コンストラクター、ファクトリー、アブストラクト、プロトタイプ、シングルトン、ビルダー
構造設計パターン
構造パターンはオブジェクトの構成に関するものであり、さまざまなオブジェクト間の関係を確立する簡単な方法を見つけるためによく使用されます。
このカテゴリに分類されるパターンは次のとおりです:
デコレーター、ファサード外観、フライウェイト、アダプターアダプターおよびプロキシエージェント
行動デザインパターン
行動パターンは、システム内の異なるオブジェクト間の通信を改善または簡素化することに焦点を当てています。
行動パターンには次のものが含まれます:
イテレーター、メディエーター、オブザーバー、およびビジター
工場出荷時モード
類似したオブジェクトが複数宣言される問題を解決するには、ファクトリ パターンと呼ばれる方法を使用します。この方法は、オブジェクトをインスタンス化する際の多数の重複の問題を解決します。
<スクリプトタイプ="text/javascript">
Function createObject(name,age,profession){//一元化されたインスタンス化関数
var obj = new Object();
obj.name = 名前;
obj.age = 年齢;
obj.profession = 職業;
obj.move = function () {
' this.profession;
に従事している ' this.age ' で this.name ' を返します
};
return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//最初のインスタンス
var test2 = createObject('mike',25,'engineer');//2 番目のインスタンス
アラート(test1.move());
アラート(test2.move());
ファクトリーパターンの分類
ファクトリ モードは、シンプル ファクトリ、抽象ファクトリ、スマート ファクトリに分かれています。ファクトリ モードでは、コンストラクタを明示的に使用する必要はありません。
単純なファクトリ パターン: クラス (通常はシングルトン) を使用してインスタンスを生成します。
複雑なファクトリ パターン: サブクラスを使用して、メンバー変数がどの特定のクラス インスタンスであるべきかを決定します。
ファクトリーモデルの利点
主な利点は、new キーワードの代わりにエンジニアリング手法を使用することで、オブジェクト間の結合を排除できることです。すべてのインスタンス化コードを 1 か所に集中させることで、コードの重複を防ぎます。
ファクトリーモデルのデメリット
ほとんどのクラスでは、新しいキーワードとコンストラクターを使用するのが最善です。これにより、コードがシンプルになり読みやすくなります。ファクトリーメソッドを調べる必要はありません。
ファクトリ パターンはインスタンス化の繰り返しの問題を解決しますが、どのオブジェクトのインスタンスであるかを把握することができないため、別の問題、つまり識別の問題があります。
alert(typeof test1); //オブジェクト
alert(test1 オブジェクトのインスタンス); //true
ファクトリーパターンをいつ使用するか?
ファクトリー モードは主に次のシナリオで使用されます:
1. オブジェクトまたはコンポーネントが非常に複雑な場合
2. さまざまな環境に応じてオブジェクトのさまざまなインスタンスを簡単に生成する必要がある場合
3. 同じプロパティを共有する多数の小さなオブジェクトまたはコンポーネントを扱う場合
コンストラクター パターン
Constructor (コンストラクター メソッド) は、ECMAScript で特定のオブジェクトを作成するために使用できます。 このモードは、上記のファクトリ モードがオブジェクト インスタンスを識別できないという問題を解決できます。
<スクリプトタイプ="text/javascript">
Function Car(モデル、年式、マイル){//コンストラクター モード
This.model = モデル;
This.year = year;
This.miles = マイル;
This.run = function () {
return this.model " が " this.miles "マイル";
を実行しました
}
}
var Benz = new Car('Benz',2014,20000);
var BMW = new Car("BMW",2013,12000);
alert(BenzinstanceofCar); //Car に属していることを明確に識別します、true
console.log(Benz.run());
console.log(BMW.run());
コンストラクター メソッドを使用すると、インスタンス化の繰り返しの問題が解決されるだけでなく、オブジェクト認識の問題も解決されます。このモードとファクトリー モードの違いは次のとおりです。
1. コンストラクター メソッドはオブジェクトを明示的に作成しません (new Object())。
2. このオブジェクトにプロパティとメソッドを直接割り当てます;
3. 返品明細はありません。
コンストラクター メソッドにはいくつかの仕様があります:
1. 関数名とインスタンス化コンストラクター名は同じで大文字です (追記: 必須ではありませんが、このように記述するとコンストラクターと通常の関数を区別するのに役立ちます)。
2. コンストラクターを通じてオブジェクトを作成するには、new 演算子を使用する必要があります。
オブジェクトはコンストラクターを通じて作成できるため、このオブジェクトはどこから来て、どこで new Object() が実行されるのでしょうか。実行プロセスは次のとおりです:
1. コンストラクターが使用され、newconstructor() が使用されると、new Object() がバックグラウンドで実行されます。
2. コンストラクターのスコープを新しいオブジェクト (つまり、new Object() によって作成されたオブジェクト) に与えます。関数本体内の this は、new Object() によって作成されたオブジェクトを表します。
3. コンストラクター内のコードを実行します
4. 新しいオブジェクトを返します (バックグラウンドで直接返します)。
プロトタイプを持つコンストラクター
jsにはprototypeという属性があります。 js コンストラクターを呼び出してオブジェクトを作成すると、新しいオブジェクトにはコンストラクター プロトタイプのすべてのプロパティが含まれます。このようにして、複数の Car オブジェクトを作成し、同じプロトタイプにアクセスできます。
関数 車(モデル、年、マイル) {
This.model = モデル;
This.year = year;
This.miles = マイル;
}
Car.prototype.run = function () {
return this.model " が " this.miles " マイル " を実行しました;
};
var Benz = new Car('S350',2010,20000);
var Ford = new Car('Ford',2012,12000);
console.log(Benz.run());//「S350 は 20,000 マイルを走行しました」
console.log(Ford.run());
run() の単一インスタンスをすべての Car オブジェクト間で共有できるようになりました。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
