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

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

在所有视图中使用脚本标记没有任何问题，只要您不在视图之间复制js即可。我认为在这种情况下，人们倾向于误解“关注点分离”，并认为这仅仅意味着“不惜一切代价保持不同语言彼此远离”......这是错误的，如果某些页面初始化逻辑/行为特定于页面，然后html和js本质上'关注'彼此，因此将js移动到一个单独的文件并不是真正的“良好实践”，如果有任何事情，它会使你的代码更难理解。

我个人喜欢打开一个View，并且能够在打开它时立即查看特定于该页面的所有js和css，使其变得美观可读。但是，很明显，如果代码需要共享，那么你需要将它从视图中删除并进入你的脚本文件夹，因为任何东西都可以引用它！

修改

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

Answer 2

您可以按照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。

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

2 个答案: