代码之家 › 专栏 › 技术社区 › samy

如何在视图/部分视图中正确使用javascript名称空间

javascript-framework asp.net-mvc javascript

samy · 技术社区 · 14 年前

我已经玩MVC有一段时间了,但是自从我参与的项目开始风生水起,越来越多的人加入了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.资源*比特,这是资源管理助手

SetContentArea方法包装ajax调用和GetHtmlDisplay 解析有关区域的url, 控制器和动作

我们已经安装了梳子,负责压缩,缩小以及服务于第三方库和我已经明确指出的可重用javascript

DisableInputsForSubmit 在另一个级别(比如母版页,或者在另一个javascript文件中),可能会出现问题。

关于jQuery的设计,或者 道格拉斯·克罗克福德 他在Google上谈到javascript的优点)谈到在库/框架中使用名称空间。到目前为止还不错,但在这种情况下,它看起来有点杀伤力过大。推荐的方法是什么?我应该:

在命名空间中创建一个完整的框架,并在应用程序中全局引用它?像这种方法这么小的东西看起来要做很多工作
创建一个框架框架,并在我的视图/部分中使用本地javascript,最终将部分内联javascript提升到框架状态,这取决于我们的使用情况?在这种情况下,如何将内联javascript与其他视图/部分清晰地隔离开来?

1 回复 | 直到 14 年前

Gabe Moothart 14 年前

出于安全/最佳实践的考虑,您应该始终使用模块模式。如果您还使用事件处理程序而不是将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
    }

})();