处理 javascript 和 css 文件的最佳实践是什么

Question

您如何管理 ASP.NET 项目中的所有.js和.css文件？ 尤其是当他们彼此之间有很多依赖关系时？

我将所有脚本合二为一。 但它变得很重要，其中 90% 没有在特定页面上使用。 我想要的是管理所有这些脚本的工具或指南，简单的依赖项管理，有助于在页面上仅包含此页面所需的那些 JS 和 CSS。

当您使用大量控件时，还使用了 ScriptManager 螺母，它非常方便......也许我以错误的方式使用它。

Answer 1

在我们的项目中，我们将脚本和 CSS 标记为 class 的资源，然后在页面生命周期中注册它们，通常在 PreRender() 中。

例如：

// Css
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")]
// Javascript
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")]
namespace OurNamespace
{
   public class MyClass...

然后，我们将每个脚本和 css 文件的属性设置为嵌入式资源。

这种方法使您可以将脚本分开并针对各个 UI 组件。 您可以将相同的资源注册到多个类，然后 ScriptManager 将负责确保正确的资源显示在页面上。

We then wrote a class at the HTTP handler level that handles compressing all the CSS resources into one file before it's streamed out, to make sure we didn't hit the 32 CSS file limit for IE6. 它还从我们的脚本中去除空格、注释等，以优化 javascript output。

Answer 2

这就是我通常的做法：

CSS：最初有 5 个文件。 reset.css (from YUI), structure.css, general.css (borders, backgrounds, z-index etc), typography.css and base.css which imports the 4 other css files.

Javascript：我所做的是采用 ASP.NET 思想背后的代码并将其应用于我的 JS 文件的命名。 示例：home.aspx 的页面特定 JS 文件称为 home.aspx.js。 然后，我将拥有基于插件或功能的单独 JS 文件，可能还有一个包含所有全局变量的 common.js。

这可能不是每个人的一杯茶，但我希望能给你一些想法！

Answer 3

我更喜欢根据它们的 function 划分我的 JS 文件 - 例如，我可以为所有基于 AJAX 的交互创建一个 JS 文件，一个用于所有验证，一个用于整个 Z2567A6DZZ840 通用的所有函数的通用 JS 库。 拥有一个将整个 JS 脚本组合成一个文件的文件肯定会减慢应用程序的速度，因为每个页面都会加载整个文件，即使只有一小部分可能是相关的。

对于 CSS 文件，我更喜欢使用单个通用样式表，其中包含可用于整个应用程序的通用 styles。 我还可以为具有非常特定布局结构的页面创建单独的 CSS 文件。

我不知道有任何工具可以自动处理这种依赖关系，但是当您根据 function 划分文件时，在大多数情况下这变得不必要。

Answer 4

我按功能划分 JS 文件。

几乎无处不在的最常用功能 go 到一个文件，

其他类和方法 go 到自己的文件中。

对于 CSS，我有一个用于整个站点的通用文件。

如果我的部分在视觉上与其他部分不同，我将 CSS 文件分隔到每个部分。 另外，我有一个选项卡式div控件，它有一个单独的 CSS 文件。 我不混合文件。

对于组件来说，嵌入资源看起来不错，但有时只部署 JS 文件来修复 bug 也不错。