可編程的腳本載入 雖然標籤簡單得令人心動，但有些情況確實需要更精緻的腳本載入方式。我們可能只想給那些滿足一定條件的用戶加載某個腳本，譬如白金會員或達到一定級別的玩家，也可能只想當用戶單擊激活時才加載某個特性，譬如聊天小部件。 <br><span style="color: rgb(0, 0, 0);"><strong>1、直接載入腳本</strong></span><br>我們可以用類似下面這樣的程式碼插入<script>標籤。 <br></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script);</pre><div class="contentsignin">登入後複製</div></div><p>稍等，我們如何知道腳本何時載入結束呢？我們可以為腳本本身添加一些程式碼來觸發事件，但如果要為每個待加載腳本都添加這樣的程式碼，那也太鬧心了。或者是另一種情況，即我們不可能為第三方伺服器上的腳本添加這樣的程式碼。 HTML5 規格定義了一個可以綁定回呼的onload 屬性。 </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">script.onload = function() { // 现在可以调用脚本里定义的函数了 };</pre><div class="contentsignin">登入後複製</div></div><p>不過， IE8 及較舊的版本並不支援onload ， 它們支援的是onreadystatechange。某些瀏覽器在插入<script>標籤時還會出現一些「靈異事件」。而且，這裡甚至還沒談到錯誤處理呢！為了避免 <br/>所有這些令人頭痛的問題，在此強烈建議使用腳本載入庫。 </p><p><span style="color: #000000"><strong>yepnope的條件載入</strong><br/></span>yepnope是一個簡單的、輕量級的腳本載入函式庫（壓縮後的精簡版只有1.7KB），其設計目標是真誠服務最常見的動態腳本載入需求。 <br/>yepnope 最簡單的用法是，載入腳本並對腳本完成運行這一事件傳回一個回呼。 <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } });</pre><div class="contentsignin">登入後複製</div></div><p>還是無動於衷？下面我們要用yepnope 來並行載入多個腳本並按給定次序運行它們。舉個例子，假設我們想載入Backbone.js，而這個腳本又依賴Underscore.js。為此，我們只需用數組形式提供這兩個腳本的位置作為載入參數。 </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } });</pre><div class="contentsignin">登入後複製</div></div><p>請注意，這裡使用了complete（完成）而不是callback（回呼）。 </p><p>其差異在於，腳本載入清單中的每個資源都會執行callback，而只有當所有腳本都載入完成後才會執行complete。 yepnope 的標誌性特徵是條件載入。給定test 參數，yepnope 會根據該參數值是否為真而載入不同的資源。舉個例子，可以以一定的準確度判斷用戶是否在用觸控螢幕設備，從而據此相應地加載不同的樣式表及腳本。 </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } });</pre><div class="contentsignin">登入後複製</div></div><p>我們只用寥寥幾行程式碼就搭好了舞台，可以基於用戶的接入設備而給他們完全不同的使用體驗。當然，不是所有的條件載入都需要備齊yep（是）和nope（否）這兩種測試結果。 yepnope 最常見的用法之一就是載入墊片腳本以彌補老式瀏覽器缺少的功能。 </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });</pre><div class="contentsignin">登入後複製</div></div><p>頁面使用了yepnope 之後應該變成下面這個漂亮的標記結構：<br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer>
