Dynamicly load jQuery to your WordPress or other front-end project.

To Be Translated to English

有些尴尬的问题让你感到使用框架开发，甚是痛苦：

当我们非常熟悉和喜爱一套 javascript 框架，而且愿意把任何的开发都基于其上，以实现组件的复用。
可是，你常常要被迫使用别人现有的东西，来实现自己的目标。而别人现在的东西，往往并不是采用你喜欢的框架。好比 WordPress的一些模板，很漂亮，可以并不使用jQuery开发——而且它们还霸道的占用了 $ 这个函数
一个 jQuery+jQuery UI (JS+CSS)，将近400多KB，加上JS下载时，会默认的阻塞页面其他元素的下载，所以，你的互联网产品因为你所爱的 jQuery，而拖累呻吟（网页打开速度太慢，特别是在中国大陆）

来，让小方帮助你。

我们的思路是采用动态加载 js 的方式来加载 jQuery 框架。

这可不简单。

因为 jQuery 会默认占用全局作用域中的 $，这个会让你的现在系统中可能使用到的$ 完全失效。
而且你书写的 js 代码，需要依靠jQuery框架，如果是动态载入的话，你要确保你的代码生效之后，就已经有 jQuery 存在于页面中了。
你可能想到使用 AJAX 载入 jQuery, 然后 eval 它。这不是一个完美的主意

Eval之后，你是找不到出错行的——如果你的 JS 出错，firebug 只会傻傻地说一些你完全不明白的错误信息。
AJAX对象需要根据浏览器动态创建

好方法在这里。

重命名 jquery-1.7.1.min.js为jquery-1.7.1.min.changed.js ，添加 $ 转存
在 jquery-1.7.1.min.changed.js 最头部添加
```
// by paul
var  $tmp = {}; if (typeof$  !== 'undefined') {
         $tmp =$ ;
} else {
        var $ = {};
}
```
在最尾部添加：
```
jQuery.noConflict();

 $=$ tmp;
```

你可能会说：“亲，修改 library 代码，将导致你以后升级可能会很麻烦。” 坦白地说，这实在是没有办法的办法——在完全没有 ajax 回调函数的情况下，而且完全是动态创建 script 标签来实现动态并发载入，如果你不修改 jQuery library，你几乎难以非常高效地做到按顺序执行代码 (而且要求兼容所有主流浏览器)
把不轻易变动的js文件放在一起，有利用减少http请求，这不，我们还要继续的往这个文件放jQuery UI的js

加入 jQuery UI 组件

继续修改 jquery-1.7.1.min.changed.js，把 jQuery UI 的 jquery-ui-1.8.18.custom.min.js 加进来 —— 放到js文件最尾部，就是我们刚才第1步修改之后的最后面。
在HTML header 中添加 <link>，把jQuery UI 的 CSS 整进来

继续修改jquery-1.7.1.min.changed.js，加载自定义的js文件

所谓自定义的js文件，就是你的主程序代码了。

(function(){
// bottom of jquery-1.7.1.min.changed.js
var xf = document.createElement('script');
xf.type = 'text/javascript';
xf.async = true;
xf.src = 'http://xiaofang.me/js/xf.js';// xf.js
var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(xf, x);
})();

以插件的方式来写主程序代码，这个是必须的，不用多解释了

(function( $){ //xf.js // domready$ (function(){
    // Main process, put your code here
  });
})(jQuery);

在</body>前加载动态代码创建 script 标签，读取 jQuery 框架，开始干活

再啰嗦一点大家可能都知道的——在body右标签前放js，页面加载是最快的，体验最好。这在yahoo的yslow中已经提到，建议也可以看看 o’reilly的高性能网站建设

(function() {
  // script tag before 
  var jq = document.createElement('script');
  jq.type = 'text/javascript';
  jq.async = true;
  jq.src = 'http://xiaofang.me/js/jquery-1.7.1.min.changed.js';// change according to your domain/path
  var j = document.getElementsByTagName('script')[0];
  j.parentNode.insertBefore(jq, j);
})();

截至: 2012年3月10日11时29分01秒，小方博客采用的就是这套机制来动态载入 jQuery，你可以使用firebug从博客中找到我的代码。

小方分享：动态载入jQuery框架给WordPress和其他现有程序

Dynamicly load jQuery to your WordPress or other front-end project.

To Be Translated to English

1 thought on “小方分享：动态载入jQuery框架给WordPress和其他现有程序”