如何在View / PartialView中正确使用javascript命名空间

时间:2010-09-14 14:40:41

标签: javascript asp.net-mvc javascript-framework

我现在已经和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   解析一个区域的网址,   控制器和行动
  •   
  • 我们安装了combres,负责压缩,缩小   和服务第三方图书馆以及我已经明确指出的可重复使用的javascript
  •   

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

网页上的很多视频( Resig 关于jQuery的设计,或者 Douglas Crockford ,因为他在谷歌谈论javascript的好处)谈论使用库/框架中的名称空间。 到目前为止这么好,但在这种情况下,它看起来有点矫枉过正。推荐的方式是什么?我应该:

  • 在命名空间内创建一个完整的框架,并在应用程序中全局引用它?对于像这种方法这么小的东西看起来很多工作
  • 创建一个骨架框架,并在我的views / partials中使用本地javascript,最终将部分内联javascript提升为框架状态,具体取决于我们的用法?在这种情况下,我如何干净地隔离内联JavaScript与其他视图/部分?
  • 如果发生问题,请不要担心并依赖UI测试来解决问题?

事实上,我认为即使我写的JS代码在一个单独的文件中也会从你的答案中受益:)

1 个答案:

答案 0 :(得分: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
    }

})();