1

私たちは ajax によるより動的なコンテンツの読み込みを開始しました。進化したパターンは、読み込んで div に貼り付ける html と共に関数を含めることです。したがって、メインの html ページに div がある場合:

<div id="a"></div>

このようなものをその div にロードします。

<div id="b" onchange="dostuff();">...</div>
<script type="text/javascript">
    function dostuff() {
        // ...
    }
</script>

ここでの dostuff メソッドには、通常、サーバーで生成されたもの (php または jsp によって) は含まれません。より便利なことです。javascript コードが動作する html の近くにあると、関数を見つけたり、見たりするのが簡単になります。関連するすべてのコードを 1 つのファイルにまとめます。

私が働いていた別のプロジェクトでは、dostuff() のような関数を別の .js ファイルに入れる傾向がありました (通常、1 つの .js ファイルには、動的に読み込まれるいくつかの html チャンクで使用される多くの関数が含まれます)。読み込まれました。これは私にとってより良い解決策のように感じますが、チーム内でその点について議論したい場合、長所と短所を特定するのは難しいです - 多分私は間違っていますか?

私が気づいたことの 1 つは、Firebug でのデバッグが難しくなっていることです。これは、ブレークポイントを配置した関数がリロードされ、デバッガーが混乱するためです。また、ブラウザが関数を再コンパイルすると、パフォーマンスが低下する可能性がありますか?

4

2 に答える 2

1

マークアップとロジックを混同しないでください。すべての JavaScript を別のファイルに入れ、イベントもそこに割り当てます。そうすれば、混乱が減り、移植性が高まります。

html:

<div id="b">...</div>

js:

var b = document.querySelector('#b');
b.addEventListener('change', function() {
  // do something
});

これは静的であると仮定して機能しbますが、それ以外の場合は「イベント委任」を調べてください。

また、ブラウザが関数を再コンパイルすると、パフォーマンスが低下する可能性がありますか?

最高のパフォーマンスを得るには、JavaScript を別々のファイルに入れることをお勧めします。そうすれば、すべてを連結して縮小し、ブラウザに 1 つのファイルだけをロードできます。

于 2013-01-21T08:58:58.340 に答える
1

1つのことは、あなたがそうする方法でそれをhtmlに含める場合、 dostuff はグローバル関数です(これは一般的に悪い考えです)。少なくとも 1 つのグローバル名前空間変数オブジェクト リテラルを使用し、その変数にすべてを追加します。

var YOURNAMESPACE = {};

そしてあなたのインクルード：

<div id="b">...</div>
<script type="text/javascript">
  YOURNAMESPACE.dostuff = function () {
    // ...
  };

  document.getElementById('b').onchange = function () {
    YOURNAMESPACE.dostuff();
  }
</script>

ご覧のとおり、コードで JavaScript 属性を使用していません。それはただの悪い習慣です！

あなたの質問に関しては、場合によります。最初のページ読み込み時間のため、ajax リクエストでそれを読み込むための引数があります。

1つのファイル内でそれを行うことについて語る議論は、JavaScriptを構造化し、より良い概要を得る方が明らかに簡単であるということです. JavaScriptファイルを縮小/醜くすることができます（そしてそうするべきです）！

通常、ajax パターンについて考える必要があります。jsonでajaxできますか？あなたのajaxリクエストはもっと速くなるはずです。（jsonで行う場合、json経由でjavascriptコードをブラウザーに送信できないため、質問は廃止されます）。

于 2013-01-21T09:03:00.903 に答える