
为了使用方便,WordPress系统内部已经带有了很多的js类库,几乎涵盖了目前市面上流行的所有类库。包括jQuery,prototype,scriptaculous,thickbox等等等等,这些类库用到的重要的插件,也带了不少,到底有多少呢?大家可以去/wp-includes/js目录下查看。
WordPress自带的这些js类库有个弊端,就是基本上都没有经过minify和zip(这两部操作的作用,就是将js代码的体积,尽可能减到最小,以加快下载速度),所以引用WordPress自己的js类库,往往会浪费很多流量(比如,没有zip过的jquery有30KB,prototype有122KB,而压缩过后,jquery只有17KB,prototype只有28KB)。
我是否使用了类库?
WordPress是一个灵活的系统,用户可以通过插件扩展系统的功能,所以,一个博客上是否使用了某个类库,取决于你博客用到的所有的插件对类库的使用情况。如果你想看看自己到底使用了哪些,你可以用一个简便的办法,就是查看源文件。
- <script type='text/javascript' src='http://localhost/wp25/wp-includes/js/jquery/jquery.js?ver=1.2.3'></script>
看上面的代码,是我模板中的一段代码,类似这个样子的就是对类库的引用了。这是我的本地调试系统,使用的是wp2.5.1,引用到了jQuery类库,版本1.2.3。
如果你看到了类似“xxxxxxxxxxxxxwp-includesjsxxxxxxxx?ver=xxxxxx”的字符串,那么,你的博客里,调用了类库。
使用Google AJAX Libraries API
什么是Google AJAX Libraries API(GALA)?使用它有什么好处?简单来说,Google是个很牛X的公司,很乐意做好事,它专门优化了这些类库,包括代码精简,压缩,然后用高性能地服务器来Host这些类库,供用到的网站调用,帮助这些网站节省流量。我爱水煮鱼写了个小短文,介绍过这个,大家可以看看(点这里)。Google为什么做这种事情?好吧,这个问题,我不知道。
怎样用GALA来替换WordPress自带的类库?
关于这一点,首先我想说说WordPress对于引用脚本的一些机制,那就是scripts loader。这是个什么东西呢?一句话:对于博客使用到的所有脚本,进行统一的管理的一个装置。这个装置是怎么管理的呢?首先,所有的脚本登记注册,包括名称,路径,版本号,依赖关系,一一详细记录。然后,是对脚本的调用,通过这套系统来调用。最后,由系统负责把所有需要用到的脚本,无重复的,满足依赖关系的,满足前后顺序的,有条不紊的加入到你的最终的博客页面里面。怎么样?是不是非常酷?不过呢,总是有“不过”,这种秩序高度依赖模板作者和插件作者的自觉性。
好吧,我们的方法不得不建立在所有的模板作者和插件作者都自觉使用scripts loader系统的基础上。在这种情况下,一个模板或者插件使用到某个类库,会使用wp_enqueue_script函数来调用需要的类库,使用这个方法,一般不会直接指明类库的路径,只是说明类库的版本号和依赖关系(因为,WP默认就会给所有wp-includes/js目录下的类库进行登记register)。
发现又废了很多话,到这里,我们的替换方法,已经呼之欲出了,因为所有的类库引用都是对已登记的类库的调用(建立在我的假设之上),所以,我如果想要替换,那么只要替换登记在册的那个名单就OK了,完全跳过了去修改每个有可能引用到类库的插件这种繁琐的事情。而且,WordPress确实提供了能够替换那个名单的方法。使用wp_deregister_script可以注销一个脚本,然后使用wp_register_script可以重新注册一个脚本。用这个办法,我们可以把wp自己注册的脚本给注销掉,然后换成GALA的,重新注册,就OK了。
根据WordPress的源代码显示,所有类库的引用,是在最后页面生成的时候才真正进行的,准确一点并且专业一点来说,是在wp_head这个action发生的时候,对类库的引用才通过wp_print_scripts函数写入到页面里面。我们的替换动作只要在此之前完成就OK,所以,我们把替换这件事情,写到functions.php里面,当然,更好的做法,是使用一个单独的插件里。
具体的写法,我曾经在侠姐的文章里见过,大家可以去看看,我就不想进行重复劳动了。《wordpress里js文件的调用》from 轶侠的网上小窝
有没有学习写插件的小朋友写个干这个事情的插件呢?亲爱的读者,如果你写了,请告诉我,我会把你的作品列在下面的。
Updated:
经由侠姐提出,如果直接替换掉WP自带的js类库可能会在后台造成冲突而导致某些功能失灵(比如Simple Tags的标签推荐功能,详情可见讨论),不得不在使用的做出一定的修正。
//replace the jQuery instance with google api
if (!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js', false, '1.2.6');
wp_enqueue_script('jquery', false, false, '1.2.6');
}
?>
通过is_admin()标签,可以将前后台区别对待。但是这种情况还不能涵盖所有的例外,如果某个插件正好引用了prototype或者jquery,并且正好利用了WP对齐进行的无冲突修正,那么以上方法可能导致部分功能失灵。有经验的用户可以酌情使用。
Updated2:
经小墨提醒,已经找到了一个这样的插件的实例了。我看了代码,是利用了两个hook,一个是我说过的wp_print_script,这个hook用来探测jQuery和prototype是否同时存在,然后解决冲突问题,另一个是script_loader_src,用来替换里面的src地址,并指向到google提供的js库。不过,我个人觉得,这个方法很可能还是不能完美解决后台的类库冲突问题,但是我没有验证过。
插件主页:
http://blog.clearskys.net/2008/05/28/google-ajax-libraries-api-plugin/
作者:Charles
原文链接:使用Google AJAX Libraries API替换WordPress自带的js库
《Becomin' Charles》版权所有,转载时必须以链接形式注明作者和原始出处及本声明。
我也想试试这个。
如果大家都用Google host的库,浏览者电脑里都有了缓存,再上别的站也不用重新下载,这样大家速度都能提高,是不是 ^^
貌似自动google发布提供js开始后不久,就出现插件了
http://www.leinky.com/google-ajax-libraries-api-plug-in/
只换模板引用的就成了,后台的没必要换。后台那里只要用过 Google Gears,日后基本不需要为 js 浪费流量。
我现在就是直接调用Google的jquery,之前我想直接把jQuery文件放在本地空间,但不懂得怎么压缩,用了最小的一个都要31K,所以直接调用Google的算了,省点空间流量!!!
貌似以前水煮鱼写过一个替换WordPress目录JS文件的插件,但是我没有使用过不知道效果如何了。。
对啊,我一直用内裤,没有内裤的时候我们就拿别人的内裤来用-__-
哈哈……
反正我不懂~~看个热闹而已~~
我去你那里看美女来着,你用了zhiqiang的相册么?那个玩意整服帖了不容易啊。
没有啊
我用的就是Picasa的相册啊,昨天晚上安装上的,跟我的模板还是有点问题~~
美女?我博客貌似没有什么美女吧
我QQ空间里倒是不少~~交个朋友我Q:332650979
哇,看楼上两位高手论战,太刺激了
你这是啥,无意义评论+煽风点火。
直接忽略Leo的评论
你没有装simple tag?或者你没有在后台写过用jquery的代码?你在functions.php里面引用没有问题是因为你没有用prototype,wp在它自己的jquery里面添加了那个防止jquery和prototype冲突的代码。这么说吧,后台的editor肯定引用了prototype,这个时候如果引用的google版jQuery,写jQuery()直接失效,一定要用$,但是如果用了自带的jQuery写$失效。simple tag用了jQuery
原来是这样。Simple tags我装了。我现在的这个模板后台用到了jQuery了,我刚才试了是正常。撰写界面也是正常的,目前为止,我后台所有的功能还没有出现任何异常,不过,我会注意这个问题的。如果有人按照我写的去实践了的话,看看有没有什么反馈吧。
你装了simple tag,引用了google的jquery,那么选tag的功能应该就没有了哈,就是输入个字,有下拉选tag的提示
原来是这样,看来,WordPress内部还是不够厚道的。我不得不做出一定的妥协了。is_admin可以搞定这个问题,但是并没有本质解决问题。这个方法又沦为了普通用户无法随意使用的tricks了。
不要想美事儿了,wp的jquery库是改过的,引用了google的,后台很多用jquery的功能就废了
看来写在functions.php里面不影响后台,因为我的后台目前完全正常啊。不知道侠姐你有什么实际的出问题的例子没有,我很想研究看看,到底WP改了些什么。