ホームページ > 記事 > ウェブフロントエンド > JavaScript デザイン パターンに関する簡単な説明 推奨_JavaScript スキル
JavaScript デザイン パターンに関する簡単な説明 推奨_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 18:43:17994ブラウズ
以前、「JavaScript デザイン パターン」を皆さんと共有したいと述べたのを覚えていますが、まだ書いていない理由は、最近仕事と旅行で忙しくて怠けているからではありません。 （ああ？） やっと時間ができたので、空いた話を続けましょう。
デザイン パターンについて議論する前に、スクリプト プログラミングについてある程度の基礎をすでに持っていることを確認してください。スクリプト プログラミングについてあまり詳しくない場合は、私が昔書いたこの記事を参照することをお勧めします。 JavaScript オブジェクト指向プログラミングについての簡単な話」。次の記事をお読みください。
デザイン パターンに関しては、まず「インターフェイス デザイン」に焦点を当てる必要があります。インターフェイス デザインはデザイン パターンにおいて、パターンそのものよりも重要な意味を持つからです。直観のために、最初にインターフェイス定義の形式を紹介します。
コードをコピーします コードは次のとおりです。 🎜>
varinterface = new Interface("interface",[["getName",1],["getAge",1]]);
が見えます。インターフェイス関数には 2 つのパラメーター (2 次元配列で定義されたインターフェイス メソッド) が含まれている必要があります。上記の例では、getName と getAge という 2 つのインターフェイス メソッドが定義されています。どちらのメソッドもパラメーターを受け取ります。インターフェイスについての理解を深めるために、インターフェイス関数の実装コードを詳しく見てみましょう。 コードをコピーします コードは次のとおりです。
function Interface(name,methods){
if (arguments.length !=2){
console.log("パラメータは 2 つである必要があります");
this.name = name;
this.methods = [] ;
if(methods.lengthconsole.log("2 番目のパラメータは空の配列にすることはできません");
}
for(var i=0;len=methods. length,iif(typeofmethods[i][0] !== 'string'){
console.log("最初のパラメータのデータ型は string である必要があります"); 🎜 >}
if(methods[i][1] && typeofmessages[i][1] !== 'number'){
console.log("2 番目のパラメータのデータ型は整数である必要があります" );
}
if(methods[i].length == 1){
methods[i][1] = 0;
}
this.methods.push(methods) [ i]);
}
}
インターフェイス関数の定義規則をコードから理解するのは難しくありません。 [1] インターフェイス関数には 2 つのパラメーターのみを含めることができます。 、最初のパラメータはインターフェイス名、2 番目のパラメータは 2 次元配列です [2] 2 番目のパラメータは空の配列にすることはできません [3] メソッド パラメータの最初のパラメータは文字列型でなければなりません。メソッド名、2番目のパラメータを定義します。パラメータは整数型であり、メソッドのパラメータ数を定義するために使用されます。 [4] メソッド内のメソッドのパラメータの数が0の場合、省略できます。
次に、クラスを構築して、前に定義したインターフェイスを継承させる必要があります。心配しないでください。次のコードを参照してください。
if (arguments.length !=2){
console.log("パラメータは 2 つである必要があります");
this.name = name;
this.methods = [] ;
if(methods.lengthconsole.log("2 番目のパラメータは空の配列にすることはできません");
}
for(var i=0;len=methods. length,i
console.log("最初のパラメータのデータ型は string である必要があります"); 🎜 >}
if(methods[i][1] && typeofmessages[i][1] !== 'number'){
console.log("2 番目のパラメータのデータ型は整数である必要があります" );
}
if(methods[i].length == 1){
methods[i][1] = 0;
}
this.methods.push(methods) [ i]);
}
}
インターフェイス関数の定義規則をコードから理解するのは難しくありません。 [1] インターフェイス関数には 2 つのパラメーターのみを含めることができます。 、最初のパラメータはインターフェイス名、2 番目のパラメータは 2 次元配列です [2] 2 番目のパラメータは空の配列にすることはできません [3] メソッド パラメータの最初のパラメータは文字列型でなければなりません。メソッド名、2番目のパラメータを定義します。パラメータは整数型であり、メソッドのパラメータ数を定義するために使用されます。 [4] メソッド内のメソッドのパラメータの数が0の場合、省略できます。
次に、クラスを構築して、前に定義したインターフェイスを継承させる必要があります。心配しないでください。次のコードを参照してください。
コードをコピーします コードは次のとおりです: var ioldfish = function(name,age){
this。名前 = 名前; this.age = 年齢;
Interface.regImplement(this,interface);
ioldfish.prototype.getName = function(){
alert(this.name) );
};
ioldfish.prototype.getAge = function(){
alert(this.age);
var Fishwl("老鱼",27) );
fishwl.getName();
Interface.regImplement は、インターフェースの仕様に従って ioldfish クラスのコードを作成することです。 Firebug コンソールで例外がスローされます。
このメソッドの具体的な実装コードを見てください:
Interface.regImplement(this,interface);
ioldfish.prototype.getName = function(){
alert(this.name) );
};
ioldfish.prototype.getAge = function(){
alert(this.age);
var Fishwl("老鱼",27) );
fishwl.getName();
Interface.regImplement は、インターフェースの仕様に従って ioldfish クラスのコードを作成することです。 Firebug コンソールで例外がスローされます。
このメソッドの具体的な実装コードを見てください:
コードをコピーします
コードは次のとおりです: Interface.regImplement = function(object){ if(arguments.length<2){ console.log("インターフェイス継承パラメータは 2 未満にすることはできません"); 🎜>for(var i=1;len = argument.length,ivar インターフェース = argument[i];
if(interface.constructor !== インターフェース){
console.log(" 3 番目のパラメータはインターフェイス インスタンスで始まる必要があります");
}
for(var j=0;len=interface.methods.length,jvarメソッド = インターフェイス.メソッド [j][0];
if(!オブジェクト[メソッド] || オブジェクトの種類[メソッド] !=="関数" || オブジェクト[メソッド].getParameters().length !== Interface.methods[j ][1]){
console.log("" メソッド "メソッド インターフェイスが一致しません");
}
}
}
}
このコードを解釈すると、次のことが簡単にわかります。 [1] Interface.regImplement 継承インターフェイス関数のパラメーターには、少なくとも 2 つのパラメーターが必要です。3 番目のパラメーターがある場合、そのパラメーターは Interface インターフェイスのインスタンスである必要があります。 [2] インターフェイスのメソッドをたどって、新しいクラスのメソッドと 1 つずつ照合します。インターフェイスの仕様を継承するクラスにメソッドが欠落していることが判明した場合は、エラー メッセージがスローされます。 [3] インターフェイスもパラメータの数と一致します。インターフェイス メソッドのパラメータの数が新しいクラスのメソッドの数と一致しない場合、エラー メッセージがスローされます。
メソッド内のパラメータの数を一致させるために、ここでは getParameters() メソッドを使用します。コードは次のように実装されます。 >
コードをコピーします
コードをコピー
コードは次のとおりです:
コードは次のとおりです。
コードは次のとおりです:
console.log(" 3 番目のパラメータはインターフェイス インスタンスで始まる必要があります");
}
for(var j=0;len=interface.methods.length,j
if(!オブジェクト[メソッド] || オブジェクトの種類[メソッド] !=="関数" || オブジェクト[メソッド].getParameters().length !== Interface.methods[j ][1]){
console.log("" メソッド "メソッド インターフェイスが一致しません");
}
}
}
}
このコードを解釈すると、次のことが簡単にわかります。 [1] Interface.regImplement 継承インターフェイス関数のパラメーターには、少なくとも 2 つのパラメーターが必要です。3 番目のパラメーターがある場合、そのパラメーターは Interface インターフェイスのインスタンスである必要があります。 [2] インターフェイスのメソッドをたどって、新しいクラスのメソッドと 1 つずつ照合します。インターフェイスの仕様を継承するクラスにメソッドが欠落していることが判明した場合は、エラー メッセージがスローされます。 [3] インターフェイスもパラメータの数と一致します。インターフェイス メソッドのパラメータの数が新しいクラスのメソッドの数と一致しない場合、エラー メッセージがスローされます。
メソッド内のパラメータの数を一致させるために、ここでは getParameters() メソッドを使用します。コードは次のように実装されます。 >
コードをコピーします
コードは次のとおりです: Function.prototype.getParameters = function(){ var str = this.toString( );
var paramStr = str.slice (str.indexOf("(") 1,str.indexOf(")")).replace(/s*/g,''); 🎜>return (paramStr.length ==0 ? [] : paramStr.split(",")); }
catch(err){
console.log("不正な関数"); 🎜>}
}
次に、Interface 関数、Interface.regImplement 関数、および Function.prototype.getParameters 関数をinterface.js ファイルに統合して、新しく作成した ioldfish クラスをデバッグできます。 。 getAge メソッドがクラスにない場合に何が起こるかわかりますか?初心者の方は、さまざまなシチュエーションをシミュレーションして理解を深めていくことをおすすめします！インターフェイスのデザインを完全に理解していると確信できる場合は、さらに私の説明に従ってください。
JavaScript デザイン パターン シングルトン モード
シングル モード シングルトン: 厳密に言えば、これはパターンがまったくありませんが、Alipay の多くのコンポーネントが使いやすく設計されています。シングルトンパターンを介して。実際、このパターンは「JavaScript オブジェクト指向プログラミングに関する簡単な説明」でプロトタイプの継承を説明するときにすでに使用されています。ここでは、すべてのユーザーにとって必要なわけではなく、必要なだけです。特定の状況では、使用されるコンポーネントには非常に優れた最適化効果があり、ユーザーがトリガーするまでコンポーネントのインスタンス化を延期できます。
catch(err){
console.log("不正な関数"); 🎜>}
}
次に、Interface 関数、Interface.regImplement 関数、および Function.prototype.getParameters 関数をinterface.js ファイルに統合して、新しく作成した ioldfish クラスをデバッグできます。 。 getAge メソッドがクラスにない場合に何が起こるかわかりますか?初心者の方は、さまざまなシチュエーションをシミュレーションして理解を深めていくことをおすすめします！インターフェイスのデザインを完全に理解していると確信できる場合は、さらに私の説明に従ってください。
JavaScript デザイン パターン シングルトン モード
シングル モード シングルトン: 厳密に言えば、これはパターンがまったくありませんが、Alipay の多くのコンポーネントが使いやすく設計されています。シングルトンパターンを介して。実際、このパターンは「JavaScript オブジェクト指向プログラミングに関する簡単な説明」でプロトタイプの継承を説明するときにすでに使用されています。ここでは、すべてのユーザーにとって必要なわけではなく、必要なだけです。特定の状況では、使用されるコンポーネントには非常に優れた最適化効果があり、ユーザーがトリガーするまでコンポーネントのインスタンス化を延期できます。
コードをコピー
コードは次のとおりです:
var ioldfish = { name: '老鱼', 年齢: 27, getName:function(){ alert(name)
}, getAge:function(){
alert(age); ;
}
}
上記の例は最も単純な単一モードであり、すべてのデータを ioldfish オブジェクト リテラルに統合してモジュールを形成し、同時に名前空間ロールとして機能します。 。
コードをコピー
alert(age); ;
}
}
上記の例は最も単純な単一モードであり、すべてのデータを ioldfish オブジェクト リテラルに統合してモジュールを形成し、同時に名前空間ロールとして機能します。 。
コードをコピー
コードは次のとおりです。
var ioldfish =(function(){ var name = '老鱼'; var age = 27; return{ getName:function(){
alert(name); getAge: function() {
alert(age);
}
}
})();
最初の単一ボディに簡単な変更を加え、クロージャを使用します。 name を変更すると、 age は静的なプライベート変数になり、インスタンス化されたときにメモリ内に常にコピーが 1 つだけ存在することが保証されます。これはシングル モードの定義により一致します。
以下は遅延モノマーに焦点を当てています。これ以上の手間は省き、遅延モノマーを実装する方法を見てみましょう:
コードをコピー
alert(age);
}
}
})();
最初の単一ボディに簡単な変更を加え、クロージャを使用します。 name を変更すると、 age は静的なプライベート変数になり、インスタンス化されたときにメモリ内に常にコピーが 1 つだけ存在することが保証されます。これはシングル モードの定義により一致します。
以下は遅延モノマーに焦点を当てています。これ以上の手間は省き、遅延モノマーを実装する方法を見てみましょう:
コードをコピー
コードは次のとおりです:
var ioldfish = (function(){ var uniqueInstance; var name = '老鱼'; var age = 27; 関数コンストラクター(){ リターン{
getName:function(){ アラート(名前);
getAge:function(){
アラート(年齢);
}
}
}
return{
isInstance:function(){
if(uniqueInstance == null){
uniqueInstance =constructor();
}
return uniqueInstance;
}
})();
ioldfish.isInstance().getName();
上記の構造は明らかにパブリックかつプライベートです。プライベート変数 uniqueInstance (クラスがインスタンス化されているかどうかを識別します) とプライベート メソッド コンストラクターはパブリック メソッド isInstance (プライベート メソッド コンストラクターで定義されたメソッドを呼び出すことができます) を返します。 ioldfish .isInstance().getName(); まず isInstance() メソッドを通じてインスタンス化されているかどうかを確認し、次に getName() メソッドを通じてクロージャ内のプライベート変数名を取得します。このモードにはまだ多くのアプリケーション シナリオがありますが、すべてのユーザーがそれを使用できるわけではなく、ページに読み込む必要がある大きなカレンダー コントロールに遭遇したことはありませんか?それは...
JavaScript デザイン パターン ファクトリ モード ファクトリ
ファクトリ モード ファクトリ: 最初に抽象クラスを作成し、次にこの抽象クラスに基づいてサブクラスを派生し、サブクラス内にインスタンス化を延期するファクトリ メソッドを作成します。正直に言うと、JavaScript でのファクトリ パターンの適用は少し突飛です。結局のところ、JavaScript には Java のようなハードコーディングによる困難はありません。パターンがあるからパターンを避ける。
極端な例として、タブ切り替えやドロップダウン リストなどのコンポーネントに位置決め、フェーディング、遅延、その他の効果を追加します。まず、これらのコンポーネントのインターフェイスを定義します。
var Iwidget = new Interface("iwidget. ",[["addEffect"]]);
後続の派生サブクラスがそれを継承できるように、このインターフェイスを定義します。インターフェイスは addEffect メソッドを定義します。インターフェイス メソッドが実装された後、呼び出し元の学生は次のことに注意を払う必要はありません。各サブクラスの addEffect メソッドのコード実装。
var Widget = function(){};
Widget.prototype={
fire:function(model){
var widget = this.createWidget(model);
//一部の生徒は、サブクラスがインターフェイス メソッドを定義する必要がある理由を尋ねました。
widget.addEffect();
return widget;
show:function(){
//コード実装を表示
},
hide: function( ){
//コード固有の実装を隠す
},
createWidget:function(model){
alert('抽象クラス、インスタンス化できません')
}
} ;
上記の例では、まず、派生サブクラスの親クラスとして抽象クラス Widget を定義します。どちらのタイプのコンポーネントにもコンテナーの表示と非表示が含まれることを考慮すると、これは親クラスで事前定義されています。サブクラス継承のメソッドを表示および非表示にします。
var xTabPosition = function(){};
xTabPosition.prototype ={
getAge:function(){
アラート(年齢);
}
}
}
return{
isInstance:function(){
if(uniqueInstance == null){
uniqueInstance =constructor();
}
return uniqueInstance;
}
})();
ioldfish.isInstance().getName();
上記の構造は明らかにパブリックかつプライベートです。プライベート変数 uniqueInstance (クラスがインスタンス化されているかどうかを識別します) とプライベート メソッド コンストラクターはパブリック メソッド isInstance (プライベート メソッド コンストラクターで定義されたメソッドを呼び出すことができます) を返します。 ioldfish .isInstance().getName(); まず isInstance() メソッドを通じてインスタンス化されているかどうかを確認し、次に getName() メソッドを通じてクロージャ内のプライベート変数名を取得します。このモードにはまだ多くのアプリケーション シナリオがありますが、すべてのユーザーがそれを使用できるわけではなく、ページに読み込む必要がある大きなカレンダー コントロールに遭遇したことはありませんか?それは...
JavaScript デザイン パターン ファクトリ モード ファクトリ
ファクトリ モード ファクトリ: 最初に抽象クラスを作成し、次にこの抽象クラスに基づいてサブクラスを派生し、サブクラス内にインスタンス化を延期するファクトリ メソッドを作成します。正直に言うと、JavaScript でのファクトリ パターンの適用は少し突飛です。結局のところ、JavaScript には Java のようなハードコーディングによる困難はありません。パターンがあるからパターンを避ける。
極端な例として、タブ切り替えやドロップダウン リストなどのコンポーネントに位置決め、フェーディング、遅延、その他の効果を追加します。まず、これらのコンポーネントのインターフェイスを定義します。
var Iwidget = new Interface("iwidget. ",[["addEffect"]]);
後続の派生サブクラスがそれを継承できるように、このインターフェイスを定義します。インターフェイスは addEffect メソッドを定義します。インターフェイス メソッドが実装された後、呼び出し元の学生は次のことに注意を払う必要はありません。各サブクラスの addEffect メソッドのコード実装。
コードをコピー コードは次のとおりです。
var Widget = function(){};
Widget.prototype={
fire:function(model){
var widget = this.createWidget(model);
//一部の生徒は、サブクラスがインターフェイス メソッドを定義する必要がある理由を尋ねました。
widget.addEffect();
return widget;
show:function(){
//コード実装を表示
},
hide: function( ){
//コード固有の実装を隠す
},
createWidget:function(model){
alert('抽象クラス、インスタンス化できません')
}
} ;
コードをコピー コードは次のとおりです。
var xTab = function(){};
extend(xTab,Widget);
xTab.prototype.createWidget = function(model){
var ウィジェット;
case 'position':
ウィジェット= 新しい xTabPosition ();
ケース 'anim':
ウィジェット = 新しい xTabAnim();
ケース '遅延':
ウィジェット = new xTabDelay();
}
};
extend(dropDown,Widget) = function(model) ){
var ウィジェット;
switch(model){
case 'position':
widget = newdropDownPosition();
case 'anim':
ウィジェット = 新しいドロップダウンアニメーション ();
ブレイク;
デフォルト:
ウィジェット = 新しいドロップダウン遅延 ()
サブクラス xTab と DropDown は、親クラスを継承し、createWidget メソッドを書き換えます。これらのインスタンスを作成するクラスがインターフェイスで合意された addEffect メソッドを実装している限り、異なるサブクラスは、配置、フェーディング、および遅延効果に応じて異なるインスタンスを作成します。 , メソッドコードの実装方法に関してはどれも同じなので、お好みに合わせて調整してください。
コードをコピー
コードは次のとおりです。
extend(xTab,Widget);
xTab.prototype.createWidget = function(model){
var ウィジェット;
case 'position':
ウィジェット= 新しい xTabPosition ();
ケース 'anim':
ウィジェット = 新しい xTabAnim();
ケース '遅延':
ウィジェット = new xTabDelay();
}
};
extend(dropDown,Widget) = function(model) ){
var ウィジェット;
switch(model){
case 'position':
widget = newdropDownPosition();
case 'anim':
ウィジェット = 新しいドロップダウンアニメーション ();
ブレイク;
デフォルト:
ウィジェット = 新しいドロップダウン遅延 ()
サブクラス xTab と DropDown は、親クラスを継承し、createWidget メソッドを書き換えます。これらのインスタンスを作成するクラスがインターフェイスで合意された addEffect メソッドを実装している限り、異なるサブクラスは、配置、フェーディング、および遅延効果に応じて異なるインスタンスを作成します。 , メソッドコードの実装方法に関してはどれも同じなので、お好みに合わせて調整してください。
コードをコピー
コードは次のとおりです。
var xTabPosition = function(){};
xTabPosition.prototype ={
addEffect:function(){ //特定の実装コード} }; var dropDownPosition = function(){}; .prototype = { addEffect:function(){ //特定の実装コード
} }; ');
同様に、これらのエフェクトをバブル コンポーネントに追加する必要がある場合は、同じパターンに従うだけで、この設計パターンによりクラス間の結合が大幅に軽減され、さまざまな補助アクションを実装できることがわかります。特定の対話要件に従っていますが、コード実装の複雑さも必然的に増加します。結局のところ、このモードは Java とは異なり、クラス名をハードコーディングすることが目的ではありません。彼のデザインのアイデアを学んでください。したがって、上記の例は参考用です。大人がそばにいない限り、お子様は真似しないでください。
JavaScript 愛好家にとって、より価値のあるものは、ファクトリ パターンで言及されている「キャッシュ (メモ化) メカニズム」であるはずです。この本では、この機能を説明するために XHR オブジェクトを作成する例が示されていますが、その効果は明らかに十分ではありません。明らかに...
メモ化名詞の説明: 関数の各実行の結果をキーと値のペアに入れます (状況に応じて配列も使用できます)。後続の実行では、キーが値であるかどうかを確認します。値のペアがすでに存在する場合は、その値が返されます。存在しない場合は、関数本体の評価部分が実際に実行されます。明らかに、特にキーと値のペアでの値の検索は、関数の実行よりもはるかに高速です。
メモ化の威力は、再帰呼び出し中により効果的に発揮されます。以下は古典的なフィボナッチ数列です。 fib(20) は fib メソッドを 21891 回実行します。これが fib(40) の場合、これは 331160281 回実行されます。
function fib(n) {
if (n < 2) {
return n;
return fib(n - 1) fib(n - 2)
見てみましょう再度使用する方法 メモ化を実装するには:
。
コードをコピー
コードは次のとおりです:
var CardMain = function(id){
this.cards = [];
this.element = document.createElement("div");
this.element.id = id;
Interface.regImplement(this,IcardItem);
};
cardMain.prototype = {
add:function(card){
this.cards.push(card);
this.element.appendChild(card.getElement());
},
remove:function(card){
for(i=0;len=this.cards.length,iif(cards[i] == Card){
this.cards.splice(i,1);
休憩;
}
this.element.removeChild(card.getElement());
}
},
getChild:function(i){
return this.cards[i];
},
getElement:function(){
return this.element;
},
showBank:function(){
this.element.style.display ="ブロック";
for(i=0;len=this.cards.length,ithis.cards[i].showBank();
}
},
hideBank:function(){
this.element.style.display ="none";
for(i=0;len=this.cards.length,ithis.cards[i].hideBank();
}
}
};
その後、义叶子对オブジェクト类bankLogo を创建银行ロゴ、这里银行ロゴ都以带クラスのa标签标识:
varbankLogo = function(bankClassName){
this.element = document.createElement("a");
this.element.className = 銀行クラス名;
Interface.regImplement(this,IcardItem);
};
bankLogo.prototype ={
showBank:function(){
this.element.style.display ="block";
},
hideBank:function(){
this.element.style.display ="none";
},
getElement:function(){
return this.element;
}
};
最後に 1 つの本体オブジェクトを設定し、操作実行の関連情報を 1 つのモデムを形成します。方便调用:
var BankAction ={
bankList:[],
addBank:function(card){
this.bankList.push(card) ;
},
innerBank:function(conId){
for(i=0;len=this.bankList.length,ivar CardObj =this.bankList[i ].getElement();
}
document.getElementById(conId).appendChild(cardObj);
}
};
が完了し、すべてのパッケージを含む最外層コンテナを生成する例を示します。その後、パッケージの種類に基づいて、放置行パッケージとスルーパッケージのコンテナをそれぞれ生成し、最後に各パッケージを生成します。例、并按层级关系形成 DOM 構造：
varbankDivT = new cardMain("PayCard");//创建最外层容器
var ebankCard = new cardMain("ebankCard");//创建网银类银行卡容器
var ktCard = new cardMain("ktCard" );//创建招行银行卡容器
var ccbBank = new BankLogo('Ebank-CMB');//创建招行银行卡
var abcBank = new BankLogo('Ebank-ABC');//创建卡通农行卡
var abcKtBank = new BankLogo('Kt-ABC');//创建卡通农行卡
ebankCard.add(ccbBank);
ebankCard.add(abcBank);
ktCard.add(abcKtBank);
bankDivT.add(ebankCard);
bankDivT.add(ktCard);
BankAction.addBank(bankDivT);
BankAction.innerBank("bankList");
自動生成の银列表、DOM 構造の例:
組み合わせモード アプリケーションは、ユーザー インターフェイスを動的に生成する場合に非常に適した選択肢であり、まとまりのあるコードを大幅に簡素化し、保守性を向上させることができます。ただし、リーフ オブジェクトが多数ある場合、再帰には依然としてパフォーマンスの問題が発生するため、使用には注意が必要です。
JavaScript デザイン パターンのデコレータ パターン
デコレータ パターン: 新しいサブクラスを作成せずに、オブジェクトの新しい関数を作成できます。例: Alipay チェックアウト赤い封筒と残高支払いを組み合わせたアプリケーション シナリオ。
var Ieconomics = new Interface("ieconomics",[["getPrice"]]);
まずコンポーネントクラスを作成し、コンポーネントに基づいてインスタンス化されたオブジェクトがパラメータとしてデコレータクラスに渡されます。これにより、デコレータはコンポーネント内のさまざまなメソッドを呼び出すことができます。
varconomic = function(){
Interface.regImplement(this,Ieconomics);
economic.prototype={
//コード実装
}; >
次に、派生デコレーター オプション クラスの親クラスとしてデコレーター抽象クラスを作成します。
コードをコピー 最後に、上記に基づいて抽象クラス、派生 デコレータ オプション クラスを作成します:
コードをコピー
コードは次のとおりです:
//赤い封筒の装飾またはオプションクラスvar Coupon = function(economic){
//抽象クラスで装飾されたコンストラクターを呼び出します
economicsDecorator.call(this,economic)
extend(voucher,couponDecorator){
getPrice :function(){
return this.getPrice() - this.getVoucher();
同様に、これらのエフェクトをバブル コンポーネントに追加する必要がある場合は、同じパターンに従うだけで、この設計パターンによりクラス間の結合が大幅に軽減され、さまざまな補助アクションを実装できることがわかります。特定の対話要件に従っていますが、コード実装の複雑さも必然的に増加します。結局のところ、このモードは Java とは異なり、クラス名をハードコーディングすることが目的ではありません。彼のデザインのアイデアを学んでください。したがって、上記の例は参考用です。大人がそばにいない限り、お子様は真似しないでください。
JavaScript 愛好家にとって、より価値のあるものは、ファクトリ パターンで言及されている「キャッシュ (メモ化) メカニズム」であるはずです。この本では、この機能を説明するために XHR オブジェクトを作成する例が示されていますが、その効果は明らかに十分ではありません。明らかに...
メモ化名詞の説明: 関数の各実行の結果をキーと値のペアに入れます (状況に応じて配列も使用できます)。後続の実行では、キーが値であるかどうかを確認します。値のペアがすでに存在する場合は、その値が返されます。存在しない場合は、関数本体の評価部分が実際に実行されます。明らかに、特にキーと値のペアでの値の検索は、関数の実行よりもはるかに高速です。
メモ化の威力は、再帰呼び出し中により効果的に発揮されます。以下は古典的なフィボナッチ数列です。 fib(20) は fib メソッドを 21891 回実行します。これが fib(40) の場合、これは 331160281 回実行されます。
コードをコピー コードは次のとおりです。
function fib(n) {
if (n < 2) {
return n;
return fib(n - 1) fib(n - 2)
見てみましょう再度使用する方法 メモ化を実装するには:
コードをコピー コードは次のとおりです:
var iterMemoFib = (function() { var queue = [1, 1];
var fib = function(n) {
if (n >=cache.length) {
//再帰を
for (var i =cache.length; i <= n; i ) {
cache[i] =cache[i - 2] cache[i - 1]; に変換します。 }
}
return queue[n-1];
}
return fib;
})();
memoize を使用して関数プロトタイプを拡張しますもちろん、頻繁に実行されない一部の関数については、キャッシュする必要がないため、このメソッドを使用する必要があります。
var fib = function(n) {
if (n >=cache.length) {
//再帰を
for (var i =cache.length; i <= n; i ) {
cache[i] =cache[i - 2] cache[i - 1]; に変換します。 }
}
return queue[n-1];
}
return fib;
})();
memoize を使用して関数プロトタイプを拡張しますもちろん、頻繁に実行されない一部の関数については、キャッシュする必要がないため、このメソッドを使用する必要があります。
。
コードをコピー コードは次のとおりです: Function.prototype.memoize = function() {
var Pad = {} ; var self = this;
var obj = argument .length > 0 ? argument[i] : null;
var memoizedFn = function() {
// パラメータを配列として保存します
var args = [];
for (var i = 0; i < argument.length; i ) {
args[i] = 引数[i];
if (!(パッドの引数)) {
パッド[引数] = self.apply(obj, 引数);
リターンパッド[ args];
}
memoizedFn.unmemoize = function() {
return self;
}
return memoizedFn;
}
Function.prototype.unmemoize = function() {
alert("メモ化されていない関数をメモ化解除しようとしています。");
return null;
使用法: fib.memoize(); Javascript デザイン パターン
合成モード: このデザイン パターンを使用してオブジェクトを結合します。プロパティとメソッドを追加し、リーフ オブジェクトを再帰的にバッチ処理して、結合されたオブジェクトのプロパティとメソッドを取得します。たとえば、銀行の種類ごとにオンライン バンキングとカートゥーン バンキングに分けて、表示するかどうかを設定できる銀行リストを動的に作成したいと考えています。組み合わせモードを使用してこれを実現するにはどうすればよいですか?
最初のステップは、最初にインターフェイスを定義することです。特定の種類のバンクまたは特定のバンクを表示できるかどうかを設定可能にするために、最初に 2 つのインターフェイス、showBank と HideBank について合意する必要があります。
var IcardItem = new Interface("icardItem",[["showBank"],["hideBank"]]);
次に、カードの組み合わせオブジェクトを定義し、カードの基本メソッド add、remove を設定します。組み合わせオブジェクト getChild は、このクラスが IcardItem インターフェイス クラスを継承しているため、2 つのインターフェイス メソッド showBank と HideBank も定義します。
var obj = argument .length > 0 ? argument[i] : null;
var memoizedFn = function() {
// パラメータを配列として保存します
var args = [];
for (var i = 0; i < argument.length; i ) {
args[i] = 引数[i];
if (!(パッドの引数)) {
パッド[引数] = self.apply(obj, 引数);
リターンパッド[ args];
}
memoizedFn.unmemoize = function() {
return self;
}
return memoizedFn;
}
Function.prototype.unmemoize = function() {
alert("メモ化されていない関数をメモ化解除しようとしています。");
return null;
使用法: fib.memoize(); Javascript デザイン パターン
合成モード: このデザイン パターンを使用してオブジェクトを結合します。プロパティとメソッドを追加し、リーフ オブジェクトを再帰的にバッチ処理して、結合されたオブジェクトのプロパティとメソッドを取得します。たとえば、銀行の種類ごとにオンライン バンキングとカートゥーン バンキングに分けて、表示するかどうかを設定できる銀行リストを動的に作成したいと考えています。組み合わせモードを使用してこれを実現するにはどうすればよいですか?
最初のステップは、最初にインターフェイスを定義することです。特定の種類のバンクまたは特定のバンクを表示できるかどうかを設定可能にするために、最初に 2 つのインターフェイス、showBank と HideBank について合意する必要があります。
var IcardItem = new Interface("icardItem",[["showBank"],["hideBank"]]);
次に、カードの組み合わせオブジェクトを定義し、カードの基本メソッド add、remove を設定します。組み合わせオブジェクト getChild は、このクラスが IcardItem インターフェイス クラスを継承しているため、2 つのインターフェイス メソッド showBank と HideBank も定義します。
コードをコピー
コードは次のとおりです:
var CardMain = function(id){
this.cards = [];
this.element = document.createElement("div");
this.element.id = id;
Interface.regImplement(this,IcardItem);
};
cardMain.prototype = {
add:function(card){
this.cards.push(card);
this.element.appendChild(card.getElement());
},
remove:function(card){
for(i=0;len=this.cards.length,i
this.cards.splice(i,1);
休憩;
}
this.element.removeChild(card.getElement());
}
},
getChild:function(i){
return this.cards[i];
},
getElement:function(){
return this.element;
},
showBank:function(){
this.element.style.display ="ブロック";
for(i=0;len=this.cards.length,i
}
},
hideBank:function(){
this.element.style.display ="none";
for(i=0;len=this.cards.length,i
}
}
};
その後、义叶子对オブジェクト类bankLogo を创建银行ロゴ、这里银行ロゴ都以带クラスのa标签标识:
复制代代码如下:
varbankLogo = function(bankClassName){
this.element = document.createElement("a");
this.element.className = 銀行クラス名;
Interface.regImplement(this,IcardItem);
};
bankLogo.prototype ={
showBank:function(){
this.element.style.display ="block";
},
hideBank:function(){
this.element.style.display ="none";
},
getElement:function(){
return this.element;
}
};
最後に 1 つの本体オブジェクトを設定し、操作実行の関連情報を 1 つのモデムを形成します。方便调用:
复制コード 代码如下:
var BankAction ={
bankList:[],
addBank:function(card){
this.bankList.push(card) ;
},
innerBank:function(conId){
for(i=0;len=this.bankList.length,i
}
document.getElementById(conId).appendChild(cardObj);
}
};
が完了し、すべてのパッケージを含む最外層コンテナを生成する例を示します。その後、パッケージの種類に基づいて、放置行パッケージとスルーパッケージのコンテナをそれぞれ生成し、最後に各パッケージを生成します。例、并按层级关系形成 DOM 構造：
复制代代码如下:
varbankDivT = new cardMain("PayCard");//创建最外层容器
var ebankCard = new cardMain("ebankCard");//创建网银类银行卡容器
var ktCard = new cardMain("ktCard" );//创建招行银行卡容器
var ccbBank = new BankLogo('Ebank-CMB');//创建招行银行卡
var abcBank = new BankLogo('Ebank-ABC');//创建卡通农行卡
var abcKtBank = new BankLogo('Kt-ABC');//创建卡通农行卡
ebankCard.add(ccbBank);
ebankCard.add(abcBank);
ktCard.add(abcKtBank);
bankDivT.add(ebankCard);
bankDivT.add(ktCard);
BankAction.addBank(bankDivT);
BankAction.innerBank("bankList");
自動生成の银列表、DOM 構造の例:
复制代 代価の例:
組み合わせモード アプリケーションは、ユーザー インターフェイスを動的に生成する場合に非常に適した選択肢であり、まとまりのあるコードを大幅に簡素化し、保守性を向上させることができます。ただし、リーフ オブジェクトが多数ある場合、再帰には依然としてパフォーマンスの問題が発生するため、使用には注意が必要です。
JavaScript デザイン パターンのデコレータ パターン
デコレータ パターン: 新しいサブクラスを作成せずに、オブジェクトの新しい関数を作成できます。例: Alipay チェックアウト赤い封筒と残高支払いを組み合わせたアプリケーション シナリオ。
var Ieconomics = new Interface("ieconomics",[["getPrice"]]);
まずコンポーネントクラスを作成し、コンポーネントに基づいてインスタンス化されたオブジェクトがパラメータとしてデコレータクラスに渡されます。これにより、デコレータはコンポーネント内のさまざまなメソッドを呼び出すことができます。
コードをコピー コードは次のとおりです。
varconomic = function(){
Interface.regImplement(this,Ieconomics);
economic.prototype={
//コード実装
}; >
次に、派生デコレーター オプション クラスの親クラスとしてデコレーター抽象クラスを作成します。
コードをコピー 最後に、上記に基づいて抽象クラス、派生 デコレータ オプション クラスを作成します:
コードをコピー
コードは次のとおりです:
//赤い封筒の装飾またはオプションクラス
//抽象クラスで装飾されたコンストラクターを呼び出します
economicsDecorator.call(this,economic)
extend( Coupon, CouponDecorator); coupon.prototype=function(){ //getPrice メソッドを書き換えます getPrice:function(){ return this.economic.getPrice() - this.getCoupon() ; }, getCoupon:function(){
//赤い封筒の合計価格を取得する具体的な実装}
}; myCoupon = new Economy();
myCoupon = new Coupon(myCoupon);
最初にコンポーネント myCoupon のインスタンスを作成し、それを渡すのは非常に簡単です。オブジェクトをデコレータ オプション クラス クーポンへのパラメータとして使用します。コードの両方の行で変数 myCoupon に値を割り当てていることがわかります。これは、どちらも同じインターフェイス クラスを実装しており、互換的に使用できるためです。
これを見た注意深い学生は、クーポン クラスに getCoupon メソッドが追加されていることに気づくかもしれません。現時点では問題ありませんが、引き続きショッピング クーポン デコレータ オプション クラスを作成し、red を使用してみてはいかがでしょうか。封筒も一緒に？
コードをコピー
コードは次のとおりです:
//Shopping Voucher Decorator Option Class
varバウチャー = function(economic){
economicsDecorator.call(this,economic) }; myCoupon = new Economy();
myCoupon = new Coupon(myCoupon);
最初にコンポーネント myCoupon のインスタンスを作成し、それを渡すのは非常に簡単です。オブジェクトをデコレータ オプション クラス クーポンへのパラメータとして使用します。コードの両方の行で変数 myCoupon に値を割り当てていることがわかります。これは、どちらも同じインターフェイス クラスを実装しており、互換的に使用できるためです。
これを見た注意深い学生は、クーポン クラスに getCoupon メソッドが追加されていることに気づくかもしれません。現時点では問題ありませんが、引き続きショッピング クーポン デコレータ オプション クラスを作成し、red を使用してみてはいかがでしょうか。封筒も一緒に？
コードをコピー
コードは次のとおりです:
//Shopping Voucher Decorator Option Class
varバウチャー = function(economic){
extend(voucher,couponDecorator){
getPrice :function(){
return this.getPrice() - this.getVoucher();
}, getVoucher:function(){ //の合計価格を取得する具体的な実装クーポン } }; var myCoupon = 新しいクーポン(myCoupon); myCoupon = 新しいクーポン(myCoupon);
ここ このシナリオの getCoupon メソッドが見つかりません。これは、伝票が myCoupon を装飾するときに、その親クラスの EconomysDecorator に getCoupon メソッドが含まれていないため、当然取得できません。 デコレータ抽象クラスconomicsDecoratorを分析し、パラメータとしてmyCouponへの参照を渡します。このパラメータを使用して、いくつかの小さなアクションを実行し、新しく追加されたメソッドを取得できます。
コードをコピー
コードは次のとおりです。
varconomicsDecorator = function(economic){
this.economic = electric;
this.interface = Ieconomics;
for(var k in this.economic){
if( typeof this.economic[key] !== "function"){
continue;
var i;
for(i = 0;len = this.interface.methods.length,i //このメソッドがインターフェイス クラスに含まれているかどうかをトラバースして比較し、含まれている場合は次のメソッドを返します
if(key == this.interface.methods[i][0] ) {
break ;
}
}
if(i
vardecorator = this;匿名関数を使用して新しいメソッドを呼び出します
(function(methodName) {
decorator[methodName] = function() {
returndecorator.economic[methodName]();
};
}) (キー);
}
}
this.regImplement(economic,Ieconomics);
economicsDecorator.prototype={
getPrice:function(){
return this.economic.getPrice();
}
};
上記のコードを見ると、デコレータ抽象クラスにいくつかの変更が加えられています。新しいメソッドがオプション クラスで定義されると、それをデコレータ抽象クラスで動的に定義できるようにするためです。ここでは、デコレータ パターンを使用するためのアイデアを示します。具体的な実装コードは、まだ開発中であるため、Alipay のレジの新しいバージョンがリリースされた後に共有します。詳細なデザインをあなたと一緒に作ります。
JavaScript デザイン パターンのブリッジ モード
ブリッジ モード: 抽象化とその実装を分離し、独立して変更できるようにします。実際、これは非常に簡単で、API と特定のイベントの間にブリッジを追加するだけで、API とそれを使用するクラスおよびオブジェクトの間の結合が軽減されます。実際、ブリッジ モードはほとんどの学生にとって馴染みのないものではありません。次の this.getName は、内部のプライベート変数にアクセスすることによって実現されるブリッジ メソッドです。外部と内部のコミュニケーションの橋渡しをします。
コードをコピー
コードは次のとおりです:
アダプター パターン: たとえば、以前はプロトタイプ フレームワークを使用していましたが、現在は 2 つのフレームワーク間で移行する方法を計画しています。
、たとえば、プロトタイプの $ メソッドを YUI の get メソッドに変換する方法:
コードをコピー
コードは次のとおりです:
コードをコピー
コードは次のとおりです。
varconomicsDecorator = function(economic){
this.economic = electric;
this.interface = Ieconomics;
for(var k in this.economic){
if( typeof this.economic[key] !== "function"){
continue;
var i;
for(i = 0;len = this.interface.methods.length,i //このメソッドがインターフェイス クラスに含まれているかどうかをトラバースして比較し、含まれている場合は次のメソッドを返します
if(key == this.interface.methods[i][0] ) {
break ;
}
}
if(i
vardecorator = this;匿名関数を使用して新しいメソッドを呼び出します
(function(methodName) {
decorator[methodName] = function() {
returndecorator.economic[methodName]();
};
}) (キー);
}
}
this.regImplement(economic,Ieconomics);
economicsDecorator.prototype={
getPrice:function(){
return this.economic.getPrice();
}
};
上記のコードを見ると、デコレータ抽象クラスにいくつかの変更が加えられています。新しいメソッドがオプション クラスで定義されると、それをデコレータ抽象クラスで動的に定義できるようにするためです。ここでは、デコレータ パターンを使用するためのアイデアを示します。具体的な実装コードは、まだ開発中であるため、Alipay のレジの新しいバージョンがリリースされた後に共有します。詳細なデザインをあなたと一緒に作ります。
JavaScript デザイン パターンのブリッジ モード
ブリッジ モード: 抽象化とその実装を分離し、独立して変更できるようにします。実際、これは非常に簡単で、API と特定のイベントの間にブリッジを追加するだけで、API とそれを使用するクラスおよびオブジェクトの間の結合が軽減されます。
コードをコピー
コードは次のとおりです。 var ioldfish = function(){ var name = 'Old Fish';
this.getName = function(){ alert(name);
}
最も一般的に使用されるブリッジモードはイベントリスナーのコールバック関数です。ユーザー情報を取得する API インターフェース関数は次のとおりです。
コードをコピー
}
最も一般的に使用されるブリッジモードはイベントリスナーのコールバック関数です。ユーザー情報を取得する API インターフェース関数は次のとおりです。
コードをコピー
コードは次のとおりです:
次に行う必要があるのは、この API とイベントのトリガーとの間のブリッジ関係を確立することです
addEvent(element,'click',bridgeMethod); function BridgeMethod(e) {
getUserInfo(this.userid,function(){
//コールバック関数の実装コード
});
}
要素がクリックされたオブジェクトは getIserInfo ではありませんが、新しいブリッジ メソッド、bridgeMethod が作成されます。このブリッジング層を通じて、API インターフェイス関数とクリック イベントが比較的独立しているため、API の適用範囲が大幅に広がります。
JavaScript デザイン パターン アダプター パターンaddEvent(element,'click',bridgeMethod); function BridgeMethod(e) {
getUserInfo(this.userid,function(){
//コールバック関数の実装コード
});
}
要素がクリックされたオブジェクトは getIserInfo ではありませんが、新しいブリッジ メソッド、bridgeMethod が作成されます。このブリッジング層を通じて、API インターフェイス関数とクリック イベントが比較的独立しているため、API の適用範囲が大幅に広がります。
アダプター パターン: たとえば、以前はプロトタイプ フレームワークを使用していましたが、現在は 2 つのフレームワーク間で移行する方法を計画しています。
、たとえば、プロトタイプの $ メソッドを YUI の get メソッドに変換する方法:
コードをコピー
コードは次のとおりです:
function $(){}; function YAHOO.util.Dom.get=function(el){}; return YAHOO .util.Dom.get(arguments) }
プロトタイプで yui の get メソッドを使用したい場合は、次のステートメントを作成するだけです:
$ =prototypeToYuiAdapter;
この場合、プロトタイプで YUI の get メソッドを使用できます。私はこのモデルをあまり評価していないので、詳しくは説明しません。実際、責任あるデザイナーとして、このモデルを使用する必要はまったくないと思います。このモードを使用したくない場合は、やむを得ない場合の暫定的な解決策としてのみ使用できます。
JavaScript デザイン パターン ファサード モード、オブザーバー モード
ファサード モード: これは、フレームワークで定義されているメソッドを探して確認するだけの最も基本的なデザイン パターンです。 YUI の setStyle メソッドなど。ここでは詳しく説明する必要はありません。
オブザーバー パターン: このデザイン パターンを JavaScript に適用するのは、かなり突飛なように思えます。私はよく理解していないので、他の人に誤解を与えないようにここでは説明しません。アドバイスをお願いします。
丸一日かけてこのブログを書きましたが、まだまだ書きたいことがたくさんあるようですが、思っていることをはっきりと書き出すのは簡単ではないようです。後ほどお楽しみに！
プロトタイプで yui の get メソッドを使用したい場合は、次のステートメントを作成するだけです:
$ =prototypeToYuiAdapter;
この場合、プロトタイプで YUI の get メソッドを使用できます。私はこのモデルをあまり評価していないので、詳しくは説明しません。実際、責任あるデザイナーとして、このモデルを使用する必要はまったくないと思います。このモードを使用したくない場合は、やむを得ない場合の暫定的な解決策としてのみ使用できます。
JavaScript デザイン パターン ファサード モード、オブザーバー モード
ファサード モード: これは、フレームワークで定義されているメソッドを探して確認するだけの最も基本的なデザイン パターンです。 YUI の setStyle メソッドなど。ここでは詳しく説明する必要はありません。
オブザーバー パターン: このデザイン パターンを JavaScript に適用するのは、かなり突飛なように思えます。私はよく理解していないので、他の人に誤解を与えないようにここでは説明しません。アドバイスをお願いします。
丸一日かけてこのブログを書きましたが、まだまだ書きたいことがたくさんあるようですが、思っていることをはっきりと書き出すのは簡単ではないようです。後ほどお楽しみに！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。