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

Question

我有一个ASP.NET MVC项目，该项目采用了许多JavaScript（jQuery和d3）。 我是Web开发的新手，所以我想寻求有关如何组织前端脚本代码的帮助。

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

这引入了两个问题：

1. 因为所有局部视图都将代码放在一个.js文件中，所以这使每个.js文件又大又复杂。
2. 因为我在加载_Layout.cshtml时对所有.js文件进行了硬编码初始化，所以即使未加载一个视图，也要执行其背后的.js听起来不太灵活。

所以这是我的问题：

1. 如何使每个局部视图都有自己的.js文件（将当前.js分成小块）。
2. 仅在加载部分视图的.js文件时，才可以加载和运行该视图。
3. 如果我使用TypeScript和KnockoutJS，它们在组织前端脚本代码方面是否有任何好处？

提前致谢。

Answer 1

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

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

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

KnockoutJS是应用于JavaScript的Model-View-ViewModel（MVVM）模式。 您可以在KnockoutJS中对每个js文件进行模块化，即分别为Model，View和ViewModel使用js，但是它们之间会相互依赖。（请参见documentaion ）

Answer 2

有多种方法可以为猫皮。 如果您具有特定于部分视图的javascript代码，那么只需跳过包含文件并通过<script>标记直接将JavaScript嵌入其中的步骤就可以了。 这解决了您发布的问题1和2，因为剃刀局部视图可以简化为在加载时插入DOM中的任意HTML。

至于TypeScript和KnockoutJS，它们提供的好处在很大程度上取决于您自己和您正在从事的项目。 我建议阅读他们提供的功能，看看这是否是您要追求的途径-对此没有正确或错误的答案，至少没有关于您正在从事的工作的很多特定上下文。