mvc视图的JavaScript格式

Formatting of JavaScript for MVC3 views

本文关键字：格式 JavaScript 视图 mvc      更新时间：2023-09-26

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

目前我正在做的是:

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

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

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

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

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

@if( Model.SomeBoolValue ){
  @:$("#DOMelementID").hide();
}
如果有人能指点我正确的方向，我将不胜感激。在我失去对自己代码的控制之前，我需要得到更好的结构。

我建议你看一看jQuery插件的创作和组织你的javascript代码插件，你将附加到你的DOM元素

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

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

现在，如果您只是想在用户单击div时发送AJAX请求，例如，您可以始终使用HTML5 data-*属性(与ASP. js相同的方式)。. NET MVC 3不显眼的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();
}

所以从这里看来，你正在使用视图模型属性来显示/隐藏代码的部分。我的建议是这样的:JSON将这个模型序列化到视图中然后你可以开始将它的值传递给你新开发的jQuery插件:

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

现在在你的插件中，你可以访问视图模型的所有属性。

这就是你需要放在视图中的所有内容。所有其他的javascript代码当然会放在单独的javascript文件中，适当地组织在可重用的jQuery插件中。

是的，这是很困难的。

这是我们所做的，并为我们工作(粗体，因为它可能不适合你)

对于每个View/page，我们计算出JavaScript需要哪些模型属性才能做出决定(也称为"逻辑")。

我们也有一个部分的布局JavaScript。

然后在View/page中设置一个JavaScript属性，封装这些属性，如下所示:

@section JavaScript {
   <script type="text/javascript">
      yn.yp = {
          someBoolValue: @Model.SomeBoolValue,
          someOtheProp: '@Model.SomeOtherProp'
      }
   </script>
}

yn =您的命名空间，为您的项目/公司绑定全局命名空间。yp =你的页面，你设置JS属性。

然后在外部JS文件中:

$(function() {
   if (yn.yp.someBoolValue) {
      $("#elementid").hide();
   }
});

这也是一个非常干净的方式来处理客户端AJAX使用的路由URL。设置一个像yn.yp.urls这样的属性，并在视图中设置URL，然后JS可以很容易地访问它们，而无需任何硬编码。

总的来说，这里的目标是减少嵌入页面JavaScript中的服务器端代码。

为JS需要做决定的东西设置属性，然后让JS自己做决定。

希望你明白。

相关文章：