0

通常、UI コンポーネントを初期化するためのコードがいくつかあります。たとえば、いくつかの UI をセットアップする必要があるか、UI にdocument.readyイベントbindを設定する必要があります。

私の理解では、これらのコードを html ファイルに入れるべきではありません。しかし、私の懸念は、これらの初期化コードを別の js ファイルに配置した場合、それを選択するために UI クラス/ID をハードコーディングする必要があるため、まだ html ファイルに強く結合しているようです。HTMLとUI関連のJavaScriptを分離するための通常のプラクティス/アーキテクチャは何ですか? 簡単な例を挙げていただけると助かります。

view.js 

function init() {
    $("#some_view").click(sth);
    $("#some_view").text(sth);
}
4

2 に答える 2

1

または、html 要素の ID を関数に渡すこともできます。として：

function init(id) {
    $(id).click(sth);
    $(id).text(sth);
}

HTML ファイルで、script タグ内の関数を init("#some_view"); として呼び出します。

于 2013-03-16T10:41:38.890 に答える
1

とはいえ、私は神だけが知っている時間の間、このことを考えてきましたが、それが簡単な答えになるとは思いません. これが理由です

DOM 要素は define なしでトラバースできますid, class, rel or any other attributeが、これはスピード部門であなたを傷つける可能性があり、それでも html 構造との依存関係を除外することはできません.

持っidていることには、それが持つかもしれないどんな短所よりも利点があります。属性を介して DOM 要素を選択するidことは、要素を取得する最速の方法です。

ブラウザのキャッシュを許可するため、js を html ファイルから分離する必要があります。開発者の観点からも、整理されていることは素晴らしいことです。

しかし、シンプルでより優れた推奨されるアプローチにより、 のような属性を変更しなければならないというカスケード効果を減らすことができますid。

// have selectors defined once and use that object later.
var someView = $("#some_view");

// use someView everywhere (within scope)

someView.click(sth);
someView.text(sth);

$('#some_view')オブジェクトを に割り当てる際に DOM トラバーサルが既に 1 回行われているため、これは実際には高速someViewです。次回使用するときは、トラバーサルは必要ありません。idまた、を から#some_viewに変更する必要がある場合でも、#something_else1 か所で行う必要があります。

于 2013-03-16T11:12:54.407 に答える