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

时间:2015-05-20 02:52:27

标签: javascript asp.net-mvc

我有一个ASP.NET MVC项目,它采用了大量的JavaScript(jQuery和d3)。我是Web开发的新手,所以我想请求一些关于如何组织前端脚本代码的帮助。

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

这引入了两个问题:

  1. 因为所有部分视图都将代码放在一个.js文件中,所以它会使每个.js文件变得庞大而复杂。
  2. 因为我在加载_Layout.cshtml时硬编码初始化所有.js文件,所以即使没有加载一个视图,也会执行其后面的.js,听起来不灵活。
  3. 所以这是我的问题:

    1. 如何使每个局部视图都有自己的.js文件(将当前的.js分成小块)。
    2. 如何在加载部分视图时加载和运行部分视图的.js文件。
    3. 如果我使用TypeScript和KnockoutJS,它们是否为组织前端脚本代码提供了任何好处?
    4. 提前致谢。

2 个答案:

答案 0 :(得分:0)

皮肤猫有多种方法。如果您有特定于部分视图的JavaScript代码,那么只需跳过包含文件并通过static标记直接在其中嵌入JavaScript的步骤即可。这解决了您发布的问题1和2,因为剃刀部分视图可以归结为在加载时插入到DOM中的任意HTML。

对于TypeScript和KnockoutJS,他们提供的好处对您自己和您正在进行的项目非常主观。我建议阅读他们提供的功能,看看这是否是你想要追求的途径 - 对此没有正确或错误的答案,至少没有关于你正在做什么的很多具体背景。

答案 1 :(得分:0)

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

然后在局部视图中加载相应的js而不是_Layout.cshtml文件。这样,只有在加载局部视图时才会执行相应的js。

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

KnockoutJS是应用于javascript的Model-View-ViewModel(MVVM)模式。您可以模块化KnockoutJS中的每个js文件,即为Model,View和ViewModel分隔js,但它们将相互依赖。(参见documentaion