16

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

有哪些“推荐”方法：

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

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

4

6 回答 6

11

更新：现在有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 存储库，然后使用 SVN externals on项目 A 和 B 来引用它 - 如前所述。

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

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

由于每个项目现在都有自己的脚本目录，其中包含它需要的所有脚本（由 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 请求。

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

于 2010-07-20T08:09:25.750 回答
2

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

于 2010-07-13T00:33:01.263 回答
2

我个人的“推荐”方式是将我所有的 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' ); ?>equals <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，等等）

于 2010-07-19T22:05:49.867 回答
2

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

于 2010-07-20T21:57:16.000 回答
1

我所有的 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 文件中的源代码注释。

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

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

  • 您只需更新路径即可轻松升级插件
  • 您可以更轻松地调试插件问题，因为您可以看到自己的过时程度
  • 如果一切都中断了，您可以回滚到早期版本
于 2010-07-19T22:28:21.887 回答
1

您可以使用 Google CDN（内容分发网络）来获取更流行的插件。谷歌保持最新，您可以快速选择/切换版本，您还可以从使用 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.xx 更新）。不幸的是，并非所有插件都可用，但许多主要插件都可用。

于 2010-07-19T22:36:32.623 回答