组织外部JavaScript文件的好方法是什么？

Question

在具有大量HTML页面的ASP.NET Web应用程序中，许多内联JavaScript函数正在积累。 将它们组织成外部文件的好计划是什么？ 大多数函数特定于编写它们的页面，但有些函数与整个应用程序相关。

单个文件可能会变得非常大。 使用C＃等，我通常将文件至少划分为包含一般函数和类的文件，以便我可以将同一文件用于其他应用程序，并将一个文件用于特定于此应用程序的函数和类。 但是，我不认为大文件对Web应用程序的性能有好处。

这方面的想法是什么？

Answer 1

您可能希望每个页面在一个位置具有特定于页面的JavaScript，然后在大文件中包含所有共享JavaScript。 如果SRC是大文件，那么用户的浏览器将在第一次加载时缓存JavaScript代码，文件大小不会成为问题。 如果您特别担心它，可以将JavaScript源打包/缩小为“可分发”形式并节省几千字节。

Answer 2

单个文件很大但是缓存了。 太多的小文件意味着对服务器的请求越多。 这是一种平衡的行为。 使用Firebug和YSlow等工具来衡量您的性能并找出最适合您应用的产品。

Answer 3

每个请求的开销都有一些，所以总的来说，通过将它们全部组合到一个文件中，可以提高性能。 但是，它可能会减慢用户访问的第一页上的加载时间，如果某些用户从不需要您的某些部分，则可能会导致无用的流量。

但是，这些问题中的第一个并不是那么成问题。 如果您有一个注册页面，每个人都先访问并花费一些时间（填写表格等），一旦加载html，页面将显示，并且js可以在后台加载，而用户是反正忙着表格。

我会在开发过程中将js组织成不同的文件，即一个用于一般内容，一个用于每个模型，然后在构建过程中将它们组合成一个文件。 此时你也应该进行压缩 。

Answer 4

更新：我在博客文章中对此进行了更深入的解释。

假设您在表示“HTML页面”时表示.aspx页面，这就是我的工作：

假设我有一个名为foo.aspx的页面，我有特定于它的JavaScript。 我将.js文件命名为foo.aspx.js. 然后我在基页类中使用这样的东西（即我的所有页面都继承自这个类）：

protected override void OnLoad(EventArgs e)
{
   base.OnLoad(e);
   string possiblePageSpecificJavaScriptFile = string.Format("{0}.js", this.TemplateControl.AppRelativeVirtualPath);
   if (File.Exists(Server.MapPath(possiblePageSpecificJavaScriptFile)) == true)
   {
      string absolutePath = possiblePageSpecificJavaScriptFile.Replace("~", Request.ApplicationPath);
      absolutePath = string.Format("/{0}", absolutePath.TrimStart('/'));
      Page.ClientScript.RegisterClientScriptInclude(absolutePath, absolutePath);
   }
}

因此，对于我的应用程序中的每个页面，这将查找与页面名称匹配的* .aspx.js文件（在我们的示例中为foo.aspx.js），并在呈现的页面中放置脚本标记引用它。 （ base.OnLoad(e);之后的代码base.OnLoad(e);最好被提取出来，我只是想尽可能地缩短它！）

为了完成这个，我有一个注册表黑客会导致任何* .aspx.js文件在Visual Studio的解决方案资源管理器中的* .aspx页面下崩溃（即它将隐藏在页面下方，就像* .aspx一样。 cs文件确实）。 根据您使用的Visual Studio的版本，注册表黑客是不同的。 以下是我在Windows XP中使用的一对（我不知道它们是否与Vista不同，因为我不使用Vista） - 将每个文件复制到文本文件中并使用.reg扩展名重命名，然后执行文件：

Visual Studio 2005

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\8.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@=""

Visual Studio 2008

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@=""

在生效之前，您可能需要重新启动计算机。 此外，嵌套仅适用于新添加的.js文件，任何已经命名为* .aspx.js的文件都可以通过将它们重新添加到项目或手动修改.csproj文件的XML来嵌套。

无论如何，这就是我做事的方式，它确实有助于保持井井有条。 对于包含常用JavaScript的JavaScript文件，我将它们保存在一个名为JavaScript的根级文件夹中，并在我的基页类中添加一些代码来添加这些引用。 这应该很简单，可以搞清楚。 希望这有助于某人。

Answer 5

它还取决于用户会话的生命周期。 如果用户可能会访问多个页面并在网站上花费很长时间，那么单个大文件在缓存时可能值得初始加载。 如果用户更有可能来自谷歌而只是点击一个页面，那么每页只有一个单独的文件会更好。

Answer 6

将“命名空间”与文件夹结构一起使用：

替代文字http://www.roosteronacid.com/js.jpg

您所要做的就是包含Base.js ，因为该文件设置了所有命名空间。 以及要在给定页面上使用的.js文件（类）。

就页面特定的脚本而言，我通常根据ASPX / HTML页面命名脚本：

Default.aspx
Default.aspx.js

Answer 7

我建议如果你将JS拆分成单独的文件，你不会使用大量的标签来包含它们，那将会破坏页面加载性能。 相反，使用服务器端包含在它们离开服务器之前内联它们。