CDN Запасной для зависимых скриптов

Question

Если я использую следующие скрипты:

• JQuery
• JQuery Validation
• JQuery Validation ненавязчивым
• Bootstrap

Bootstrap и JQuery Validation требует JQuery и jQuery Validation Unobtrusive требует проверки 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 для загрузки локально, но следующие три строки кода будут выполняться до этого и ошибка, потому что $ undefined.

Существует ли стандартный способ обработки этих типов взаимозависимых сценариев возврата? Я просмотрел и не могу найти ресурс для обработки этого типа сценария.

UPDATE

Я ответил на вопрос, как могу, но я до сих пор ищу ответ о том, как люди с этим справиться.

Answer 1

Кажется, излишне полагаться на еще один сторонний скрипт, но я обнаружил Fallback.js и YepNope.js, которые могут справиться с этим сценарием. Я не уверен, что последствия повседневного сценария, в котором работает CDN, работают. Больше информации here.

Я также был идти в письменной форме свои собственные реализации:

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" 
    } 
]);