国内外常用CDN jQuery和WordPress加载JQuery库的方法

一.jQuery是最常用的JS库之一，使用jQuery CDN来做加速，减少服务器压力和速度问题。

1、Public Resources on SAE

地址：http://lib.sinaapp.com/

2、又拍云JS库加速服务

地址：http://jscdn.upai.com/

3.MiniCDN’s CDN

地址：http://www.minicdn.com/

4.jsdelivr’s CDN

地址：http://www.jsdelivr.com/

5.cloudflare

地址：http://js.cloudflare.com/

6、jQuery’s CDN

地址：http://code.jquery.com

7、Google’s CDN

地址：http://code.google.com/apis/ajaxlibs/

8、Microsoft’s CDN

地址：www.asp.net/ajaxlibrary/cdn.ashx

9.百度云(BAE) CDN

地址：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs

二.使用CDN jQuery加速wordpress方法：

1.WordPress稳妥的加载JQuery库(防止CDN外链失效)

这个是制作主题时遇到的，因为引用了JQuery脚本库，为了最佳的浏览体验，当然希望这个脚本库加载得越快越好，或者我们的主机商限制了流量，JQuery几十K的流量也要勒紧裤带啊，所以我们会考虑CDN，国内外流行的JQuery CDN有Google的或者Sina云计划，地址分别是：

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js

然后我们就可以直接用script标签引用了，比如这样：

<script type="text/javascript"
        src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>

好吧，速度问题算是解决了，而且有这些大公司做后盾，我们也不必考虑其他问题，等等，没有其他问题了吗？假如我说假如我使用的这家公司倒闭了呢？好吧，现阶段不可能无缘无故倒闭的；假如链接地址更改了呢？或者被XX了？好吧，这个是我们要考虑的问题，针对XX问题，我们可以选择国内sina的CDN，对于前一个问题，我们就需要考虑容灾措施了，假如这些发生了，我们该怎么做？

我现在博客的流量监控使用的是Google Analytics，发现其采用了如下这么段异步加载的措施：

try {
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
  var ga = document.createElement('script');
  ga.type = 'text/javascript';
  ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
       + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();
}catch(e){}

进一步研究发现通过createElement(‘script’)方法还可以获取其他特性，比如判断脚本是否已经加载完成，这个貌似对于刚才的问题有所帮助哎，于是我改写了这么一段代码：

(function( window, undefined ) {
  window.jQuery || (function(){
    var mirrors = [
      "lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js",
      location.hostname + "/blog/wp-includes/js/jquery/jquery.js"
    ];
    for (var i=0; i<mirrors.length; i++) {
      if(typeof(window.jQuery) == "undefined") {
        var script = document.createElement('script');
        script.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + mirrors[i];
        script.type = 'text/javascript';
        script.language = 'javascript';
        script.async = false;
        script.onload = script.onreadystatechange = function() {
          if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
            // 这里放依赖JQuery执行的代码
            script.onload = script.onreadystatechange = null;
          }
        }
        // document.body.appendChild(script); 这句换下面两句
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(script, s);
      } else {
        break;
      }
    }
  })();
})(window);

想法倒是很好，思路就是通过查询mirrors列表先加载CDN的JQuery库，然后通过typeof(window.jQuery)判断是否加载成功，如果不成功则继续加载mirrors剩下的地址指向的JQuery库，我这里直接写上本地WordPress自带的JQuery库地址。但是实际操作中发现问题多多，主要是异步加载，我也尝试着将async设置为false，但是仍然异步加载脚本，这样导致每次循环typeof(window.jQuery)==undefined，这样导致mirrors里面的库全部被加载了，试了很多次，无果，遂放弃了这个办法。

我后来搜索了一下，又找到了一个办法，那就是通过下面的代码来实现加载：

<script type='text/javascript' src='http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
//<![CDATA[
if (typeof jQuery == 'undefined') {
  document.write(unescape("%3Cscript src='/blog/wp-includes/js/jquery/jquery.js' type='text/javascript'%3E%3C/script%3E")); 
}
// ]]>
</script>

也就是说一般加载选择script标签引入CDN地址，如果加载失败也就是typeof jQuery为undefined，那就输出script，并引入本地JQuery库。我用FireBug观察了一下，发现这种方式是阻塞加载，也就是同步的，就不存在刚才遇到的问题了。

对于WordPress可以通过在functions.php里面修改或者加入下面的代码来实现嵌入JQuery库。

function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery',("http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"), false, "1.7.2", false);
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

从以上代码可以看出，我们主要使用了三条函数：

wp_deregister_script()：将 WordPress 中当前的jQuery版本禁用

wp_register_script()：注册新的 CDN 版本的 jQuery

wp_enqueue_script()：将 jQuery 引入到主题或插件中

值得注意的一点是，在引入 jQuery 上，我们使用了 add_action()，而非 add_filter()，因为我们不希望去改变 WordPress 本身的文件代码，相反，在加载新的 jQuery 时，我们还要依赖 WordPress 去为我们做事情，所以我们使用了 action 钩子，而不是 filter过滤器。更多关于 action 及 hook 这些东西的详细解释，请访问 WordPress 官方文档。

这样head标签里就嵌入了script外链的SinaApp JQuery库，为了能快速渲染页面，有些同学喜欢将其加入页面底部，其实只需要将wp_register_script改成下面这样既可：

wp_register_script('jquery',("http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"), false, "1.7.2", true);

注意最后一个参数，为true时代表将引用JQuery的script标签嵌入页面底部，如果需要加入额外的判断代码，比如刚才的判断JQuery加载失败就引入本地库的那段可以先建立函数my_jquery_reload：

function my_jquery_reload() {
 // 这里输出代码
}

如果加入头部(head)则使用下面的代码：

add_action('wp_head', 'my_jquery_reload');

如果加入底部则使用下面的代码:

add_action('wp_footer', 'my_jquery_reload');

好了，我的介绍完了。

使用 Google jQuery 的CDN方法用起来也很简单，直接在网页里引用Google服务器上的相关js文件就可以了。不过，如果引用多个js，就要插入多段的script。 Google也提供了相应的办法，那就是google load。我们只需要在页面里引用一个js文件，就可以根据需要实时加载用到的js库了。

首先在页头部分加入以下这行代码：

<scripttype=”text/javascript”src=”http://www.google.com/jsapi”></script>

加载jQuery，可以这样使用：

google.load(“jquery”,”1.4.4″);

版本如下：jQuerysnippet: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> site: http://jquery.com/ versions: 2.0.2, 2.0.1, 2.0.0, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3 note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild.

这样我们就从Google的最近的CDN镜像上加载了jQuery 1.4.4版的js库，接下来就可以正常写js代码了。不过，即使是Google的CDN镜像，下载也毕竟是需要时间的，万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办？我们可以设定在js库加载完以后才开始执行js：

google.setOnLoadCallback(function(){//要执行的代码});

更多有关google jsapi的相关介绍和文档，可以参考：google AJAX 库 API

当然我们还有其他的类库可以加载

在google 类库 https://developers.google.com/speed/libraries/?hl=zh-CN

有各种各样的CDN，比如EXT Core、jQuery UI 、Dojo等等。

虽然 CDN jQuery 源相当的稳定，不过我们也不能保证其能随时访问，万一大局域网一激动，我们不就蛋疼了，所以我们还要给它另外一个选择，让它根据条件加载 jQuery，加一个备用源，如下：

<scripttype=”text/javascript”src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script><scripttype=”text/javascript”><!–!window.jQuery && document.write(‘<script src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js></script>’);//–></script>

也可以这样写：

<!–document.write(unescape(“%3Cscript src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’ type=’text/javascript’%3E%3C/script%3E”));!window.jQuery&&document.write(unescape(“%3Cscript src=’http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js’ type=’text/javascript’%3E%3C/script%3E”));//–>

然后保存到 jQuery.js 放在本地加载，文件很小，加载也快，变更版本也很方便。

其中第二个地址可以换成你本地的 jQuery 以保证链接稳定性。这样的意义是：先去加载谷歌的jquery库文件，如果加载失败那么就加载微软的 jquery 库文件。如果加载 google jquery 成功则会忽略后面的微软 jQuery 代码。