在javascript中如何實作按順序載入運行js方法

本篇文章主要教給大家如何在javascript中動態載入按順序載入運行js的方法以及實作程式碼，需要的朋友參考學習下吧。

首先如果大家對JS動態載入有不理解的地方可以參考：

javascript動態載入實作方法

動態載入JS檔的三種方法

如何你的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 檔案沒有互相依賴關係,不要使用這種方法.

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在JavaScript中如何實現彈性效果

在axios中如何實作cookie跨域

使用JavaScript如何實作二元樹遍歷

#

以上是在javascript中如何實作按順序載入運行js方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！