ASP.net MVC - 视图和 jQuery 最佳实践

Question

我正在尝试找出在 MVC 应用程序中使用 jQuery 的最佳实践。具体来说，我想知道我应该怎么做，以免我的所有观点都被单独的 document.ready 语句弄得一团糟。

举个例子：

我有以下观点：

/Views/Shared/_Layout.cshtml
/Views/Home/Index.cshtml
/Views/Home/_Dialog.cshtml
/Views/Home/_AnotherDialog.cshtml

我有一个控制器动作，它将呈现主页/索引视图，它使用布局并呈现两个部分视图（或编辑器模板、显示模板等）。这一控制器操作已呈现 4 个或更多视图。每个视图都使用一些 jquery document.ready 代码。

目前，我在每个视图的底部都有代码：

// In Index
<script type="text/javascript">
    $(function() {
        $('#tabs').tabs()
    });
</script>

// In _Dialog
<script type="text/javascript">
    $(function() {
        $('#some-dialog').dialog( ... );
    });
</script>

我知道这不是一个很好的做法，因为它已经在我的小项目中变得难以管理。当我有大量页面都需要一些 jQuery / javascript 初始化代码在几十个视图中分开时，有哪些好的做法可以遵循？

Answer 1

您可以按照 Telerik 对他们的 javascript 注册器所做的事情做一些事情。基本上，让这个注册器在你的视图模型中可用。在最简单的层面上，它所要做的就是跟踪添加到它的字符串：

public class JavascriptRegistrar
{
    private StringBuilder jsBuilder_ = new StringBuilder();

    public Add(string js)
    {
        builder.Append(js).Append('\n');
    }


    public string ToString()
    {
        return "<script type=\"text/javascript\">" + jsBuilder_.ToString() + "\n</script>";
    }
 }

渲染时您的局部视图将添加到此：

<h1>In my view!</h1>

@Model.Registrar.Add("$function() { /* ... */ }")

最后，在主视图的底部，完成后：

@Model.Registrar.ToString()

这将写出它在渲染期间收集的所有 javascript。

Answer 2

如果初始化是特定于视图的，并且您知道它肯定不会在该视图之外使用，例如某些特定于页面的行为，那么只需将其留在视图中！

只要您不在视图之间复制 js，在所有视图中都有脚本标签并没有错。我认为人们在这种情况下倾向于误解“关注点分离”，并认为这仅仅意味着“不惜一切代价让不同的语言彼此远离”......这是错误的，很明显，如果某些页面初始化逻辑/行为特定于某个页面，然后 html 和 js 本质上是相互“关心”的，因此将 js 移动到单独的文件中并不是真正的“好习惯”，如果有的话，它会使您的代码更难理解。

我个人喜欢打开一个视图，一打开它就可以看到所有特定于该页面的 js 和 css，使其美观且可读。但是，显然如果需要共享代码，那么您需要将其从您的视图中取出并进入您的脚本文件夹，以便任何东西都可以引用它！

编辑

在您上面的示例中，我在您的索引视图中看到您初始化了选项卡。这很好，但是，如果您在项目的其他位置添加了选项卡，那么使用.tabs 类而不是#tabs id 创建选项卡可能会更好，然后在外部 js 文件中初始化所有通过调用$('.tabs') 来一次标签。