在包含大量 HTML 页面的 ASP.NET Web 应用程序中，大量内联 JavaScript 函数正在积累。将它们组织成外部文件的好计划是什么？大多数函数都特定于为其编写的页面，但少数函数与整个应用程序相关。
单个文件可能会变得非常大。对于 C# 等，我通常将文件至少分成一个包含通用函数和类的文件，以便我可以将同一个文件用于其他应用程序，以及一个用于该应用程序特定的函数和类的文件。不过，我不认为大文件对 Web 应用程序的性能有好处。
这方面的想法是什么？
【问题讨论】：
标签： javascript
您可能希望每个页面都将其特定于页面的 JavaScript 放在一个位置，然后将所有共享的 JavaScript 放在一个大文件中。如果您对大文件进行 SRC，那么您的用户的浏览器将在第一次加载时缓存 JavaScript 代码，并且文件大小不会成为问题。如果您特别担心，可以将 JavaScript 源代码打包/缩小为“可分发”形式并节省几千字节。
【讨论】：
更新：我在a blog post 中对此进行了更深入的解释。
假设当您指出“HTML 页面”时您指的是 .aspx 页面，我会这样做：
假设我有一个名为 foo.aspx 的页面，并且我有特定于它的 JavaScript。我将 .js 文件命名为 foo.aspx.js。然后我在 base 页面类中使用类似的东西（即我的所有页面都继承自这个类）：
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 版本，注册表 hack 会有所不同。这是我与 Windows XP 一起使用的一对（我不知道它们是否与 Vista 不同，因为我不使用 Vista） - 将每个文件复制到一个文本文件中，然后用 . reg 扩展名，然后执行文件：
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\8.0\Projects\{E24C65DC-7377-472b-9ABA-BC803B73C61A}\RelatedFiles\.aspx\.js]
@=""
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 的根级文件夹中，并且在我的基本页面类中还有一些代码可以添加这些引用。这应该很简单，可以弄清楚。希望这对某人有所帮助。
【讨论】：
我建议如果您将 JS 拆分为单独的文件，不要使用大量标签来包含它们，这会降低页面加载性能。相反，使用服务器端包含在它们离开服务器之前内联它们。
【讨论】：
将“命名空间”与文件夹结构一起使用：
alt text http://www.roosteronacid.com/js.jpg
您所要做的就是包含 Base.js，因为该文件设置了所有命名空间。以及您要在给定页面上使用的 .js 文件（类）。
就特定于页面的脚本而言，我通常根据 ASPX/HTML 页面来命名脚本：
Default.aspx
Default.aspx.js
【讨论】：
它还取决于用户会话的生命周期。如果用户可能会访问多个页面并在站点上花费很长时间，则单个大文件可能值得初始加载，因为它已被缓存。如果用户更有可能来自谷歌并且只点击一个页面，那么每个页面只包含单个文件会更好。
【讨论】：
每个请求都有一些开销，因此总体而言，您可以通过将它们全部组合到一个文件中来提高性能。但是，它可能会减慢用户访问第一页的加载时间，并且如果某些用户从不需要您的 js 的某些部分，它可能会导致无用的流量。
不过，这些问题中的第一个问题并没有那么严重。如果您有类似注册页面之类的东西，每个人都会首先访问并花费一些时间（填写表格等），一旦加载了html，页面就会显示出来，并且js可以在用户加载时在后台加载无论如何都忙于表格。
我会在开发过程中将 js 组织成不同的文件，即。 e.一个用于一般的东西，一个用于每个模型，然后在构建过程中将它们组合成一个文件。此时您也应该使用compression。
【讨论】：
单个文件很大但已缓存。太多的小文件意味着对服务器的更多请求。这是一个平衡的行为。使用 Firebug 和 YSlow 等工具来衡量您的性能并找出最适合您的应用程序的方法。
【讨论】：