[英]CDN Fallback for Dependant Scripts
如果我使用以下脚本:
Bootstrap和jQuery验证需要jQuery和jQuery验证非干扰性需要jQuery验证,因此我们有相互依赖的脚本。 我看到的所有后备脚本看起来都是这样的:
(window.jQuery || document.write('<script src="/bundles/jquery"><\/script>'));
($.validator || document.write('<script src="/bundles/jqueryval"><\/script>'));
($.validator.unobtrusive || document.write('<script src="/bundles/jqueryvalunobtrusive"><\/script>'));
($.fn.modal || document.write('<script src="/bundles/bootstrap"><\/script>'));
问题是,如果我使用的是ajax.aspnetcdn.com CDN并失败,则第一行将导致jQuery在本地加载,但接下来的三行代码将在此之前执行,并且错误,因为$未定义。
是否存在处理这些类型的相互依赖的后备脚本的标准方法? 我环顾四周,找不到用于处理这种情况的资源。
UPDATE
我已尽我所能回答了这个问题,但我仍在寻找人们如何处理此问题的答案。
依赖于另一个第三方脚本似乎有些矫kill过正 ,但是我发现Fallback.js和YepNope.js可能能够处理这种情况。 对于CDN正常工作的日常情况,我不确定性能的影响。 更多信息在这里 。
我还可以编写自己的实现:
JavaScript后备
(function (document, fallbacks) {
var check = function (fallbacks, i) {
if (i < fallbacks.length) {
var fallback = fallbacks[i];
if (fallback.test()) {
check(fallbacks, i + 1);
}
else {
var script = document.createElement("script");
script.onload = function () {
check(fallbacks, i + 1);
};
script.src = fallback.src;
document.getElementsByTagName("body")[0].appendChild(script);
}
}
}
check(fallbacks, 0);
})(document, [
{ test: function () { return window.Modernizr; }, src: "/js/modernizr.js" },
{ test: function () { return window.jQuery; }, src: "/js/jquery.js" },
{ test: function () { return $.validator; }, src: "/js/jquery-validate.js" },
{ test: function () { return $.validator.unobtrusive; }, src: "/js/jquery-validate-unobtrusive.js" },
{ test: function () { return $.fn.modal; }, src: "/js/bootstrap.js" },
{ test: function () { return window.Hammer && window.Hammer.VERSION; }, src: "/js/hammer.js" },
{ test: function () { return window.Zepto; }, src: "/js/bootstrap-touch-carousel.js" }
]);
CSS后备
使用元标记的想法是从新的ASP.NET 5 MVC 6框架“借用”的。
(function (document, fallbacks) {
var metas = document.getElementsByTagName("meta");
for (var i = 0; i < fallbacks.length; ++i) {
var fallback = fallbacks[i];
for (j = 0; j < metas.length; ++j) {
var meta = metas[j];
if (meta.getAttribute("name") == fallback.metaName) {
if (!fallback.test(meta)) {
var link = document.createElement("link");
link.href = fallback.href;
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);
}
break;
}
}
}
})(document, [
{
// metaName - The name of the meta tag that the test is performed on. The meta tag must have a class from the
// relevant stylesheet on it so it is styled and a test can be performed against it. E.g. for
// font awesome the <meta name="x-font-awesome-stylesheet-fallback-test" class="fa"> meta tag is
// added. The 'fa' class causes the font awesome style to be applied to it.
metaName: "x-font-awesome-stylesheet-fallback-test",
// test - The test to perform against the meta tag. Checks to see if the Font awesome styles loaded
// successfully by checking that the font-family of the meta tag is 'FontAwesome'.
test: function (meta) { return meta.style.fontFamily === "FontAwesome"; },
// href - The URL to the fallback stylesheet.
href: "/css/font-awesome.css"
}
]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.