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 文件中），可能会出现问题。

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

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