3

私はしばらくMVCで遊んでいますが、私が取り組んでいるプロジェクトがその帆に風を吹き込み始めているので、ますます多くの人々がそれに追加されています。私は「ベストプラクティス」を見つけるためにハッキングを担当しているので、JavaScriptの誤用の可能性に特に注意し、ビューと部分ビューをうまく再生するための最良の方法を見つけたいと思います。 javascriptを使用します。

今のところ、次のようなコードがあります（たとえば、簡略化されているだけです）

<script type="text/javascript">
    function DisableInputsForSubmit() {
        if ($('#IsDisabled').is(':checked')) {
            $('#Parameters :input').attr('disabled', true);
        } else {
            $('#Parameters :input').removeAttr('disabled');
        }
    }
</script>

<%=Html.SubmitButton("submit", Html.ResourceText("submit"), New With {.class = "button", .onclick = "DisableInputsForSubmit(); if ($('#EditParameters').validate().form()) {SetContentArea(GetHtmlDisplay('SaveParameters', 'Area', 'Controller'), $('#Parameters').serialize());} return false;"})%><%=Html.ResourceIcon("Save")%>

ここでは、フォームを保存してサーバーに投稿していますが、チェックボックスがオンになっている場合は検証したくない入力を無効にします。

少しコンテキスト

  • Html.Resource*ビットは無視してください。これはリソース管理ヘルパーです。
  • SetContentAreaメソッドはajax呼び出しをラップし、GetHtmlDisplayはエリア、コントローラー、およびアクションに関するURLを解決します
  • サードパーティのライブラリの圧縮、縮小、提供を処理するcombresがインストールされており、再利用可能なjavascriptとして明確に識別されています。

私の問題は、他の誰かがDisableInputsForSubmit別のレベル（たとえば、マスターページまたは別のjavascriptファイル）で関数を定義すると、問題が発生する可能性があることです。

ウェブ上の多くのビデオ（jQueryの設計に関するResig 、またはjavascriptの良い部分についてのGoogleでの彼の講演のためのDouglas Crockford ）は、ライブラリ/フレームワークでの名前空間の使用について話します。これまでのところ良いですが、この場合、それは少しやり過ぎに見えます。推奨される方法は何ですか？するべきか：

  • 名前空間内にフレームワーク全体を作成し、アプリケーションでグローバルに参照しますか？この方法のように小さなものには多くの作業が必要なようです
  • スケルトンフレームワークを作成し、ビュー/部分でローカルJavaScriptを使用して、使用状況に応じて、最終的にインラインJavaScriptの一部をフレームワークステータスにプロモートしますか？この場合、インラインJavaScriptを他のビュー/部分からきれいに分離するにはどうすればよいですか？
  • 問題が発生した場合でも、心配せずにUIテストに依存して問題を検出しますか？

実際のところ、私が書いた別のファイルにあるJSコードでさえ、あなたの答えから恩恵を受けると思います:)

4

1 に答える 1

3

安全性/ベスト プラクティスの問題として、常にモジュール パターンを使用する必要があります。属性にJavaScript を押し込むのではなく、イベント ハンドラーも使用するonclickと、名前の競合を心配する必要がなくなり、js が読みやすくなります。

<script type="text/javascript">
(function() {
    // your button selector may be different
    $("input[type='submit'].button").click(function(ev) {
        DisableInputsForSubmit();

        if ($('#EditParameters').validate().form()) {  
            SetContentArea(GetHtmlDisplay('SaveParameters', 'Area','Controller'), $('#Parameters').serialize());
        } 
        ev.preventDefault();
    });

    function DisableInputsForSubmit() {
        if ($('#IsDisabled').is(':checked')) {
            $('#Parameters :input').attr('disabled', true);
        } else {
            $('#Parameters :input').removeAttr('disabled');
        }
    }
})();
</script>

必要に応じて、これを外部ファイルに抽出するのは簡単です。

コメントに応じて編集：

関数を再利用可能にするには、名前空間を使用するだけです。このようなもの：

(function() {

    MyNS = MyNS || {};

    MyNS.DisableInputsForSubmit = function() {
        //yada yada
    }

})();
于 2010-09-14T14:59:07.977 に答える