什么是一个好方法来尝试加载托管的jQuery在谷歌(或其他谷歌托管库),但加载我的jQuery副本,如果谷歌尝试失败?
我不是说谷歌很古怪。在某些情况下,谷歌副本会被屏蔽(例如,显然在伊朗)。
我是否会设置一个计时器并检查jQuery对象?
两份拷贝都通过的危险是什么?
并不是真的在寻找像“只用谷歌”或“只用你自己的”这样的答案。我理解这些论点。我还知道用户可能缓存了谷歌版本。我在考虑云计算的后备方案。
编辑:这部分增加了…
因为谷歌建议使用谷歌。加载加载ajax库,它执行回调时,我想知道这是否是序列化这个问题的关键。
我知道这听起来有点疯狂。我只是想弄清楚它是否能以一种可靠的方式完成。
更新:jQuery现在托管在微软的CDN上。
http://www.asp.net/ajax/cdn/
如果你的网站上嵌入了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是否加载成功。如果不是("nope"),则加载本地版本。同时也加载了您的个人脚本——“both”表示加载过程的初始化独立于测试的结果。
当所有加载过程完成时,执行一个函数,在这种情况下为'MyApp.init'。
我个人更喜欢这种异步脚本加载方式。由于我在构建网站时依赖modernizr提供的功能测试,所以我将它嵌入到网站中。所以实际上没有开销。
在ASP中使用Razor语法。NET,这段代码提供了回退支持,并使用虚拟根:
@{var jQueryPath = Url.Content("~/Scripts/jquery-1.7.1.min.js");}
<script type="text/javascript">
if (typeof jQuery == 'undefined')
document.write(unescape("%3Cscript src='@jQueryPath' type='text/javascript'%3E%3C/script%3E"));
</script>
或者制作一个helper (helper概述):
@helper CdnScript(string script, string cdnPath, string test) {
@Html.Raw("<script src=\"http://ajax.aspnetcdn.com/" + cdnPath + "/" + script + "\" type=\"text/javascript\"></script>" +
"<script type=\"text/javascript\">" + test + " || document.write(unescape(\"%3Cscript src='" + Url.Content("~/Scripts/" + script) + "' type='text/javascript'%3E%3C/script%3E\"));</script>")
}
像这样使用它:
@CdnScript("jquery-1.7.1.min.js", "ajax/jQuery", "window.jQuery")
@CdnScript("jquery.validate.min.js", "ajax/jquery.validate/1.9", "jQuery.fn.validate")
谷歌托管jQuery
如果你关心旧的浏览器,主要是IE9之前的IE版本,这是最广泛兼容的jQuery版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
如果你不关心老die,这个更小更快:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
备份/后备计划!
无论哪种方式,您都应该使用回退到本地,以防谷歌CDN失败(不太可能)或在您的用户访问您的网站的位置被阻止(略有可能),如伊朗或有时中国。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="/path/to/your/jquery"><\/script>'); }
</script>
参考:http://websitespeedoptimizations.com/ContentDeliveryNetworkPost.aspx
你可以使用如下代码:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="./scripts/jquery.min.js">\x3C/script>')</script>
但是你也可以使用一些库来为你的脚本设置一些可能的回退,并优化加载过程:
basket.js
RequireJS
yepnope
例子:
basket.js
我认为目前最好的变种。将您的脚本缓存在localStorage,这将加快下次加载。最简单的调用:
basket.require({ url: '/path/to/jquery.js' });
这将返回一个promise,你可以在错误时执行下一步调用,或者在成功时加载依赖项:
basket
.require({ url: '/path/to/jquery.js' })
.then(function () {
// Success
}, function (error) {
// There was an error fetching the script
// Try to load jquery from the next cdn
});
RequireJS
requirejs.config({
enforceDefine: true,
paths: {
jquery: [
'//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min',
//If the CDN location fails, load from this location
'js/jquery-2.0.0.min'
]
}
});
//Later
require(['jquery'], function ($) {
});
耶普诺普
yepnope([{
load: 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js',
complete: function () {
if (!window.jQuery) {
yepnope('js/jquery-2.0.0.min.js');
}
}
}]);