パターンとは何ですか
私はしばらく前に最終試験の準備をしていましたが、それは骨の折れる人であり、私は本当に忙しかったです。記事を更新する時間がありませんでした。今日は、JavaScriptのデザインパターンについてお話します。
まず第一に、私たちが知っておく必要があるのは、パターンが再利用可能な解決策であることですが、アンチパターンは特定の問題の悪い解決策です。
JSのアンチパターンの一般的な例
1. settimeoutとsetIntervalに文字列を渡します。これは、eval()の内部使用をトリガーする関数ではありません。
2。グローバルな名前空間を汚染するために、グローバルコンテキストで多数の変数を定義します
3.オブジェクトクラスのプロトタイプを変更します
4. JSインラインを使用し、HTMLファイルに埋め込まれたJSコードを外部単位テストツールに含めることはできません。
5。document.writeを乱用します。 document.writeを実行すると、ページが読み込まれた後に書かれている場合、document.createlementを使用できる場合は、document.writeを使用しないようにしてください。
デザインパターンのカテゴリ
デザインパターンの作成
創造的なデザインパターンは、オブジェクトの作成メカニズムの処理に焦点を当てて、特定の状況に合った方法でオブジェクトを作成します。このカテゴリに分類される属性は次のとおりです。
コンストラクターコンストラクター、工場工場、抽象抽象化、プロトタイププロトタイプ、シングルトンシングルトン、ビルダージェネレーター
構造設計パターン
構造パターンはオブジェクトの組み合わせに関連しており、多くの場合、異なるオブジェクト間の関係を確立する簡単な方法を見つけるために使用できます。
このカテゴリに分類されるパターンは次のとおりです。
デコレーターデコレータ、ファサードの外観、フライウェイト百科事典、アダプターアダプター、プロキシプロキシ
動作デザインパターン
行動パターンは、システム内の異なるオブジェクト間の通信の改善または簡素化に焦点を当てています。
行動パターンには以下が含まれます。
Iterator Iterator、メディエーターメディエーター、オブザーバーオブザーバー、訪問者の訪問者
工場モード
複数の類似のオブジェクト宣言の問題を解決するために、工場パターンと呼ばれる方法を使用できます。これは、多くの重複を伴うオブジェクトをインスタンス化する問題を解決することです。
コードコピーは次のとおりです。
<script type = "text/javascript">
関数CreateObject(名前、年齢、職業){// Central Instantiated関数{//
var obj = new object();
obj.name = name;
obj.age = age;
obj.profession = profession;
obj.move = function(){
return this.name + 'at' + this.age + 'Engaged in' + this.profession;
};
OBJを返します。
}
var test1 = createObject( 'trigkit4'、22、 'programmer'); //最初のインスタンス
var test2 = create object( 'mike'、25、 'einginer'); // 2番目のインスタンス
alert(test1.move());
alert(test2.move());
</script>
工場モデルのカテゴリ
工場のパターンは、単純な工場、抽象工場、スマート工場に分けられています。工場のパターンでは、コンストラクターを表示せずに使用する必要があります。
単純な工場パターン:クラス(通常はモノマー)を使用してインスタンスを生成します。
複雑な工場パターン:サブクラスを使用して、メンバー変数が必要な特定のクラスインスタンスを決定します。
工場モデルの利点
主な利点は、新しいキーワードの代わりにエンジニアリング方法を使用することにより、オブジェクト間の結合を排除できることです。コードの複製を防ぐために、すべてのインスタンス化されたコードを1つの場所に集中します。
工場モデルの短所
ほとんどのクラスは、新しいキーワードとコンストラクターで使用するのが最適です。これにより、コードが読みやすくなります。工場の方法を確認する代わりに知る代わりに。
工場のパターンは繰り返しインスタンス化の問題を解決しますが、別の問題があります。つまり、問題を識別します。これは、オブジェクトのどのインスタンスを把握することが不可能であるためです。
コードコピーは次のとおりです。
アラート(typeof test1); //物体
alert(test1 instanceof object); //真実
工場モードをいつ使用するのですか?
ファクトリーモードは、主に次のシナリオで使用されます。
1.オブジェクトまたはコンポーネントが高い複雑さを伴う場合
2。オブジェクトが配置されているさまざまな環境に応じて、オブジェクトの異なるインスタンスを簡単に生成する必要がある場合
3.同じ属性を共有する多くの小さなオブジェクトまたはコンポーネントを扱うとき
コンストラクターモード
ECMAScriptでは、コンストラクター(コンストラクター)を使用して特定のオブジェクトを作成できます。このモードは、上記の工場モードでオブジェクトインスタンスを認識できないという問題を解決できます。
コードコピーは次のとおりです。
<script type = "text/javascript">
ファンクションカー(モデル、年、マイル){//コンストラクターモード
this.model = model;
this.year = year;
this.miles = miles;
this.run = function(){
this.model + "reas" + this.miles + "miles"を返します。
}
}
Var Benz = New Car( 'Benz'、2014,20000);
var bmw = new car( "bmw"、2013,12000);
アラート(車のbenz instance); //私はそれを車に従属するものとして明確に識別します、本当です
console.log(benz.run());
console.log(bmw.run());
</script>
コンストラクターメソッドを使用すると、繰り返しインスタンス化の問題とオブジェクト認識の問題が解決します。このパターンと工場パターンの違いは次のとおりです。
1。コンストラクターメソッドによって表示されないオブジェクト(新しいオブジェクト())を作成します。
2。このオブジェクトに属性とメソッドを直接割り当てます。
3.戻り声明はありません。
コンストラクターの方法にはいくつかの仕様があります。
1.関数名とインスタンス化されたコンストラクターは同じで大文字です(PS:必須ではありませんが、これを書くのに役立ち、コンストラクターと通常の機能を区別します)。
2。コンストラクターを介してオブジェクトを作成するには、新しいオペレーターを使用する必要があります。
オブジェクトはコンストラクターを介して作成できるため、このオブジェクトはどこから来て、新しいオブジェクト()はどこから実行されましたか?実行プロセスは次のとおりです。
1.コンストラクターが使用され、新しいコンストラクター()が使用されると、新しいオブジェクト()がバックグラウンドで実行されます。
2。コンストラクターを新しいオブジェクト(つまり、newオブジェクト()によって作成されたオブジェクト)にスコープし、これは関数本文で新しいオブジェクト()によって生成されたオブジェクトを表します。
3。コンストラクター内のコードを実行します。
4。新しいオブジェクトを返します(バックグラウンドで直接返します)。
プロトタイプ付きコンストラクター(コンストラクター)
JSにはプロトタイプと呼ばれるプロパティがあります。 JSコンストラクターを呼び出してオブジェクトを作成した後、新しいオブジェクトにはコンストラクタープロトタイプのすべてのプロパティがあります。このようにして、複数の車のオブジェクトを作成し、同じプロトタイプにアクセスできます。
コードコピーは次のとおりです。
<script type = "text/javascript">
ファンクションカー(モデル、年、マイル){
this.model = model;
this.year = year;
this.miles = miles;
}
car.prototype.run = function(){
this.model + "reas" + this.miles + "miles"を返します。
};
Var Benz = New Car( 'S350'、2010,20000);
var ford = New Car( 'Ford'、2012,12000);
console.log(benz.run()); // "S350は20000マイルを実行しました"
console.log(ford.run());
</script>
これで、run()の単一のインスタンスをすべての自動車オブジェクト間で共有できます。