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

我有一个控制器操作，将呈现Home/Index视图，它使用布局并呈现两个部分视图（或编辑模板、显示模板等）。这个控制器操作已经呈现了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初始化代码时，有哪些好的做法可以遵循？

- Dismissile

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代码。

- Moo-Juice

Answer 2

如果初始化是特定于视图的，并且您确信它绝对不会在该视图之外使用，例如某些页面特定行为，则只需将其保留在视图中即可！

在所有视图中拥有脚本标记并没有什么问题，只要您不会在视图之间复制js。我认为人们倾向于误解这种情况下的“关注分离”，并认为这仅意味着“以任何代价使不同语言彼此分离”...那是错误的，显然，如果某个页面初始化逻辑/行为是特定于页面的，则html和js本质上“关注”彼此，因此将js移入单独的文件实际上并不是“良好的做法”，如果有什么的话，它会使您的代码更难理解。

我个人喜欢打开一个视图，并能够在打开它时看到与该页面特定的所有js和css，这使其易于阅读。但是，如果需要共享代码，则需要将其从视图中删除，并将其放入脚本文件夹中，以便可以被任何内容引用！

编辑：

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

- jcvandan

---

我对将它们全部分开保持独立的问题（即使它们是特定于视图的）是在单个页面上有10个或更多不同的document.ready处理程序。我不确定这样做是否会影响性能。 - Dismissile

我非常怀疑它会对性能产生任何影响，它只是将您的代码添加到队列中，在就绪事件触发时运行。即使存在性能损失，您也永远不会超过几个添加到队列中，例如一个用于布局，一个用于视图，还有一些额外的用于外部文件...绝对不是问题！ - jcvandan