如何在查看/ PartialView正确使用JavaScript的命名空间 [英] How to use javascript namespaces correctly in a View / PartialView

问题描述

我一直在玩MVC有一段时间了，但由于该项目我在开始变得顺风顺水越来越多的人加入其中。因为我负责的黑客到处找了一些最佳实践的时候，我很担心的JavaScript的可能的误用特别谨慎，想找出什么是将有我们的观点和看法偏发挥很好的最好方式使用javascript。

i've been playing with MVC for a while now, but since the project i'm on is starting to get wind in its sails more and more people are added to it. Since i'm in charge of hacking around to find out some "best practice", i'm especially wary about the possible misuses of javascript and would like to find out what would be the best way to have our views and partial views play nicely with javascript.

目前，我们遇到code，看起来像这样（只简化例如的缘故）

For the moment, we're having code that looks like this (only simplified for example's sake)

<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")%>

下面，我们节省了表格，并发布到服务器，但我们禁用的投入，我们不希望验证是否选中复选框。

Here, we're saving a form and posting it to the server, but we disable inputs we don't want to validate if a checkbox is checked.

有点背景

  
• 请忽略Html.Resource *位，它的资源管理
    佣工

  
• 的SetContentArea方法包装Ajax调用，并GetHtmlDisplay
    关于解决一个区域的URL，
    控制器和动作

  
• 我们已经有了combres安装需要COM pressing，缩小文件的护理
    并提供第三方库和我所明确认定为可重用的JavaScript

  

我的问题是，如果别人在另一个层面上定义一个函数 DisableInputsForSubmit （假设母版页，或在另一个javascript文件），可能会出现问题。

My problem is that if somebody else defines a function DisableInputsForSubmit at another level (let's say the master page, or in another javascript file), problems may arise.

在网络上的视频地段（ Resig的的jQuery的设计，或道格拉斯Crockford的的为他在谷歌谈论的JavaScript的好的部分）谈论使用命名空间中的库/框架。
到目前为止好，但在这种情况下，看起来有点矫枉过正。什么是去推荐的方式？我应该：

Lots of videos on the web (Resig on the design of jQuery, or Douglas Crockford for his talk at Google about the good parts of javascript) talk about using the namespaces in your libraries/frameworks. So far so good, but in this case, it looks a bit overkill. What is the recommended way to go? Should i:

• 创建一个命名空间中的整体框架，并在全球范围内的应用程序引用它？貌似很多工作的东西如此的渺小，因为这方法


• 创建一个骨架的框架，并在我的意见/谐音使用本地的javascript，最终推动内嵌的JavaScript框架来状态的部分，这取决于我们的使用情况如何？在这种情况下，我怎么能干净地分离从其它视图/谐音内嵌的JavaScript？


• 请不要担心，靠UI测试赶上问题，如果它发生？

由于事实上，我认为，即使是JS code我写的是一个单独的文件会从你的回答中受益：）

As a matter of fact, i think that even the JS code i've written that is in a separate file will benefit from your answers :)

推荐答案

由于安全/最佳实践的问题，你应该总是使用模块模式。如果还使用事件处理程序，而不是推搡的JavaScript到的onclick 属性，您不必担心命名冲突，你的JS是更容易阅读：

As a matter of safety/best practice, you should always use the module pattern. If you also use event handlers rather than shoving javascript into the onclick attribute, you don't have to worry about naming conflicts and your js is easier to read:

<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>

这是十分容易，如果你决定要提取到外部文件。

This is trivially easy to extract into an external file if you decide to.

修改回应评论：

要进行功能可重复使用的，我只想用一个命名空间，是的。事情是这样的：

To make a function re-usable, I would just use a namespace, yes. Something like this:

(function() {

    MyNS = MyNS || {};

    MyNS.DisableInputsForSubmit = function() {
        //yada yada
    }

})();

这篇关于如何在查看/ PartialView正确使用JavaScript的命名空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！