javascript依序載入運行js方法_javascript技巧

本篇文章主要教給大家如何在javascript中動態載入依序載入執行javascript的方法以及實作程式碼，對javascript 有興趣的朋友參考學習下吧。

如何你的script 上沒有任何非同步,阻塞等標註:

瀏覽器會異步載入javascript 檔案,但是會按照引用檔案中的書寫順序從上到下執行解析javascript

Defer屬性標記

defer是html4.0中定義的，這個屬性使得瀏覽器能延遲腳本的執行，等文檔完成解析完成後會按照他們在文檔出現順序再去下載解析。

也就是說defer屬性的script 就類似於將script 放在body中的載入效果一致.

但是defer屬性在各個瀏覽器中支援程度有點不同,就是說,有的瀏覽器不完全支援.

Async屬性標註

#async是HTML5新增的屬性， 大部分先進支援該屬性的.
這個屬性的作用是讓腳本能異步加載，也就是說當瀏覽器遇到async屬性的script 時瀏覽器加載css一樣是異步加載的

##javascript 動態加載js文件

原理很簡單,建立一個script 節點,給節點賦予script 的屬性,然後append 到dom 的head 標籤中.

function loadJS(url){
  var Script = document.createElement('script');
  Script.setAttribute('src', url);
  Script.setAttribute('type', 'text/javascript');
  document.body.appendChild(Script);
  return Script;
}

如果我們同時載入多個javascript 檔案

loadJS('a.js');
loadJS('b.js');

上面的效果是,a.js和b.js 檔案會被非同步同時載入,如果b.js 檔案比a.js 檔案小的話,很可能先載入執行b.js ,完全不會按照書寫結果載入執行

所以,如果你的b.js 檔案有依賴a.js 的東西,那麼就會報錯,因為解釋執行b.js 的時候,a.js 還在載入中.

控制javascript 載入執行順序

我們對程式碼做如下改進

function loadJS(url, success) {
      var domScript = document.createElement('script');
      domScript.src = url;
      success = success || function () {
          };
      domScript.onload = domScript.onreadystatechange = function () {
        if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
          success();
          this.onload = this.onreadystatechange = null;
          this.parentNode.removeChild(this);
        }
      }
      document.getElementsByTagName('head')[0].appendChild(domScript);
    }

透過script 節點上的onload 和onreadystatechange 屬性來監聽節點src是否載入完成

如果成功,呼叫

回呼函數 success();

我們在呼叫此方法的時候,可以透過loadJS 回呼函數來知道目前節點已經載入完成,然後在回呼函數裡繼續載入其他script 檔

loadJS(getUrl('a.js'), function () {
      loadJS(getUrl('b.js'), function () {
        console.log('a.js ,b.js 加载完成');
      });
});

#透過上面的方法載入,是一種同步阻塞載入, a.js 載入完成後才會載入執行b.js 檔案.

如果你的javascript 檔案沒有相互依賴關係,不要使用這種方法.

相關建議：

html、css以及js檔案載入順序及執行情況

jquery popupDialog 使用 載入jsp頁面的方法

#動態載入js的幾種方法_javascript技巧

以上是javascript依序載入運行js方法_javascript技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！