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

Posted 2023-02-22

【中文标题】处理 javascript 和 css 文件的最佳实践是啥

【英文标题】：What is best practice to handle javascript and css files处理 javascript 和 css 文件的最佳实践是什么

【发布时间】：2010-10-15 03:30:26

【问题描述】：

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

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

当你使用很多控件时也使用了 ScriptManager nut，它非常方便......也许我以错误的方式使用它。

【参考方案1】：

我按功能划分 JS 文件。

几乎在所有地方都使用的最常用函数都放在一个文件中，

其他的类和方法去他们自己的文件。

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

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

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

【参考方案2】：

这就是我通常的做法：

CSS：最初是 5 个文件。 reset.css（来自 YUI）、structure.css、general.css（边框、背景、z-index 等）、typography.css 和 base.css，用于导入其他 4 个 css 文件。

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

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

【讨论】：

我喜欢这种方法。在我之前参与的一个项目中，我们还更进一步，实现了一个 Page 类，该类会自动为每个页面发出“背后的脚本”。

5 个 CSS 文件？每个页面（使用它）的外部 JS？有很多 HTTP 请求，不是吗？

是的，它是 Ty，但这仅适用于开发人员。我们有一个构建过程，可以将 js 和 css 压缩/压缩成 1 个文件以进行部署

【参考方案3】：

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

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

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

【讨论】：

如果你使用了几个 jQuery 插件，该怎么办？

性能方面，最好有一个 JS 文件。浏览器将在首次加载时缓存文件，因此大小有点无关紧要。分离文件会进一步降低应用程序的速度，因为每个文件都需要客户端/服务器往返，通常只会获得 HTTP 304。

是的，我明白这一点。但有时这些文件会变得非常大......无论如何感谢您的回答。我会在今天最近标记正确的答案。

@Bryan：感谢您的反对！如果大小是无关紧要，JS 缩小将不是一个既定的过程。此外，您假设每个人都想缓存他们的脚本。不，我完全不同意应用程序会因分割文件而变慢。检查任何成熟的 JS 库中的指针

【参考方案4】：

在我们的项目中，我们将脚本和 CSS 标记为类的资源，然后在页面生命周期中注册它们，通常在 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 将负责确保正确的资源显示在页面上。

然后，我们在 HTTP 处理程序级别编写了一个类，用于处理在流式传输之前将所有 CSS 资源压缩到一个文件中，以确保我们没有达到 IE6 的 32 个 CSS 文件限制。它还会从我们的脚本中去除空格、cmets 等，以优化 javascript 输出。