ページオブジェクト：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のソースを見ると、その機能と仕組みをよりよく理解できます。 もちろん、 一般的なドキュメントも役立ちます。

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