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

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

 

 

To Be Translated to English

 

 

 

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

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

来,让小方帮助你。

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

这可不简单。

  1. 因为 jQuery 会默认占用全局作用域中的 $,这个会让你的现在系统中可能使用到的 $ 完全失效。
  2. 而且你书写的 js 代码,需要依靠jQuery框架,如果是动态载入的话,你要确保你的代码生效之后,就已经有 jQuery 存在于页面中了。
  3. 你可能想到使用 AJAX 载入 jQuery, 然后 eval 它。这不是一个完美的主意
    1. Eval之后,你是找不到出错行的——如果你的 JS 出错,firebug 只会傻傻地说一些你完全不明白的错误信息。
    2. AJAX对象需要根据浏览器动态创建
好方法在这里。
  1. 重命名 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;
    1. 你可能会说:“亲,修改 library 代码,将导致你以后升级可能会很麻烦。” 坦白地说,这实在是没有办法的办法——在完全没有 ajax 回调函数的情况下,而且完全是动态创建 script 标签来实现动态并发载入,如果你不修改 jQuery library,你几乎难以非常高效地做到按顺序执行代码 (而且要求兼容所有主流浏览器)
    2. 把不轻易变动的js文件放在一起,有利用减少http请求,这不,我们还要继续的往这个文件放jQuery UI的js
  2. 加入 jQuery UI 组件
    1. 继续修改 jquery-1.7.1.min.changed.js,把 jQuery UI 的  jquery-ui-1.8.18.custom.min.js 加进来 —— 放到js文件最尾部,就是我们刚才第1步修改之后的最后面。
    2. 在HTML header 中 添加 <link>,把jQuery UI 的 CSS 整进来
  3. 继续修改jquery-1.7.1.min.changed.js,加载自定义的js文件
    1. 所谓自定义的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);
      })();
  4. 以插件的方式来写主程序代码,这个是必须的,不用多解释了
    (function($){
      //xf.js
      // domready
      $(function(){
        // Main process, put your code here
      });
    })(jQuery);
  5. 在</body>前加载动态代码创建 script 标签,读取 jQuery 框架,开始干活
    1. 再啰嗦一点大家可能都知道的——在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从博客中找到我的代码。

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

Leave a Reply

Your email address will not be published. Required fields are marked *