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

What's a good way to organize external JavaScript file(s)?

本文关键字：文件 方法 JavaScript 外部 什么      更新时间：2023-09-26

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

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

对此有何思考？

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

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

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

不过，这些问题中的第一个问题并不那么严重。如果你有一个像注册页面这样的东西，每个人都首先访问并花费一些时间（填写表单等），一旦加载了 html，该页面就会显示，并且 js 可以在后台加载，而用户无论如何都忙于表单。

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

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

假设您在指示"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);之后的代码，我只是想尽可能简短！

为了完成此操作，我有一个注册表黑客，它会导致任何 *.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 的根级文件夹中，并且在我的基页类中也有一些代码来添加这些引用。这应该很简单，可以弄清楚。希望这对某人有所帮助。

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

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

可选文字 http://www.roosteronacid.com/js.jpg

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

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

Default.aspx
Default.aspx.js

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

相关文章：