管理jQuery插件

时间:2010-07-13 00:23:00

标签: javascript jquery jquery-plugins organization

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

有哪些“推荐”方式:

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

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

6 个答案:

答案 0 :(得分:11)

更新:现在有BowerComponentBrowserify自动为我们处理以下所有事项。

我很惊讶没人介绍我做的事情。所以这就是我管理脚本和资源的方式。

我让每个项目都使用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请求。

祝你好运,如果你想了解更多,请随时发表评论。

答案 1 :(得分:2)

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

答案 2 :(得分: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' ); ?>等于<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等等。

答案 3 :(得分:2)

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

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

是的,您最终会在回购邮件中添加更多文件,但这意味着:

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

答案 5 :(得分: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.x.x更新)。不幸的是,并非所有插件都可用,但许多主要插件都是。