管理jQuery插件

通常,在使用jQuery时,需要包含多个插件。 这很快就会变得混乱,特别是当一些插件需要额外的组件(图像和CSS文件)时。

有哪些“推荐”方式:

  • 一个。 以易于维护的方式管理所需的文件/组件( .js.css和图像);
  • 将这些插件包更新到最新版本

我不一定在寻找一种工具来做到这一点(尽管我认为可以执行这种管理的工具很有用),但更多的是一种思考方式。

更新:现在有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.jsscripts/all.min.js

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

通过做这些事情,我们实现了:

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

如此好运气,如果您想了解更多信息,请随时发表评论。

我建议不要更新它们,除非您遇到版本问题或者想要使用更新插件中提供的新function。 俗话说,如果没有破产,就不要修理它。

我个人的“推荐”方式是将我的所有JavaScript文件保存在一个包含文件夹中,将所有CSS文件保存在另一个包含文件夹中,将所有图像保存在第三个目录中。 我为我的项目编写了快捷函数,然后我就可以使用 。 每个快捷方式函数都使用文件名(仅)作为参数,并输出该资源类型的完整HTML标记,即(按顺序)

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

到目前为止,这种方法让我非常清醒,所以我觉得它运作得相当好。 我不会把头发拉到我贴上特定插件的地方; 我只是用函数包含它。 (系统还支持include目录的子目录,例如 equals 。)

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

(因为我省略了这些简单函数的实现,也许你的版本会检查给定的文件名的不同变体。如果scriptlink()的参数是jquery.plugin ,函数可能会检查文件系统以查看jquery.plugin.pack.js存在,如果没有查找jquery.plugin.min.js ,如果没有查找jquery.plugin.js等)

CDN很棒,但不适合调试。 有时调试确实需要本地访问脚本,而CDN在生产模式下是无用的。 出于这个原因,我仍然希望保持调试和缩小版本,然后比较结果和基准响应时间,直到我们转向生产。

我的所有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文件是昂贵的,并且无论如何都会定制9次中的9次。 与图像一样,如果我正在进行任何图像自定义,我会将它们捆绑到我的主图像精灵中,否则我只需将图像链接到该plugin.1.4.1目录。

是的,你最终会在你的回购中增加一些文件,但这意味着:

  • 您只需更新路径即可轻松升级插件
  • 您可以更轻松地调试插件问题,因为您可以看到它是如何过时的
  • 如果一切都中断,你可以回滚到早期版本

您可以将Google CDN(内容分发网络)用于更受欢迎的插件。 Google会使其保持最新状态,您可以快速选择/切换版本,还可以从其他使用CDN的网站获得缓存的好处。

jQuery示例:

  

并且,如果要自动使用更高版本,请将版本更改为1.4(自动1.4.x更新)或甚至1(自动1.xx更新)。 不幸的是,并非所有插件都可用,但许多主要插件都是可用的。