document.write fallback導致jQuery無序加載

Question

我正在建立一個使用HTML5 Boilerplate 4.0的新網站，並且遇到了jQuery本地後備代碼的問題。代碼在這裏：

<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> --> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script> 
<script src="js/plugins.js"></script> 
<script src="js/main.js"></script> 

我在本地開發，現在，所以我已經註釋掉了CDN行。我的問題是，jQuery沒有加載，但它加載後plugins.js和main.js，導致未定義的錯誤。

我發現最接近可能的解釋是this previous answer的＃4點，這表明這是預期的，但是...上面是jQuery最常用的本地回退代碼，它是H5BP，這是嚴格審查。我一定錯過了什麼，是嗎？

Answer 1

我answered前一個類似的問題。

你可以做這樣的事情：

function loadScript(pathToScript, callback) { 

    if (/jquery/.test(pathToScript) && window.jQuery) { 
     //jQuery has already been loaded so simply call the callback 
     callback.apply(); 

    } else { 
     var head = document.getElementsByTagName("head")[0]; 
     var script = document.createElement("script"); 

     script.type = "text/javascript"; 
     script.src = pathToScript + "?t=" + new Date().getTime(); //prevent caching 

     if (callback) { 
      script.onload = callback; 
     } 

     head.appendChild(script); 
    } 
} 

var scripts = ['js/vendor/jquery-1.8.1.min.js', 'js/plugins.js', 'js/main.js']; 

(function (i) { 
    if (i < scripts.length) { 
     var self = arguments.callee; 

     loadResource(scripts[i], function() { 
      self(++i); 
     }); 
    } 
})(0); 

Answer 2

無論我才發現這個問題在計算器上一個確切的答案，但是，似乎這個頁面所涵蓋的主題：

綜上所述創建真正強大的故障轉移解決方案並不簡單。我們需要考慮瀏覽器不兼容性，文檔狀態和事件，依賴關係，延遲加載和超時！值得慶幸的是，像LABjs這樣的工具可以幫助我們完全控制JavaScript文件的加載，從而減輕痛苦。

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

注：解決方案依賴於使用的LABjs

Answer 3

您可以考慮使用yepnope與後備並行加載腳本。

從他們的網站：

yepnope.js必須做後備資源的能力和並行仍然 下載相關腳本與第一。

，代碼：

yepnope([{ 
    load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', 
    complete: function() { 
    if (!window.jQuery) { 
     yepnope('local/jquery.min.js'); 
    } 
    } 
}, { 
    load: 'jquery.plugin.js', 
    complete: function() { 
    jQuery(function() { 
     jQuery('div').plugin(); 
    }); 
    } 
}]); 

我希望這幫助！