如何管理您的Javascript文件

How do you manage your Javascript files?

本文关键字：Javascript 文件 管理 何管理      更新时间：2023-09-26

如今，除了我们自己编写的Javascript文件外，我们每页还有大量的Javascript库。你是如何管理它们的？你是如何有组织地缩小它们的？

组织

我所有的脚本都保存在一个目录结构中，每当我在网站上工作时，我都会遵循这个目录结构。目录结构通常是这样的：

+--root
   |--javascript
      |--lib
         |--prototype.js
         |--scriptaculous
            |--scriptaculous.js
            |--effects.js
            |--..
      |--myOwnScript.js
      |--myOwnScript2.js

如果我在一个团队中工作时使用了过多的脚本，那么我通常会创建一个自定义目录，在其中我们将按关系组织脚本。不过，这种情况并不经常发生。

压缩

尽管有很多不同的压缩器和模糊器，但我总是回到YUI压缩器。

包含

除非一个网站使用某种形式的母版页、CMS或其他规定页面上可以包含的内容超出我的控制范围的内容，否则我只为给定页面包含必要的脚本，只是为了小的性能。如果一个页面不需要任何脚本，那么该页面上将不会包含脚本。

首先，YUI压缩机。

保持它们的有序性取决于您，但我见过的大多数小组刚刚提出了一个对其应用程序有意义的惯例。

通常情况下，打包文件的最佳方式是，您可以在任何给定页面上包含少量包，以实现最佳缓存。

您还可以考虑将javascript划分为易于在团队中共享的部分。

Cal Henderson（Flickr名人）不久前写了《快速服务JavaScript》。它涵盖资产交付，而不是组织，但它可能会回答您的一些问题。

以下是要点：

  • 是的，您应该在生产中连接JavaScript文件，以最大限度地减少HTTP请求的数量
  • 但是你可能不想连接成一个巨大的文件；您可能希望将其分解为多个逻辑部分，并将传输成本分摊到多个页面上
  • gzip压缩很好，但不应该将gzip资产提供给IE<=6，所以您可能还想缩小/压缩您的JavaScript

我将添加一些我自己的要点：

  • 你应该想出一个对开发和生产都有效的解决方案。在开发模式中，它应该根据需要引入额外的JavaScript文件；在生产中，它应该提前将所有东西捆绑在一起。从一种行为切换到另一种行为应该像设置标志一样简单
  • Rails 2.0通过一个资产缓存来处理所有这些；其他web应用程序框架可能会提供类似的解决方案
  • 正如另一个答案所表明的，将第三方库放在lib目录中是一个良好的开端。如果有意义的话，您也可以将自己的JS文件划分为子目录。理想情况下，您将能够以这样的方式排列它们，即给定子目录中的文件可以连接到一个文件中

我将为所有javascript提供一个文件夹，为第三方/共享库提供一个子文件夹，并为网站的每个组件提供子文件夹，以保持一切有序。

例如：

/
+--/javascript/
    +-- lib/
    +-- admin/
    +-- compnent1/
    +-- compnent2/

然后在构建过程中通过minifier/模糊处理程序运行所有内容。

我最近一直在使用这个：http://code.google.com/apis/ajaxlibs/

然后有一个"jscripts"文件夹，我在那里保存我的自定义代码。

在我的上一个项目中，我们有三种JS文件，它们都在JS文件夹中。

  1. 库代码。大多数页面上都使用了一组函数，所以它们被放在一个或几个文件中
  2. 类。这些文件有自己的文件，根据需要组织在文件夹中，但不一定如此
  3. 特设JS。特定于该页面的代码。这些文件保存在与它们应该运行的JSP页面同名的文件中

最大的努力是将大部分代码放在前两种代码上，让自定义代码只知道调用什么以及何时调用。

这可能与您想要的方法不同，但我一直在我们的博客引擎中考虑JavaScript模板的想法。简而言之，您可以使用数据库将Javascript模板分配给页面id，它将动态地包括和缩小与该模板相关的所有Javascript文件，并在服务器端缓存中创建一个以模板id为文件名的文件。加载页面时，它会调用模板文件，该文件首先检查缓存中是否存在该文件，如果存在则加载该文件。如果它不存在，它会动态创建并包含它。我还使用模板文件来gzip聚合JavaScript文件。

模板的想法适用于整个站点的JavaScript（比如JavaScript库），但它不包括特定页面的JavaScript。但是，您仍然可以对页面特定的JavaScript使用相同的方法，包括第二个与上面相同的文件。

相关文章：