如何在View / PartialView中正確使用javascript命名空間

Question

我一直在玩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

我的問題是，如果其他人在另一個級別（比如母版頁或其他javascript文件）中定義了一個函數DisableInputsForSubmit ，則可能會出現問題。

網絡上的很多視頻（關於jQuery設計的Resig ，或者他在Google上關於javascript的好處的Douglas Crockford ）討論了在庫/框架中使用命名空間。 到目前為止這么好，但在這種情況下，它看起來有點矯枉過正。 推薦的方式是什么？ 我是不是該：

• 在命名空間內創建一個完整的框架，並在應用程序中全局引用它？ 對於像這種方法這么小的東西看起來很多工作
• 創建一個框架框架，並在我的views / partials中使用本地javascript，最終將部分內聯javascript提升為框架狀態，具體取決於我們的用法？ 在這種情況下，我如何干凈地隔離內聯JavaScript與其他視圖/部分？
• 如果有問題，請不要擔心並依靠UI測試來解決問題？

事實上，我認為即使我寫的JS代碼在一個單獨的文件中也會受益於你的答案:)

Answer 1

作為安全/最佳實踐，您應始終使用模塊模式。 如果你也使用事件處理程序而不是將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
    }

})();