【速記】獲取當前正在運行的js腳本的地址與HTMLScriptElement.prototype.readyState

原由

在閱讀layUI的源代碼關於加載遠程腳本的代碼中出現了判斷當前js腳本地址的代碼，其中出現了對於document.currentScript支持與不支持時，會走不一樣的邏輯。
若是支持document.currentScript，直接從document.currentScript.src獲取當前腳本運行的地址；
若是不支持document.currentScript,則遍歷文檔全部的<script>標籤，判斷哪一個<script>標籤的readyState爲'interactive'，則說明此標籤的src屬性爲當前腳本運行的地址。

代碼

//獲取layui所在目錄
 getPath = function () {
      var jsPath = doc.currentScript ? doc.currentScript.src : function () {
        var js = doc.scripts
          , last = js.length - 1
          , src;
        for (var i = last;i > 0;i--) {
          if (js[i].readyState === 'interactive') {
            src = js[i].src;
            break;
          }
        }
        return src || js[last].src;
      }();
      return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
    }()

爲何要進行這種判斷？

首先讓咱們看一下Document.currentScript的瀏覽器支持狀況，具體以下圖：

由圖可見IE瀏覽器在Document.currentScript的支持上全線陣亡，那在IE瀏覽器上如何獲取當前腳本的地址呢？原來IE的<script>標籤對象支持一個readyState的屬性，其屬性值與Document.readyState同樣，loading表示正在加載，interactive表示當前處於互動狀態（也就是正在運行），complete表示腳本已經加載完成。咱們能夠利用readyState是否爲interactive來判斷某個<script>標籤爲當前運行代碼所在的位置。

須要的注意的是HTMLScriptElement.prototype.readyState只有IE支持，Chrome和Firefox均不支持。

根據上述原理，對於Document.currentScript的polyfill實現，其實就是基於HTMLScriptElement.prototype.readyState來實現的，具體可閱讀https://github.com/JamesMGree... 的具體實現。

相關文檔

Document.currentScript: https://developer.mozilla.org...
Document.readyState: https://developer.mozilla.org...