如何在 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， 控制器和动作
• 我们已经安装了负责压缩、缩小的梳子 并为第三方库和我明确标识为可重复使用的 javascript 提供服务

我的问题是，如果其他人在另一个级别（比如说母版页，或者在另一个 javascript 文件中）定义了一个函数 DisableInputsForSubmit，则可能会出现问题。

网络上的许多视频（Resig 介绍了 jQuery 的设计，或 Douglas Crockford 介绍了他在 Google 上关于 javascript 的优点的演讲）谈论使用库/框架中的命名空间。 到目前为止一切都很好，但在这种情况下，它看起来有点矫枉过正。推荐的方式是什么？我应该：

• 在命名空间内创建一个完整的框架，并在应用程序中全局引用它？看起来像这种方法这样微小的东西需要做很多工作
• 创建一个骨架框架，并在我的视图/部分中使用本地 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
    }

})();