cdn - 使用托管在Google上的jQuery库, 访问失败后如何使用我自己的jQuery库

  显示原文与译文双语对照的内容

什么将会是一个好方法试图加载主持jquery在谷歌 ( 或者其他谷歌托管库), 但负载我的副本jquery如果谷歌尝试失败?

我不是说谷歌是 flaky 。 在某些情况下,谷歌副本被阻止( 显然在伊朗) 。

我会设置计时器并检查jQuery对象?

这两个副本的危险性是多少?

找不到像"只需使用谷歌"或者"用你自己的。"这样的答案,我理解这些参数。 我也知道用户可能会缓存谷歌版本。 我正在考虑在一般情况下恢复云。


编辑:这里部件已经添加。。

因为谷歌建议使用 google.load 加载ajax库,并在完成时执行回调,所以我想知道这是否是序列化这个问题的关键。

我知道听起来有点疯狂。 我只是想弄清楚它能否以可靠的方式完成。


更新:jQuery现在托管在微软的CDN上。

http://www.asp.net/ajax/cdn/

时间:

你可以这样实现:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"></script>'); }
</script>

这应该在你的<head> 页面中,任何jQuery就绪事件处理程序都应该在 <body> 中,以避免错误( 虽然不是 fool-proof ) 。

一个理由不使用 Google-hostedjquery是,在一些国家,谷歌的名字域是被禁止的。

目前为止最简单最干净的方法:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"></script>')</script>

这对我来说似乎有用:


<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//has the google object loaded?
if (window.google && window.google.load) {
 google.load("jquery","1.3.2");
} else {
 document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"></script>');
}
window.onload = function() {
 $('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
 <p id="test">hello jQuery</p>
</body>
</html>

它的工作方式是使用 google 对象调用 http://www.google.com/jsapi 加载到 window 对象。 如果该对象不存在,我们假设对谷歌的访问失败。 如果是这样的话,我们使用 document.write 加载一个本地副本。 ( 我正在使用我自己的服务器。请使用你自己的服务器测试这个) 。

我也测试了 window.google.load的存在- 我也可以做一个 typeof 检查,看看事物是对象还是函数。 但我觉得这可以。

只是加载逻辑,因为代码高亮似乎失败了因为我发布整个html页面测试:


if (window.google && window.google.load) {
 google.load("jquery","1.3.2");
 } else {
 document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"></script>');
 }

但我必须说,我不确定,如果这是一个关心你的网站访问者你应该摆弄 Googleajax库api

的有趣的事实:我最初试图用一试。catch块的不同版本,但找不到一个干净这个组合。 我很想看到这个想法的其他实现,纯粹是一个练习。

如果你的站点上嵌入了 modernizr.js,你可以使用内置的yepnope.js 来异步加载你的脚本- 在其他的jquery ( 带后备) 中。


Modernizr.load([{
 load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
 test : window.jQuery,
 nope : 'path/to/local/jquery-1.7.2.min.js',
 both : ['myscript.js', 'another-script.js'],
 complete : function () {
 MyApp.init();
 }
}]);

这将从google-cdn加载 jquery 。 之后,如果成功加载 jquery,就会检查它。 如果不是(""),则加载本地版本。 同时你的个人脚本被加载-"两者都兼有"表示load-process是iniated独立于测试结果。

当所有load-processes都完成时,执行一个函数,在'myapp.init'中。

我个人喜欢这种异步脚本加载方式。 当我在构建站点时依靠提供的,我仍然将它嵌入到站点中。 所以实际上没有开销。

这里有一些很好的解决方案,但是我想进一步了解本地文件。

在谷歌失败的场景中,它应该加载一个本地的源,但是服务器上的物理文件未必是最好的选择。 我之所以这么做是因为我目前正在实现相同的解决方案,只希望回退到一个由数据源生成的本地文件。

我的原因是我想要的心灵的时候跟踪我从谷歌 vs 加载本地服务器。 如果我想更改版本,我想保持本地副本与我试图从Google加载的内容同步。 在有很多开发人员的环境中,我认为最好的方法是自动化这个流程,这样一来,所有人都需要更改配置文件中的版本号。

下面是我建议的解决方案,它可以在理论上工作:

  • 在应用程序配置文件中,我将存储 3个东西: 库的绝对 url,js api的url和版本号
  • 编写一个类,获取库本身的文件内容,并将它的存储在我的数据源中,名称和版本号
  • 写入一个处理程序,它将我的本地文件从数据库中取出并缓存该文件,直到版本号更改。
  • 如果它改变了( 在我的应用程序配置中),我的类将基于版本号提取文件内容,将它保存为数据源中的新记录,然后处理程序将启动并提供新版本。

理论上,如果我的代码是正确编写的,那么我需要做的就是更改我的应用程序配置中的版本号,然后继续 ! 你有一个自动的备用解决方案,你不必在服务器上维护物理文件。

大家都觉得怎么样这可能是多余的,但它可能是一种优雅的维护ajax库的方法。

Acorn


if (typeof jQuery == 'undefined') {
//or if (! window.jQuery)
//or if (! 'jQuery' in window)
//or if (! window.hasOwnProperty('jQuery')) 

 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = '/libs/jquery.js';

 var scriptHook = document.getElementsByTagName('script')[0];
 scriptHook.parentNode.insertBefore(script, scriptHook);

}

试图从CDN中包括google的副本后。

在HTML5中,你不需要设置 type 属性。

你也可以使用。。


window.jQuery || document.write('<script src="/libs/jquery.js"></script>');

你可能想使用本地文件作为最后一种方式。

似乎现在自己的jquery CDN不支持 https 。 如果你想的话,你可能想先从那里加载。

下面是序列:谷歌 CDN => CDN => 你的本地副本。


<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">x3C/script>')</script> 

  • 第 1步:jQuery加载失败了? ( 检查 jQuery 变量)

如何检查 javascript 中未定义的变量

  • 步骤 2: 动态导入( 备份) javascript文件

包含JavaScript文件中的JavaScript文件

由于禁止谷歌问题,我更喜欢使用微软 http://www.asp.net/ajaxlibrary/cdn.ashx

这是对这里的一个很好的解释 !

同时实现加载延迟和超时 !

http://happyworm.com/blog/2010/01/28/a-simple-and-robust-cdn-failover-for-jquery-14-in-one-line/

...