コンセプト
外観モード（ファサードモード）は、比較的シンプルでユビキタスモードです。外観モードは高レベルのインターフェイスを提供するため、クライアントやサブシステムを簡単に呼び出すことができます。
外観モードはアダプターモードではありません。アダプターモードは、互換性のないシステムで使用するためにインターフェイスを適応させるラッパーです。外観要素を作成することは便利です。特定のインターフェイスを必要とする顧客システムを扱うのではなく、単純化されたインターフェイスを提供するために使用されます。
JavaScriptコードの例
簡単なコードを使用してそれを表現します
var getName = function（）{return '' svenzeng "} var getSex = function（）{return 'man'}それぞれgetNameとgetSex関数を呼び出す必要がある場合は、高レベルのインターフェイスgetUserinfoを使用してそれを呼び出すことができます。
var getuserinfo = function（）{var info = a（） + b（）;情報を返します;}たとえば、GetNameとGetsexコードを最初に一緒に書かなかった理由を尋ねるかもしれません。
var getnameandsex = function（）{return 'svenzeng " +" man ";}答えは明らかです。食堂の料理シェフは、ローストダックとキャベツを予約したからといって、これらの2つの料理を同じポットで炒めません。彼はむしろ、ローストダックライスのセットミールを提供したいです。また、プログラミングでは、機能またはオブジェクトが可能な限り合理的な粒度にあることを確認する必要があります。結局のところ、誰もがローストアヒルを食べるのが好きではなく、キャベツを食べるのが好きでもありません。
外観モードのもう1つの利点は、ユーザーから実際の実装の詳細を非表示にできることであり、ユーザーは最高レベルのインターフェイスのみを気にすることです。たとえば、ローストダックライスセットの食事の物語では、マスターが最初にローストダックを最初に炒めたか、最初にキャベツを炒めたかどうかは気にしません。
最後に、私たち全員が使用した外観パターンの例を書きました
var stopevent = function（e）{//イベントのデフォルトの動作とバブルを同時にブロックe.StopPropagation（）; e.preventdefault（）;}外観パターンの概念をマスターするのは簡単であり、必ずしもJavaScriptコードの例を必要とするとは限らないかもしれませんが、一部の人々は常にコードをより多く気にかけており、理解しやすいと考えるでしょう。さらに、コードサンプルのないJavaScriptの記事はまったく説得力がないため、インターネットから削除する必要があります。イベントリスナーの簡単な例から始めましょう。イベントリスナーを追加するのは、コードをいくつかのブラウザで実行するだけでない限り、簡単ではないことを知っています。さまざまなブラウザーのコードが適切に機能することを確認するには、多くの方法をテストする必要があります。このコードの例では、この方法に機能検出を追加するだけです。
関数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'; var baz = document.getElementById（ 'baz'）; baz.style.color = 'red'; baz.style.width = '150px';
足が大きすぎる！各要素に対してまったく同じことをしました！私たちはそれを少し簡単にすることができると思います：
function setStyle（要素、プロパティ、値）{for（var i = 0、length = elemention.length; i <length; i ++）{document.getElementById（elements [i]）。スタイル[プロパティ] = value; }} //このように書くことができます：setStyle（['foo'、 'bar'、 'baz']、 'color'、 'red'）; setStyle（['foo'、 'bar'、 'baz']、 'width'、 '150px'）;私たちのNBは壊れていると思いますか？あなたはそれを忘れます！私たちはJavaScriptプログラマーです！いくつかの脳を使って本物のものを手に入れることはできますか？たぶん、すべてのスタイルを一度だけ設定できます。これをチェックしてください：
関数setStyles（要素、スタイル）{for（var i = 0、length = elemention.length; i <length; i ++）{var element = document.getElementById（elements [i]）; for（スタイルのvarプロパティ）{element.style [Property] = styles [Property]; }}} //これで、このように記述する必要があります：setStyles（['foo'、 'bar'、 'baz']、{color： 'red'、width： '150px'}）;同じスタイルを設定したい多くの要素がある場合、このコードは本当に多くの時間を節約します。
外観モードの利点：
外観モードを使用する目的は、プログラマーがコンボコードを一度簡単に作成し、繰り返し使用できるようにすることです。これにより、時間と労力を節約できます。いくつかの複雑な問題のための簡素化されたインターフェイスを提供します。
外観方法は、開発者にとって便利です。 Binは比較的高レベルの機能を提供し、外部コードへの依存を減らし、アプリケーションシステムの開発に追加の柔軟性を追加しました。外観モードを使用することにより、基礎となるサブシステムへのタイトな結合を回避できます。これにより、システムはクライアントコードに影響を与えることなく変更できます。
外観モードの短所：
時には、外観要素が不必要な余分な負担をもたらすこともあります。いくつかのルーチンを実装する前に、それらの実用性を慎重に考慮する必要があります。複雑な外観関数と比較すると、その組成関数は力の面でより魅力的です。これは、外観関数が必要なタスクを実行することが多いためです。
単純な個人的なウェブサイトまたは少数のマーケティングページの場合、ツールチップやポップアップなどの少し強化された動作のためにこのJavaScriptライブラリをインポートすることは賢明ではないかもしれません。これらのものでいっぱいのライブラリではなく、現時点ではいくつかの単純な外観要素のみを使用することを検討してください。
外観関数は、さまざまな複雑なタスクを実行するためのシンプルなインターフェイスを提供します。これにより、コードの維持と理解が容易になります。また、サブシステムとクライアントコード間の結合を弱める可能性があります。しばしば一緒に表示される一般的な関数を組み合わせます。このモードは、DOMスクリプトで非常に一般的に使用されており、一貫性のないブラウザインターフェイスが必要です。