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

Question

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

我目前的做法是，'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代码，则完全可以跳过包含文件并通过<script>标记直接嵌入JavaScript的步骤。这可以解决你发布的问题1和问题2，因为剃须刀局部视图可以归结为在加载时插入到DOM中的任意HTML。

至于TypeScript和KnockoutJS，他们提供的好处对您自己和您正在开发的项目非常主观。我建议您阅读他们提供的功能，看看这是否是您想要追求的途径 - 对此没有正确或错误的答案，至少没有针对您正在处理的具体情况。

Answer 2

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

然后在部分视图的部分视图中加载相应的js而不是_Layout.cshtml文件。这样，相应的js将仅在部分视图被加载时执行。

TypeScript是一种基于类的面向对象编程风格，适用于由微软开发和维护的基本JavaScript。这不利于组织文件，但有助于将Js代码保持为OOP风格。（链接here）

KnockoutJS是应用于JavaScript的Model-View-ViewModel（MVVM）模式。你可以在KnockoutJS中模块化每个js文件，也就是说，将模型，视图和视图模型分开为js，但是它们会相互依赖（见documentaion）