通常,在使用jQuery时,需要包含多个插件。这很快就会变得混乱,特别是当某些插件需要额外的组件(图像和CSS文件)时。
有哪些“推荐”方式:
.js
,.css
和图片); 我不一定在寻找一种工具来做到这一点(尽管我认为可以执行这种管理的工具会很有用),但更多的是一种思考方式。
答案 0 :(得分: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存储库,然后在项目A和B上使用SVN外部引用它 - 如前所述。
现在涵盖管理,提取和更新。
以下是我如何处理脚本包含和请求。
由于每个项目现在都有自己的脚本目录,其中包含所需的所有脚本(由SVN外部管理),我们现在不得不担心缩小它们以减少服务器的负载。每个项目的根目录都有Makefile
,其中包含命令update
。此命令将执行以下操作:
scripts/all.js
和scripts/all.min.js
我无法分享确切的Makefile
,但我可以分享一个公共处理包装/合并和缩小CSS和Javascript的方法。链接在这里:
http://github.com/balupton/jquery-sparkle/blob/9921fcbf1cbeab7a4f2f875a91cb8548f3f65721/Makefile
通过做这些事情,我们实现了:
祝你好运,如果你想了解更多,请随时发表评论。
答案 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插件都被组织成子文件夹,其中包括版本号,例如
如果我需要更新到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更新)。不幸的是,并非所有插件都可用,但许多主要插件都是。