JavaScript 開発におけるデザイン パターンにおけるファサードの外観パターンの適用 (上級)

ファサード パターンは、ファサード ロールを導入することでクライアントとサブシステム間の対話を簡素化し、複雑なサブシステム呼び出しに統一された入り口を提供し、サブシステムとクライアント間の結合を軽減します。 次に、デザイン パターンのファサードを見てみましょう。 JavaScript 開発における外観モードの適用

コンセプト

外観モード (ファサード モード) は、比較的シンプルでユビキタスなモードです。外観パターンは、クライアントまたはサブシステムが呼び出すことを容易にする高レベルのインターフェイスを提供します。

外観パターンはアダプター パターンではありません。アダプター パターンは、互換性のないシステムでも使用できるようにインターフェイスを適応させるラッパーです。外観要素を作成すると便利です。これは、特定のインターフェイスを必要とするクライアント システムに対処する目的ではなく、簡素化されたインターフェイスを提供するために使用されます。

JavaScript コードの例

単純なコードを使用して表現します

var getName = function(){
 return ''svenzeng"
}
var getSex = function(){
  return 'man'
}

getName 関数と getSex 関数を個別に呼び出す必要がある場合は、上位レベルのインターフェイス getUserInfo を使用して呼び出すことができます。 getName と getSex のコードを最初にこのように一緒に書いてみませんか

var getUserInfo = function(){
 var info = a() + b();
 return info;
}

答えは明白です。あなたがローストダックを注文したからといって、食堂の炒め物シェフは 2 つの料理を炒めることはありません。鍋にキャベツ。彼はむしろローストダックライスセットを提供したいと考えています。また、プログラミングでは、関数やオブジェクトが可能な限り適切な粒度であることを保証する必要があります。結局のところ、誰もがロースト アヒルを食べるのが好きなわけではなく、キャベツも食べるのが好きなわけではありません。

最後に、皆さんが使ったことのある出現パターンの例を書きましょう

var getNameAndSex = function(){
 return 'svenzeng" + "man";
}

var stopEvent = function( e ){  //同时阻止事件默认行为和冒泡
 e.stopPropagation();
 e.preventDefault();
}

シンプルにしてください!本当は余計なコードを書かずにできるだけシンプルにできればいいのですが、それだと面白くないし読みたくなくなりますよね？だから私はそうは思わない、もう少し複雑なものを紹介しようと思う。あなたのコードは次のようになることを言いたかっただけです:

function addEvent(element, type, func) {
  if (window.addEventListener) {
    element.addEventListener(type, func, false);
  }
  else if (window.attachEvent) {
    element.attachEvent('on'+type, func);
  }
  else {
    element['on'+type] = func;
  }
}

それはダサい!すべての要素に対してまったく同じことを行います。もっと簡単にできると思います:

var foo = document.getElementById('foo');
  foo.style.color = 'red';
  foo.style.width = '150px';

var bar = document.getElementById('bar');
  bar.style.color = 'red';
  bar.style.width = '150px';

var baz = document.getElementById('baz');
  baz.style.color = 'red';
  baz.style.width = '150px';

私たちのNBが壊れていると思いますか?それを忘れて！私たちは JavaScript プログラマーです。頭を使って真剣に取り組むことができますか？おそらく、1 回の呼び出しですべてのスタイルを設定できるでしょう。これを見てください:

function setStyle(elements, property, value) {
  for (var i=0, length = elements.length; i < length; i++) {
    document.getElementById(elements[i]).style[property] = value;
  }
}

// 现在你可以这么写：
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;color&#39;, &#39;red&#39;);
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;width&#39;, &#39;150px&#39;);

同じスタイルを設定したい要素がたくさんある場合、このコードは本当に時間を大幅に節約します。

Appearance モードを使用する目的は、プログラマーの作業を容易にすることです。組み合わせコードを一度作成すると、それを繰り返し使用できるため、時間とエネルギーを節約できます。いくつかの複雑な問題に対して簡素化されたインターフェイスを提供します。 外観メソッドは、より高いレベルの機能を提供し、外部コードへの依存を減らし、アプリケーション システムの開発にさらなる柔軟性を与えます。ファサード パターンを使用すると、基礎となるサブシステムとの密結合を回避できます。これにより、顧客のコードに影響を与えることなくシステムを変更できます。

外観要素は、不必要な追加の負担をもたらす場合もあります。一部のルーチンを実装する前に、その実用性を慎重に検討する必要があります。場合によっては、コンポーネント関数の強さの方が、複雑な外観関数よりも魅力的です。これは、ファサード機能が必要のないタスクを実行する場合が多いためです。 単純な個人の Web サイトや少数のマーケティング ページの場合、ツールチップやポップアップなどの少し強化された動作のためだけにこの Javascript ライブラリをインポートするのは賢明ではないかもしれません。現時点では、外観要素が満載のライブラリではなく、いくつかの単純な外観要素のみを使用することを検討してください。

Facade 関数は、さまざまな複雑なタスクを実行するためのシンプルなインターフェイスを提供し、コードの保守と理解が容易になります。また、サブシステムとクライアント コード間の結合も緩めます。一緒に表示されることが多い一般的な関数をグループ化します。このモードは、一貫性のないブラウザ インターフェイスに対処する必要がある DOM スクリプトなどの環境でよく使用されます。

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptのデザインパターンにアダプターパターンを実装する方法の詳細な解釈（グラフィックチュートリアル）

JavaScriptのイベントストリームとイベントハンドラーの詳細な解釈（グラフィックチュートリアル）

Adapter JavaScriptのアダプターパターンのまとめデザインパターンプログラミングの応用（写真とテキストのチュートリアル）

以上がJavaScript 開発におけるデザイン パターンにおけるファサードの外観パターンの適用 (上級)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。