Question

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

Answer 1

<强>组织

我的所有脚本都保存在我在网站上工作时遵循的目录结构中。目录结构通常如下所示：

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

如果有机会，我正在一个团队工作使用过多的脚本，那么我通常会创建一个自定义目录，我们将在其中按关系组织脚本。但这并不常见。

<强>压缩

虽然那里有很多不同的压缩器和混淆器，但我总是回到YUI Compressor.

<强>夹杂物

除非网站使用某种形式的母版页，CMS或某些内容来指示我无法控制的页面上包含的内容，否则我只包含必须用于指定页面的脚本为了小的性能。如果页面不需要任何脚本，则该页面上不会包含脚本。

Answer 2

首先，YUI Compressor。

让他们保持井然有序取决于你，但我见过的大多数小组只是提出了一个对他们的应用程序有意义的约定。

打包文件通常是最佳的，因为您可以使用少量软件包，这些软件包可以包含在任何给定页面中，以实现最佳缓存。

您还可以考虑将您的javascript划分为整个团队中易于分享的细分。

Answer 3

Cal Henderson（Flickr成名）不久前写了Serving JavaScript Fast。它涵盖资产交付，而不是组织，但它可能会回答您的一些问题。

以下是要点：

是的，您应该在生产中连接JavaScript文件，以最大限度地减少HTTP请求的数量。
但你可能不想连接成一个巨大的文件;你可能想把它分成逻辑部分，并将转移成本分摊到几页。
gzip压缩很好，但你不应该将gzip压缩资源提供给IE＆lt; = 6，所以你可能还想缩小/压缩你的JavaScript。

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

您应该提出一个适用于开发和生产的解决方案。在开发模式下，它应该根据需要引入额外的JavaScript文件;在生产中它应该提前捆绑所有东西。从一种行为切换到另一种行为应该像设置标志一样简单。
Rails 2.0通过asset cache处理所有这些;其他Web应用程序框架可能会提供类似的解决方案。
另一个答案显示，将第三方库放在lib目录中是一个好的开始。如果有意义的话，您也可以将自己的JS文件划分为子目录。理想情况下，您将能够以这样的方式对它们进行排列，使得给定子目录中的文件可以连接成一个文件。

Answer 4

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

例如：

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

然后在构建过程中通过minifier / obfuscator运行所有内容。

Answer 5

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

然后有一个“jscripts”文件夹，我保留自定义代码。

Answer 6

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

图书馆代码。大多数所有页面都使用了大量函数，因此将它们放在一个或几个文件中。
<强>类即可。它们有自己的文件，根据需要在文件夹中组织，但不一定如此。
Ad hoc JS 。特定于该页面的代码。这些文件保存在与它们应运行的JSP页面同名的文件中。

最大的努力是在前两种代码中使用大部分代码，让自定义代码只知道要调用的内容以及何时调用。

Answer 7

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

模板理念适用于网站范围的JavaScript（如JavaScript库），但它不包含特定于页面的JavaScript。但是，通过包含与上面相同的第二个文件，您仍然可以对页面特定的JavaScript使用相同的方法。

你如何管理你的Javascript文件？

7 个答案: