JavaScript の外観モード

今回は、JS の設計コンセプトとどのような点に注意する必要があるかについて説明します。対応するセクションは順次更新されます。以前にも述べましたが、シングル ケース モードです。 興味があれば、チェックしてみてください。

注意事項

JavaScript

デザインパターンシリーズgithubアドレス

詳細なシリーズ記事は、

ディレクトリ構造に従って順番に読むのが最善です。

修正と質問

質問がある場合、または間違いを見つけた場合は、対応する問題で質問したり修正したりできます。

外観モード

コンセプト:

複雑なサブシステムインターフェースのセットに高レベルの統合インターフェースを提供します

,このインターフェースを通じてサブシステムインターフェースへのアクセスを容易にします

外観モードはファサードモードとも呼ばれます

ケースは反映します

ドキュメント要素にクリックイベントをバインドする必要がありますが、このとき、ブラウザの互換性を考慮する必要がありますが、イベントをバインドするたびに、一部のブラウザが互換性があるかどうかを判断する必要があります。 、明らかにあまり合理的ではありません。現時点では、外観モードを使用して統合されたバインディング イベント メソッドをカプセル化し、このメソッドでブラウザーの互換性を処理し、外部バインディング イベントのメソッドを均一に公開する必要があります

これを外観と呼びます。 mode

コードの具体化

// アピアランスモード実装関数 addEvent(dom, type, fn){ //

dom レベル 2 イベントハンドラー

をサポートするブラウザの場合 addEventListener メソッド if(dom .addEventListener){ dom.addEventListener(type, fn,false); }else if(dom.attachEvent){// addEventListener メソッドはサポートしないが、attachEvent メソッドはサポートするブラウザの場合 dom.attachEvent('on'+type,fn) }else { dom['on '+ type] = fn; } } // バインディング イベントを呼び出します addEvent(document.getElementById('btn'),'click',function(){ console.log('I clicked Event'); });
アピアランスモードのメリット

統一された外部インターフェイスを提供し、複雑なロジックを統一的に処理し、外部呼び出しを容易にします

アピアランスモードの概要

JavaScriptでは、アピアランスモードはjQueryを使用することが比較的容易です。ブラウザの互換性の問題を解決するには、このような考え方が必要です

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS Web ページの位置ずれに対処する方法

CSS3 読み込み効果を作成する方法

CSS3 で蝶が飛ぶアニメーションを作成する方法

以上がJavaScript の外観モードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。