Clever Geek Handbook

ページオブジェクト：1つの手法の説明

こんにちは、Khabrovites。



DOM要素を使用した大規模な作業中にコードを整理するための1つの手法を紹介します。 数年前、バックボーンとMVVCがまったくなかったとき、フレームワークなしで古き良きjavascriptを書きました。オブジェクトを作成し、それらをページ上で一般的なダンスで踊らせました。 そのような慣行は、疑いなく、まだ報われており、議論される技術はそれに適用できます。



私の話は、小さなライブラリPageObject.js （現在のバージョンv0.14、2.6K）と、それを使用して生活を簡素化する方法についてです。



これはjQueryプラグインではありませんが、多くの人がそれを呼び出したいと思うでしょう。 これは、セレクターといくつかのjQueryユーティリティを使用してコードの読み取りと書き込みを簡単にする機能です。 実際、これは単純なjQueryユーティリティです。



技術の本質



DOM要素を操作し、それらをページに接続するオブジェクトの作成には新しいものはありません。コンストラクターを作成し、最初に特定のテンプレートをレンダリングし、その結果をパーツに解析し、これらのパーツのイベントハンドラーを「ハング」させ、残りのロジックをプログラミングし、これらすべてをアプリケーションに埋め込みます。 



function Calculator() { if (this.constructor.name !== 'Calculator') { throw “No way, buddy!”; } // 1.   // 2.    // 3.   // 4.   }


PageObject.jsは、最初の2つのステップを支援します。 



 function Calculator() { if (this.constructor.name !== 'Calculator') { throw “No way, buddy!”; } var calc = this; $.turnToPageObject(calc, { template: $('#tmplCalculator').html(), containerClass: 'calc', context: { caption: "Calculator" }, selectors: { buttons: [ ':button', Calculator.getButtonName ], led: 'p' } }); // 3.   // 4.   } var calc = new Calculator; $('body').append(calc.DOM.container);


$.turnToPageObject



関数が実行された後（「ページオブジェクトに変わる」）、 calc



オブジェクトにはcalc.DOM



プロパティがあります-指定されたセレクターに対応するDOM要素で満たされた名前空間、およびcalc.DOM.container



も表示されます-アプリケーションに簡単に埋め込まれるオブジェクトの部分は、あらゆるもののコンテナです。



計算機を使用した完全な動作例です。 ユーティリティのすべての機能について詳しく説明する必要があります。



$ .turnToPageObject



最初の引数はオブジェクトである必要があります。オブジェクトは、後で複合HTML要素で満たされたDOM



名前空間とともに表示されます。 2番目の引数はオプションです。



container



オプションを指定しない場合、コンテナは（何らかの方法でそれなしで）作成され、これはcontainerElement



と同じ要素になります（デフォルトはDIV



）。



containerClass



を指定すると、コンテナにクラスが割り当てられます。



template



を指定template



と、 template



がレンダリングされ、その結果がコンテナー内に配置されます。



context



指定しない場合、テンプレートは空のコンテキスト{}でレンダリングされます。



template



は、文字列または関数（ Jammit JSTとの統合）のいずれかです。



template



が関数の場合、コンテキストのみを受け取り、文字列を返す必要があります。



template



が文字列の場合、テンプレートはtemplateEngineを使用しtemplateEngine



レンダリングされます。 アンダースコアが存在する場合、テンプレートエンジンは自動的に_.template



テンプレートエンジンを使用します。



プロジェクトにアンダースコアがない場合は、 templateEngine



を構成する必要があります。 



 //    : $.turnToPageObject.configure({ templateEngine: window.tmpl, // http://ejohn.org/blog/javascript-micro-templating containerElement: 'strong' });


templateEngine



は、テンプレート文字列とコンテキストの2つの引数を取り、文字列も返す必要があります。



hide



オプションが指定されている場合、コンテナはhide



ます。これは多くの場合便利です。



そして最も重要なのは、セレクターです。 selectors



オプション（オブジェクト）を選択すると、セレクターに一致するコンテナーのコンテンツで見つかったHTML要素は、 DOM



名前空間の同じキーを使用して配置されます。 template



オプションが指定された場合、セレクターは既にレンダリングされたテンプレートを検索します。



セレクタで要素が見つからない場合、悲鳴が上がります。

セレクタで複数の要素が見つかった場合も例外が発生します。

それでも複数の要素を見つけてセレクターによって配列に配置する必要がある場合は、セレクターの値に[] （空の角括弧）を追加する必要があります-この選択は正当化されます。



複数の要素をオブジェクトに配置する場合（電卓の例のように）、セレクター値は2つの要素の配列として記述する必要があります。最初の要素はセレクター自体であり、2番目は指​​定したセレクターによって検出された各要素からの関数ですキー（識別子など）を削除して、この要素を対応するネームスペースに配置します。



セレクター内の追加の名前空間は、 DOM



プロパティ内で同じ名前の名前空間を形成することに注意してください。



おそらくそれだけです。



テストを読んでgithubのソースを見ると、その機能と仕組みをよりよく理解できます。 もちろん、 一般的なドキュメントも役立ちます。



このテクニックと上記の慣習がプロジェクトで適用できると思うと嬉しいです。 私はあなたの希望やアイデアに特に喜んで、質問に答えることをうれしく思います。


More articles:


All Articles