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

2019-12-09 04:35:50 阅读：219 来源： 互联网

标签：javascript-framework javascript asp-net-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")%>

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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