如何在 ASP.NET MVC 项目中组织前端 JavaScript 代码？

Question

我有一个采用大量 JavaScript（jQuery 和 d3）的 ASP.NET MVC 项目。我是 web 开发的新手，所以我想请教一些关于如何组织前端脚本代码的帮助。

我目前的方法是，'Views'下的每个文件夹只有一个对应的.js文件（这意味着该文件夹下的所有部分视图（.cshtml），共享该.js文件），我明确初始化所有.js我的项目文件在 _Layout.cshtml 的 $(document).ready() 中。

这引入了 2 个问题：

1. 由于所有的局部视图都将代码放在一个 .js 文件中，因此每个 .js 文件都会变得庞大而复杂。
2. 因为我在加载_Layout.cshtml时硬编码初始化了所有的.js文件，所以即使没有加载一个视图，它后面的.js也会被执行，听起来不够灵活。

所以这是我的问题：

1. 如何让每个局部视图都有自己的 .js 文件（将当前的 .js 分割成小块）。
2. 如何仅在加载局部视图时加载和运行局部视图的 .js 文件。
3. 如果我使用 TypeScript 和 KnockoutJS，它们对组织前端脚本代码有什么好处吗？

提前致谢。

Answer 1

将您的 javascript 代码拆分为多个文件，以便每个 js 文件对应于部分视图。

然后在局部视图中加载对应的js在局部视图中而不是_Layout.cshtml文件。这样，对应的js只有在分部视图加载完成的时候才会执行。

TypeScript 是一种适用于基本 javascript 的基于类的面向对象的编程风格，由 Microsoft 开发和维护。这无助于组织文件，但有助于以 OOP 风格维护 js 代码。（链接here）

KnockoutJS 是应用于 javascript 的 Model-View-ViewModel(MVVM) 模式。你可以在 KnockoutJS 中对每个 js 文件进行模块化，即 Model、View 和 ViewModel 的 js 是独立的，但是它们之间会有依赖关系。（见documentaion）

Answer 2

有多种方法可以给猫剥皮。如果您有特定于局部视图的 javascript 代码，则完全可以跳过包含文件并通过 <script> 标记将 JavaScript 直接嵌入其中的步骤。这解决了您发布的问题 1 和 2，因为 razor 部分视图归结为在加载时插入到 DOM 中的任意 HTML。

对于 TypeScript 和 KnockoutJS，它们提供的好处对于您自己和您正在从事的项目是高度主观的。我建议阅读他们提供的功能，看看这是否是您想要追求的途径——对此没有正确或错误的答案，至少没有很多关于您正在从事的工作的具体背景。