1

長い間読んで申し訳ありませんが、とにかくあなたの考えを共有できればいいのですが。:)

つまり、この手法については、Paul Irishのブログ投稿（ http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution ）で説明されており、Jason Garberによって拡張されています（ http：// viget）。 com / inspire/extending-paul-irishs-comprehensive-dom-ready-execution。

主なアイデアは、特定のページ（コントローラーやビュー）が（DOM対応で）ロードされたときに実行されることになっているすべてのコードを含むjsonオブジェクトを用意することです。

オブジェクトは次のようになります。

APP = {
  controller1 : {
    view10: function(){ ... },
    view11: function(){ ... }
  },
  controller2: {
    view20: function() {...},
    view21: function() {...}
  }
}

<body>次に、に変更します

<body data-controller="controller_name" data-action="view_name">

そして、DOMの準備が整うと、いくつかのJSグッズを使用して、への自動呼び出しが行われAPP.controller_name.view_name()ます。

DOM対応のスクリプトをすべて1つの場所に配置でき、これらのスクリプトは追加のコードなしで実行されるため、これは非常に優れています。

そして実際の質問 です。DOMの準備ができたときではなく、イベントが発生したときに実行されるはずの特定のコントローラーまたはビュー/ページの他のJS関数をどうするか（例：onclick = "someFunction（）"？

これらの関数が適切なAPP.controller_name名前空間内にあると、コードの保守に役立つため、非常に便利です。そうは言っても、私は現在、APPオブジェクトを次のようなものに変更しています。

APP = {
  controller1 : {
    view10: function(){ ... },
    view11: function(){ ... },
    extraStuff10: function: () {...},
    extraStuff11: function: () {...}
  },
  controller2: {
    view20: function() {...},
    view21: function() {...},
    extraStuff20: function: () {...}
  }
}

そして、これはすべて良いことです-APP.controller1.view10()自動的に実行されAPP.controller1.extraStuff10()、後で必要なときに呼び出すことができます。ただし、その構造には重大な欠点が1つあります。view10（）とextraStuff10（）の構造はまったく同じであるため、extraStuff10（）がイベント発生時に実行を待機している関数なのか、実際のビューがあるのか​​がわかりません。 / pageはextraStuffと呼ばれ、その関数のコンテンツはページがロードされるときに実行されます。

関数view10（）を、次のようにinit（）関数を含むオブジェクトに変更することを考えています（そして、DOM対応のスクリプトを内部に配置します）。

APP = {
  controller1 : {
    view10: {
      init(): function(){ ... }
    },
    extraFunction10: function: () {...}
  }
}

これにより、DOM対応の機能と他の機能が明確に分離されますが、それがそのような機能を実現するための最良の方法であるかどうか疑問に思っています...何かアイデアはありますか？

4

1 に答える 1

1

これは良いパターンですが、1 つのファイルですべてを管理するアプローチはすぐに扱いにくくなるため、少し分割することをお勧めします。アプリが 50 ページになるとどうなりますか? 最終的には編集するモンスター ファイルが作成され、そのファイル全体をページ全体にロードする必要があり、ダウンロードと解析の両方の時間が長くなります。

アクセスされるページに応じて動的にロードされる小さな JS ライブラリ ファイルはうまく機能します。次に、関数を APP グローバル名前空間にアタッチして、ページ間で再利用できるようにします。コントローラーのコードは、単純な onclick などをアタッチするだけで、既にロードされているライブラリーがトリガーされるため、軽量のままです。

ライブラリを正しい順序でロードするために要件マネージャーを使用する方向に進むと、これに役立つ場合があります。

于 2012-07-24T10:24:28.790 に答える