管理jquery插件

更新:现在有 Bower , Component 和 Browserify 自动为我们处理以下所有问题。

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

我有每一个与我合作的项目 SVN . 我所包含的几乎所有脚本都有一个SVN镜像(Github最近都有SVN),这意味着我可以使用SVN Externals,直接将该项目的任何分支或版本或任何我想要的内容提取到项目中。 scripts 文件夹。当我们使用SVN时,很容易跟踪、管理和更新这些脚本。

如果一个项目不在SVN上,那么我只需将它添加到我所做的一个公共SVN项目中,例如,项目A和项目B都使用 jquery-project-not-in-svn 所以我们坚持 jquery项目不在SVN中 到我们的公共项目的SVN存储库中,然后在项目A和B上使用SVN Externals来引用它——如前所述。

现在包括管理、获取和更新。

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

由于每个项目现在都有自己的脚本目录,其中包含了它所需要的所有脚本(由SVN Externals管理),因此我们现在必须考虑缩小它们以减少服务器上的负载。每个项目都有一个 Makefile 在它的根目录中,包含命令 update . 此命令将执行以下操作:

• 执行SVN更新(这将适当更新所有SVN外部)
• 完成后,它将把所有JS文件打包并缩小到 scripts/all.js 和 scripts/all.min.js

我不能分享确切的 生成文件 但我可以共享一个公共的,处理CSS和JavaScript的打包/合并和缩小。链接如下: http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile

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

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

很幸运,如果你想了解更多,可以发表评论。

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

我个人的“推荐”方法是将所有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插件都允许在脚本本身或用于调用插件的代码中指定配置变量。样式表可以很容易地包含在脚本中,而不会弄乱脚本。

到目前为止,这种方法使我保持了相当清醒的头脑,所以我认为它工作得相当好。我不会因为某个插件的位置而把头发扯下来;我只是用一个函数来包含它。(系统还支持include目录的子目录,例如 <?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.min.js) 如果不找的话 jquery.plugin.js 等)

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

我所有的jquery插件都被组织到子文件夹中,其中包括版本号,例如

• /资产/js/plugin.1.4.1/plugin.1.4.1.min.js
• /资产/js/plugin.1.4.1/images/image.gif

如果我需要更新到1.4.2,我可以把它放在一个新的文件夹中,没有太多问题,如果需要的话,我甚至可以在站点的不同部分使用插件的特定版本。当我的网站很大,你使用几个不同的插件时,不需要在plugin.js文件中挖掘源代码注释,就可以快速查看版本号。

如果一个插件需要CSS,我会将基本样式从插件CSS中取出,并将它们与我的主样式表捆绑在一起,请求额外的CSS文件是昂贵的,10个插件中有9个需要定制。同样,对于图片,如果我进行任何图片定制,我将把它们捆绑到我的主图片精灵中,否则我将链接到该插件.1.4.1目录中的图片。

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

• 您可以通过更新路径轻松升级插件。
• 您可以更容易地调试插件问题,因为您可以看到您是多么过时。
• 如果一切都中断,您可以回滚到早期版本

您可以利用谷歌内容交付网络(Content Delivery Network)获得更流行的插件。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更新)。不幸的是,并非所有插件都可用,但许多主要插件都可用。