javascript - 为 MVC3 View 格式化 JavaScript

Question

我现在已经尝试了很多不同的方法来组织特定于每个 View 的 JavaScript，但我还没有找到任何让我觉得舒服的方法。反正看起来很乱。可能(并希望)这是因为我使用 JavaScript 的时间不长，而且有一种很好的方法可以做到这一点。

目前我正在做的是:

在我的布局文件中，除了 RenderBody 之外，我还有一个用于脚本的 RenderSection。此部分包含与每个单独 View 相关的所有 JavaScript。全局脚本隐藏在它自己的文件中。

在这个部分中有很多不同的 JavaScript 部分(对于我最大的 View ，目前大约有 600 行 JavaScript):

• 变量的一些定义和设置不同的设置(jQuery 设置等)。
• 在屏幕上隐藏不同的 DOM 元素，这些元素将在用户稍后与 View 交互时显示。
• 许多用于链接到 DOM 元素的不同事件的 jQuery 代码 (click/keyup++)
• 一些代码重构为方法，因为它们被不同的 jQuery 事件使用。

这里我不喜欢的地方主要有两点:

• 所有这些代码都放在一个大代码块中，很难找到我要查找的脚本部分。基本上，随着脚本的增长，它变得非常难以维护。
• 脚本与 View 位于同一文件中。我想将脚本放入一个单独的文件中，但我不能，因为我使用了模型的不同部分，以及脚本中的一些 HtmlHelpers。例如，在我执行一些 $.post 调用的地方，我使用 @Url.Action('...') 将其链接到正确的操作方法，以确保我的脚本将继续工作即使我改变了我的路线。 我还使用模型来决定某些元素是否应该像这样开始隐藏(这是让它开始隐藏的好方法，还是有更好的方法？即使我不能把它看起来有点老套我的手指在上面):

代码

@if( Model.SomeBoolValue ){
  @:$("#DOMelementID").hide();
}

非常感谢一些让我朝着正确方向前进的指示。在我失去对自己代码的控制之前，我需要更好地构建它。

Answer 1

我建议您看看 jQuery plugin authoring并根据您将附加到 DOM 元素的插件来组织您的 JavaScript 代码。

就 @Url.Action('...') 问题而言，有许多方法可以解决此问题并将您的脚本外部化到单独的文件中。例如，假设您正在对现有表单或已包含 url 的 ActionLink 进行 AJAX 化:

$('#myAnchor').click(function() {
    // use this.href to fetch the url
    $.post(this.href, function(result) {

    });
    return false;
});

现在，如果您只是想在用户点击一个 div 时发送一个 AJAX 请求，您总是可以使用 HTML5 data-* 属性(与 ASP.NET MVC 3 unobtrusive AJAX 和验证的工作方式相同)来定义它DOM 元素上的 url:

<div id="mydiv" data-url="@Url.Action("Some Action")">click me</div>

现在在一个单独的文件中

$('#mydiv').click(function() {
    var url = $(this).data('url');
    $.post(url, function(result) {

    });
});

如果您遵循我关于编写 jQuery 插件的第一个建议，您的代码将如下所示:

$('#mydiv').myplugin();

现在让我们考虑以下片段:

@if(Model.SomeBoolValue) {
    @:$("#DOMelementID").hide();
}

因此，从此处看来，您正在使用 View 模型属性来显示/隐藏代码部分。好的，这就是我可能会建议你的:JSON 将这个模型序列化到 View 中，然后你可以开始将值从它传递到你新开发的 jQuery 插件:

<script type="text/javascript">
     var model = @Html.Raw(Json.Serialize(Model));
     // now configure configure your plugins, for example
     $('#mysection').myplugin({ model: model });
</script>

现在在您的插件中，您可以访问 View 模型的所有属性。

这就是您需要放入 View 中的全部内容。所有其他 javascript 当然会在单独的 javascript 文件中，并在可重用的 jQuery 插件中适本地组织。