1

私はゆっくりと JavaScript の理解を深めていますが、この特定の組織/実行シナリオに取り組む最善の方法に行き詰まっています。

私は C# のバックグラウンドを持ち、名前空間の操作に慣れているため、JavaScript でこれを実現する方法について読んでいます。すでに大きな JavaScript ファイルになり始めていたものを、より論理的な部分に分割しました。

再利用可能なユーティリティ関数など、2 つ以上のページに共通するものを別の名前空間とファイルに含む、ページ固有の JavaScript 用にページごとに 1 つのファイルを作成することにしました。

これは現時点では理にかなっており、少なくとも開発プロセス中は一般的な選択肢のようです。いずれにせよ、バンドル ツールを使用して、これらの異種ファイルを組み合わせて運用環境に展開するので、開発がより論理的になり、コードを見つけやすくなるものは何でも良いでしょう。

多くのカスタム JavaScript を扱った経験がなかった結果、共通の JavaScript ファイルで関数を次のように定義しました。

common.js

$(document).ready(function () {
    var historyUrl = '/history/GetHistory/';
    $.getJSON(historyUrl, null, function (data) {
        $.each(data, function (index, d) {
            $('#history-list').append('<li>' + d.Text + '</li>');
        });
    });
});

これは、アプリケーション内の単一のページに固有のものであるため、明らかに理想とはほど遠いものですが、完全に愚かではないにしても、まったく無意味で非常に非効率的なすべてのページ要求で実行されていました。そのため、最初に名前空間について読み始めることにしました。

少し読んだ後、これをページ固有のファイルに移動し、次のように書き直しました。

common.js から historyPage.js に移動

(function(historyPage, $, undefined) {

    historyPage.GetHistory = function () {
        var historyUrl = '/history/GetHistory/';
        $.getJSON(historyUrl, null, function (data) {
            $.each(data, function (index, d) {
                $('#history-list').append('<li>' + d.Text + '</li>');
            });
        });
    };
    }( window.historyPage = window.historyPage || {}, jQuery ));

このパターンはjQuery Enterprise ページで見つけました。まだ完全に理解しているふりをするつもりはありませんが、これは非常に人気があり、さまざまなスコープで JavaScript を編成および実行する最も柔軟な方法であり、物事をグローバル スコープから除外しているようです。

しかし、私が今苦労しているのは、実行の観点からこのパターンを適切に利用する方法です。また、JavaScript を HTML Razor ビューから除外し、控えめな方法で作業するようにしています。

historyPage.GetHistoryでは、実際に実行する必要がある場合にのみ関数を呼び出すにはどうすればよいでしょうか。つまり、ユーザーが Web サイトの履歴ページに移動し、関数の結果が必要な場合のみです。

4

2 に答える 2

0

idコードを見ると、現在のページにofを持つ要素が含まれているかどうかを確認するのが最も簡単なテストのように思えますhistory-list。このようなもの：

var $histList = $('#history-list');

if($histList.length > 0){
    // EXECUTE THE CODE
}

ただし、実際に 1 つのページでのみ実行する必要がある場合は、共有 JavaScript ファイルの候補として適していない可能性があります。

于 2013-05-07T20:33:54.560 に答える
0

上記の質問で詳しく説明したコードを使用して、次のことを行うことで機能するようになりました。

_Layout.cshtml 内

    @if (IsSectionDefined("History"))
    {
      <script type="text/javascript">
          $(document).ready(function () {
            @RenderSection("History", required: false)
        });
      </script>
    }

History.cshtml 内

@section History
{
  historyPage.GetHistory();
}

コードは、ユーザーが Web サイトの履歴ページを要求した場合にのみ、必要に応じて実行されます。上記の@Dagg Nabbitからのコメントは、私が正しい軌道に乗っていると思っていたという点で私にカーブボールを投げました...うーん...

于 2013-05-07T22:03:22.383 に答える