管理 jQuery 插件答案

【问题标题】：Managing jQuery Plugins管理 jQuery 插件
【发布时间】：2010-07-13 00:22:59
【问题描述】：

通常，在使用 jQuery 时，需要包含多个插件。这很快就会变得杂乱无章，尤其是当某些插件需要额外的组件（图像和 CSS 文件）时。

有哪些“推荐”方法：

a. 以易于维护的方式管理所需的文件/组件（.js、.css 和图像），并且；
b. 将这些插件包更新到最新版本

我不一定要寻找一种工具来做到这一点（尽管我认为可以执行这种管理的工具会很有用），但更多的是一种思维方式。

【问题讨论】：

标签： javascript jquery jquery-plugins organization

【解决方案1】：

更新：现在有 Bower、Component 和 Browserify 自动为我们处理以下所有事情。

我很惊讶还没有人报道我所做的事情。下面是我管理脚本和资源的方式。

我的每个项目都使用SVN 进行设置。几乎我包含的所有脚本都有一个 SVN 镜像（这些天 github 有 svn），这意味着我可以使用 SVN 外部并将该项目的任何分支或版本或我想要的任何内容直接获取到项目 scripts 文件夹中。由于我们使用的是 SVN，因此很容易跟踪、管理和更新这些脚本。

如果项目不在 SVN 上，那么我只需将其添加到我制作的普通 SVN 项目中，例如项目 A 和项目 B，都使用 jquery-project-not-in-svn，所以我们将 jquery-project-not-in-svn 粘贴到我们的普通项目中SVN 存储库，然后在项目 A 和 B 上使用 SVN 外部来引用它 - 如前所述。

现在涵盖了管理、获取和更新。

以下是我介绍脚本包含和请求的方式。

由于每个项目现在都有自己的脚本目录，其中包含它需要的所有脚本（由 SVN 外部管理），我们现在必须担心缩小它们以减少服务器上的负载。每个项目的根目录下都有一个Makefile，其中包含命令update。该命令将执行以下操作：

执行 SVN 更新（这将适当地更新所有 SVN 外部）
一旦完成，它会将所有的js文件打包并压缩成scripts/all.js和scripts/all.min.js

我不能分享确切的Makefile，但我可以分享一个处理 CSS 和 Javascript 的打包/合并和缩小的公共的。链接在这里： http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile

通过做这些事情，我们实现了：

管理多个项目的外部脚本资源
自动更新适当的脚本资源
将项目用到的所有脚本资源打包到一个文件中
缩小该文件，以便只执行一个 JS 请求和一个 CSS 请求。

祝你好运，如果您想了解更多信息，请随时发表评论。

【讨论】：

这是一个非常非常令人印象深刻的解决方案。为此，您可以随心所欲地击败我：我通常不会将 SCM 用于我从事的项目，因此我永远不会想到这种解决方案。（虽然我正在考虑开始使用 Git，但我不知道它是否具有类似于 SVN 的外部功能。）
呵呵呵呵，是的，SCM 总是让人望而生畏，但一旦你开始使用它——你就会一直使用它。 Git 和 SVN 在它们自己的方面都很棒，我每天都在使用它们。对于我所有的开源项目，我将它们托管在 Github 上——因为 github 为每个项目都有 SVN 镜像，我发布的内容仍然有效——现在这很酷！ Git 有子模块和部分检出，但它们的支持是不确定的。我仍然在 SVN 中完成我的项目并托管在 Springloops 上（他们有一个免费计划），因为你目前无法击败 SVN 外部 - 特别是在使用像 Cornerstone 这样的软件来管理你的项目时。 :-) 祝你好运。
这正是我一直在寻找的东西。我最终可能会采用稍微不同的方法（可能使用 git），但这仍然是一个好主意。
谢谢伙计，我真的很高兴能帮上忙！ :-) 如果您需要了解更多信息，请随时回信。以下是 github 在其 SVN 镜像上的公告，因为它们在使用 Git 时对我很有帮助：github.com/blog/626-announcing-svn-support 和 github.com/blog/644-subversion-write-support |使用 Git 的另一个选择可能是称为 Gitternals 的投影，而不是 Git 的子模块或部分检查。祝你好运:-)

【解决方案2】：

我建议不要更新它们，除非您遇到的版本有问题，或者您想使用更新插件中提供的新功能。俗话说，没坏不修。

【讨论】：

是的，您不希望在您的网站上实现某些东西并让插件作者弃用并删除或更改您用来破坏页面的功能。
我认为 OP 的重点是如何以易于维护和更新的方式打包脚本和所需资源 - 而不仅仅是何时更新。

【解决方案3】：

我个人的“推荐”方式是将我的所有 JavaScript 文件保存在一个包含文件夹中，将所有 CSS 文件保存在另一个文件夹中，并将所有图像保存在第三个目录中。我为我的项目编写快捷函数，然后我可以像<?php scriptlink( 'jquery.tooltip' ); ?> 或<?php stylelink( 'jquery.thickbox' ); ?> 一样使用它们。每个快捷函数将文件名（仅）作为参数并输出该资源类型的完整 HTML 标记，即（按顺序）<script type="text/javascript" src="/includes/js/jquery.tooltip.js"></script> 或 <link rel="stylesheet" href="/includes/css/jquery.thickbox.css" />

我遇到的大多数需要图像的 jQuery 插件都允许在脚本本身或用于调用插件的代码中指定配置变量。样式表很容易包含在脚本中。

到目前为止，这种方法让我保持清醒，所以我认为它效果很好。我不会因为我粘贴特定插件的地方而撕毁我的头发；我只是将它包含在一个功能中。（系统也支持包含目录的子目录，比如<?php scriptlink( 'ui/accordion' ); ?>等于<script type="text/javascript" src="/includes/js/ui/accordion.js"></script>。）

当然是 YMMV，但我唯一遇到的问题是当插件作者开始分发 jquery.plugin.pack.js 版本而不是 jquery.plugin.min.js 或反之亦然时升级，因为我实际上必须记住更改文件名寻找。

（由于我省略了那些简单函数的实现，也许您的版本会检查给定文件名的不同变体。如果scriptlink() 的参数是jquery.plugin，该函数可能会检查文件系统以查看jquery.plugin.pack.js是否存在，如果不存在则寻找jquery.plugin.min.js，如果不存在则寻找jquery.plugin.js等）

【讨论】：

【解决方案4】：

CDN 很棒，但不适用于调试。有时调试确实需要本地访问在生产模式之前，脚本和 CDN 都是无用的。为此我还是喜欢保留调试和缩小版本，然后比较结果和基准响应时间，直到我们转向生产。

【讨论】：

【解决方案5】：

我所有的 jQuery 插件都被组织到包含版本号的子文件夹中，例如

/assets/js/plugin.1.4.1/plugin.1.4.1.min.js
/assets/js/plugin.1.4.1/images/image.gif

如果我需要更新到 1.4.2，我可以将它放到一个新文件夹中而不会有太多问题，如果需要，我什至可以在站点的不同部分使用特定版本的插件。当我的站点很大并且您使用几个不同的插件时，快速查看版本号很有帮助，而无需在 plugin.js 文件中挖掘源 cmets。

如果一个插件需要 CSS，我会从插件 CSS 中取出基本样式并将它们与我的主样式表捆绑在一起，请求额外的 CSS 文件是昂贵的，而且十分之九会被定制。与图像类似，如果我要进行任何图像自定义，我会将它们捆绑到我的主图像精灵中，否则我只会将图像链接到该 plugin.1.4.1 目录中。

是的，您最终会在您的存储库中获得更多文件，但这意味着：

您只需更新路径即可轻松升级插件
您可以更轻松地调试插件问题，因为您可以查看自己的过时程度
如果一切中断，您可以回滚到早期版本

【讨论】：

【解决方案6】：

您可以利用 Google CDN（内容分发网络）来获取更流行的插件。 Google 会保持最新状态，您可以快速选择/切换版本，还可以从其他使用 CDN 的网站获得缓存的好处。

jQuery 示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

而且，如果您想自动使用更高版本，请将版本更改为 1.4（自动 1.4.x 更新）甚至 1（自动 1.x.x 更新）。不幸的是，并非所有插件都可用，但许多主要插件都可用。

【讨论】：

是的，我对此完全失望，我可以从外部 CDN 提供的服务器越多越好。