javascript - CDN Fallback for Dependant Scripts -

if using following scripts:

• jquery
• jquery validation
• jquery validation unobtrusive
• bootstrap

bootstrap , jquery validation require jquery , jquery validation unobtrusive requires jquery validation have interdependent scripts. fallback scripts have seen this:

(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>')); 

the problem if using ajax.aspnetcdn.com cdn , fails, first line cause jquery loaded locally next 3 lines of code execute before , error because $ undefined.

is there standard way handle these types of interdependent fall-back scripts? have looked around , can't find resource handling type of scenario.

update

i answered question best can i'm still looking answer on how people handle this.

it seems overkill rely on yet third party script have discovered fallback.js , yepnope.js may able handle scenario. not sure performance implications of everyday scenario cdn's work. more info here.

i had go @ writing own implementations:

javascript fallbacks

(function (document, fallbacks) {      var check = function (fallbacks, i) {         if (i < fallbacks.length) {             var fallback = fallbacks[i];             if (fallback.test()) {                 check(fallbacks, + 1);             }             else {                 var script = document.createelement("script");                 script.onload = function () {                     check(fallbacks, + 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 fallbacks

the idea using meta tag 'borrowed' new asp.net 5 mvc 6 framework.

(function (document, fallbacks) {      var metas = document.getelementsbytagname("meta");      (var = 0; < fallbacks.length; ++i) {         var fallback = fallbacks[i];          (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 - name of meta tag test performed on. meta tag must have class         //            relevant stylesheet on styled , test can performed against it. e.g.          //            font awesome <meta name="x-font-awesome-stylesheet-fallback-test" class="fa"> meta tag         //            added. 'fa' class causes font awesome style applied it.         metaname: "x-font-awesome-stylesheet-fallback-test",         // test - test perform against meta tag. checks see if font awesome styles loaded          //        checking font-family of meta tag 'fontawesome'.         test: function (meta) { return meta.style.fontfamily === "fontawesome"; },         // href - url fallback stylesheet.         href: "/css/font-awesome.css"     } ]);