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

我已经和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")%>

在这里,我们将保存一个表单并将其发布到服务器,但是我们禁用了不想验证是否已选中复选框的输入.

a bit of context

• Please ignore the Html.Resource* bits, it’s the resource management
  helpers
  
• The SetContentArea method wraps ajax calls, and GetHtmlDisplay
  resolves url regarding an area,
  controller and action
• We’ve got combres installed that takes care of compressing, minifying
  and serving third-parties libraries and what i’ve clearly identified as reusable javascript

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

网络上有很多视频(关于jQuery设计的参考资料,或者在Google上有关javascript的好部分的道格拉斯·克罗克福德(Douglas Crockford),他在Google上的演讲)都讨论了如何在库/框架中使用命名空间.
到目前为止还算不错,但是在这种情况下,它看起来有些过分了.推荐的方法是什么？我是不是该：

>在名称空间内创建整个框架,并在应用程序中全局引用它？对于这种方法如此微小的事情,看起来工作量很大
>创建一个框架框架,并在我的视图/局部视图中使用本地javascript,最终根据我们的使用情况将部分内联javascript提升为框架状态.在这种情况下,如何将内联javascript与其他视图/部分完全隔离？
>不用担心并依靠UI测试来发现问题吗？

事实上,我认为即使我在单独文件中编写的JS代码也将从您的答案中受益：)

解决方法:

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

})();

标签：javascript-framework,javascript,asp-net-mvc
来源： https://codeday.me/bug/20191209/2096665.html