Seajs源碼解讀

時間 2019-11-16

標籤 seajs 源碼解讀简体版

原文原文鏈接

近幾年前端工程化愈來愈完善，打包工具也已是前端標配了，像seajs這種老古董早已中止維護，並且使用的人估計也幾個了。但這並不能阻止好奇的我，爲了瞭解當年的前端前輩們是如何在瀏覽器進行代碼模塊化的，我鼓起勇氣翻開了Seajs的源碼。下面就和我一塊兒細細品味Seajs源碼吧。javascript

如何使用seajs

在看Seajs源碼以前，先看看Seajs是如何使用的，畢竟剛入行的時候，你們就都使用browserify、webpack之類的東西了，還歷來沒有用過Seajs。css

<!-- 首先在頁面中引入sea.js，也可使用CDN資源 -->
<script type="text/javascript" src="./sea.js"></script>
<script> // 設置一些參數 seajs.config({ debug: true, // debug爲false時，在模塊加載完畢後會移除head中的script標籤 base: './js/', // 經過路徑加載其餘模塊的默認根目錄 alias: { // 別名 jquery: 'https://cdn.bootcss.com/jquery/3.2.1/jquery' } }) seajs.use('main', function(main) { alert(main) }) </script>

//main.js
define(function (require, exports, module) {
  // require('jquery')
  // var $ = window.$

  module.exports = 'main-module'
})
複製代碼

seajs的參數配置

首先經過script導入seajs，而後對seajs進行一些配置。seajs的配置參數不少具體不詳細介紹，seajs將配置項會存入一個私有對象data中，而且若是以前有設置過某個屬性，而且這個屬性是數組或者對象，會將新值與舊值進行合併。html

(function (global, undefined) {
  if (global.seajs) {
    return
  }
  var data = seajs.data = {}
  
  seajs.config = function (configData) {
    for (var key in configData) {
      var curr = configData[key] // 獲取當前配置
      var prev = data[key] // 獲取以前的配置
      if (prev && isObject(prev)) { // 若是以前已經設置過，且爲一個對象
        for (var k in curr) {
          prev[k] = curr[k] // 用新值覆蓋舊值，舊值保留不變
        }
      }
      else {
        // 若是以前的值爲數組，進行concat
        if (isArray(prev)) {
          curr = prev.concat(curr)
        }
        // 確保 base 爲一個路徑
        else if (key === "base") {
          // 必須已 "/" 結尾
          if (curr.slice(-1) !== "/") {
            curr += "/"
          }
          curr = addBase(curr) // 轉換爲絕對路徑
        }

        // Set config
        data[key] = curr  
      }
    }
  }
})(this);
複製代碼

設置的時候還有個比較特殊的地方，就是base這個屬性。這表示全部模塊加載的基礎路徑，因此格式必須爲一個路徑，而且該路徑最後會轉換爲絕對路徑。好比，個人配置爲base: './js'，我當前訪問的域名爲http://qq.com/web/index.html，最後base屬性會被轉化爲http://qq.com/web/js/。而後，全部依賴的模塊id都會根據該路徑轉換爲uri，除非有定義其餘配置，關於配置點到爲止，到用到的地方再來細說。前端

模塊的加載與執行

下面咱們調用了use方法，該方法就是用來加載模塊的地方，相似與requirejs中的require方法。java

// requirejs
require(['main'], function (main) {
  console.log(main)
});
複製代碼

只是這裏的依賴項，seajs能夠傳入字符串，而requirejs必須爲一個數組，seajs會將字符串轉爲數組，在內部seajs.use會直接調用Module.use。這個Module爲一個構造函數，裏面掛載了全部與模塊加載相關的方法，還有不少靜態方法，好比實例化Module、轉換模塊id爲uri、定義模塊等等，廢話很少說直接看代碼。node

seajs.use = function(ids, callback) {
  Module.use(ids, callback, data.cwd + "_use_" + cid())
  return seajs
}

// 該方法用來加載一個匿名模塊
Module.use = function (ids, callback, uri) { //若是是經過seajs.use調用，uri是自動生成的
  var mod = Module.get(
    uri,
    isArray(ids) ? ids : [ids] // 這裏會將依賴模塊轉成數組
  )

  mod._entry.push(mod) // 表示當前模塊的入口爲自己，後面還會把這個值傳入他的依賴模塊
  mod.history = {}
  mod.remain = 1 // 這個值後面會用來標識依賴模塊是否已經所有加載完畢

  mod.callback = function() { //設置模塊加載完畢的回調，這一部分很重要，尤爲是exec方法
    var exports = []
    var uris = mod.resolve()
    for (var i = 0, len = uris.length; i < len; i++) {
      exports[i] = cachedMods[uris[i]].exec()
    }
    if (callback) {
      callback.apply(global, exports) //執行回調
    }
  }

  mod.load()
}
複製代碼

這個use方法一共作了三件事：jquery

調用Module.get，進行Module實例化
爲模塊綁定回調函數
調用load，進行依賴模塊的加載

實例化模塊，一切的開端

首先use方法調用了get靜態方法，這個方法是對Module進行實例化，而且將實例化的對象存入到全局對象cachedMods中進行緩存，而且以uri做爲模塊的標識，若是以後有其餘模塊加載該模塊就能直接在緩存中獲取。webpack

var cachedMods = seajs.cache = {} // 模塊的緩存對象
Module.get = function(uri, deps) {
  return cachedMods[uri] || (cachedMods[uri] = new Module(uri, deps))
}
function Module(uri, deps) {
  this.uri = uri
  this.dependencies = deps || []
  this.deps = {} // Ref the dependence modules
  this.status = 0
  this._entry = []
}
複製代碼

綁定的回調函數會在全部模塊加載完畢以後調用，咱們先跳過，直接看load方法。load方法會先把全部依賴的模塊id轉爲uri，而後進行實例化，最後調用fetch方法，綁定模塊加載成功或失敗的回調，最後進行模塊加載。具體代碼以下(代碼通過精簡)：git

// 全部依賴加載完畢後執行 onload
Module.prototype.load = function() {
  var mod = this
  mod.status = STATUS.LOADING // 狀態置爲模塊加載中
  
  // 調用resolve方法，將模塊id轉爲uri。
  // 好比以前的"mian"，會在前面加上咱們以前設置的base，而後在後面拼上js後綴
  // 最後變成: "http://qq.com/web/js/main.js"
  var uris = mod.resolve()

  // 遍歷全部依賴項的uri，而後進行依賴模塊的實例化
  for (var i = 0, len = uris.length; i < len; i++) {
    mod.deps[mod.dependencies[i]] = Module.get(uris[i])
  }

  // 將entry傳入到全部的依賴模塊，這個entry是咱們在use方法的時候設置的
  mod.pass()
  
  if (mod._entry.length) {
    mod.onload()
    return
  }

  // 開始進行並行加載
  var requestCache = {}
  var m

  for (i = 0; i < len; i++) {
    m = cachedMods[uris[i]] // 獲取以前實例化的模塊對象
    m.fetch(requestCache) // 進行fetch
  }

  // 發送請求進行模塊的加載
  for (var requestUri in requestCache) {
    if (requestCache.hasOwnProperty(requestUri)) {
      requestCache[requestUri]() //調用 seajs.request
    }
  }
}
複製代碼

將模塊id轉爲uri

resolve方法實現能夠稍微看下，基本上是把config裏面的參數拿出來，進行拼接uri的處理。github

Module.prototype.resolve = function() {
  var mod = this
  var ids = mod.dependencies // 取出全部依賴模塊的id
  var uris = []
  // 進行遍歷操做
  for (var i = 0, len = ids.length; i < len; i++) {
    uris[i] = Module.resolve(ids[i], mod.uri) //將模塊id轉爲uri
  }
  return uris
}

Module.resolve = function(id, refUri) {
  var emitData = { id: id, refUri: refUri }
  return seajs.resolve(emitData.id, refUri) // 調用 id2Uri
}

seajs.resolve = id2Uri

function id2Uri(id, refUri) { // 將id轉爲uri，轉換配置中的一些變量
  if (!id) return ""

  id = parseAlias(id)
  id = parsePaths(id)
  id = parseAlias(id)
  id = parseVars(id)
  id = parseAlias(id)
  id = normalize(id)
  id = parseAlias(id)

  var uri = addBase(id, refUri)
  uri = parseAlias(uri)
  uri = parseMap(uri)
  return uri
}
複製代碼

最後就是調用了id2Uri，將id轉爲uri，其中調用了不少的parse方法，這些方法不一一去看，原理大體同樣，主要看下parseAlias。若是這個id有定義過alias，將alias取出，好比id爲"jquery"，以前在定義alias中又有定義jquery: 'https://cdn.bootcss.com/jquery/3.2.1/jquery'，則將id轉化爲'https://cdn.bootcss.com/jquery/3.2.1/jquery'。代碼以下：

function parseAlias(id) { //若是有定義alias，將id替換爲別名對應的地址
  var alias = data.alias
  return alias && isString(alias[id]) ? alias[id] : id
}
複製代碼

爲依賴添加入口，方便追根溯源

resolve以後得到uri，經過uri進行Module的實例化，而後調用pass方法，這個方法主要是記錄入口模塊到底有多少個未加載的依賴項，存入到remain中，並將entry都存入到依賴模塊的_entry屬性中，方便回溯。而這個remain用於計數，最後onload的模塊數與remain相等就激活entry模塊的回調。具體代碼以下(代碼通過精簡)：

Module.prototype.pass = function() {
  var mod = this
  var len = mod.dependencies.length

  // 遍歷入口模塊的_entry屬性，這個屬性通常只有一個值，就是它自己
  // 具體能夠回去看use方法 -> mod._entry.push(mod)
  for (var i = 0; i < mod._entry.length; i++) {
    var entry = mod._entry[i] // 獲取入口模塊
    var count = 0 // 計數器，用於統計未進行加載的模塊
    for (var j = 0; j < len; j++) {
      var m = mod.deps[mod.dependencies[j]] //取出依賴的模塊
      // 若是模塊未加載，而且在entry中未使用，將entry傳遞給依賴
      if (m.status < STATUS.LOADED && !entry.history.hasOwnProperty(m.uri)) {
        entry.history[m.uri] = true // 在入口模塊標識曾經加載過該依賴模塊
        count++
        m._entry.push(entry) // 將入口模塊存入依賴模塊的_entry屬性
      }
    }
    // 若是未加載的依賴模塊大於0
    if (count > 0) {
      // 這裏`count - 1`的緣由也能夠回去看use方法 -> mod.remain = 1
      // remain的初始值就是1，表示默認就會有一個未加載的模塊，全部須要減1
      entry.remain += count - 1
      // 若是有未加載的依賴項，則移除掉入口模塊的entry
      mod._entry.shift()
      i--
    }
  }
}
複製代碼

如何發起請求，下載其餘依賴模塊？

總的來講pass方法就是記錄了remain的數值，接下來就是重頭戲了，調用全部依賴項的fetch方法，而後進行依賴模塊的加載。調用fetch方法的時候會傳入一個requestCache對象，該對象用來緩存全部依賴模塊的request方法。

var requestCache = {}
for (i = 0; i < len; i++) {
  m = cachedMods[uris[i]] // 獲取以前實例化的模塊對象
  m.fetch(requestCache) // 進行fetch
}

Module.prototype.fetch = function(requestCache) {
  var mod = this
  var uri = mod.uri

  mod.status = STATUS.FETCHING
  callbackList[requestUri] = [mod]

  emit("request", emitData = { // 設置加載script時的一些數據
    uri: uri,
    requestUri: requestUri,
    onRequest: onRequest,
    charset: isFunction(data.charset) ? data.charset(requestUri) : data.charset,
    crossorigin: isFunction(data.crossorigin) ? data.crossorigin(requestUri) : data.crossorigin
  })

  if (!emitData.requested) { //發送請求加載js文件
    requestCache[emitData.requestUri] = sendRequest
  }

  function sendRequest() { // 被request方法，最終會調用 seajs.request
    seajs.request(emitData.requestUri, emitData.onRequest, emitData.charset, emitData.crossorigin)
  }

  function onRequest(error) { //模塊加載完畢的回調
    var m, mods = callbackList[requestUri]
    delete callbackList[requestUri]
    // 保存元數據到匿名模塊，uri爲請求js的uri
    if (anonymousMeta) {
      Module.save(uri, anonymousMeta)
      anonymousMeta = null
    }
    while ((m = mods.shift())) {
      // When 404 occurs, the params error will be true
      if(error === true) {
        m.error()
      }
      else {
        m.load()
      }
    }
  }
}
複製代碼

通過fetch操做後，可以獲得一個requestCache對象，該對象緩存了模塊的加載方法，從上面代碼就能看到，該方法最後調用的是seajs.request方法，而且傳入了一個onRequest回調。

for (var requestUri in requestCache) {
  requestCache[requestUri]() //調用 seajs.request
}

//用來加載js腳本的方法
seajs.request = request

function request(url, callback, charset, crossorigin) {
  var node = doc.createElement("script")
  addOnload(node, callback, url)
  node.async = true //異步加載
  node.src = url
  head.appendChild(node)
}

function addOnload(node, callback, url) {
  node.onload = onload
  node.onerror = function() {
    emit("error", { uri: url, node: node })
    onload(true)
  }

  function onload(error) {
    node.onload = node.onerror = node.onreadystatechange = null
    // 腳本加載完畢的回調
    callback(error)
  }
}
複製代碼

通知入口模塊

上面就是request的邏輯，只不過刪除了一些兼容代碼，其實原理很簡單，和requirejs同樣，都是建立script標籤，綁定onload事件，而後插入head中。在onload事件發生時，會調用以前fetch定義的onRequest方法，該方法最後會調用load方法。沒錯這個load方法又出現了，那麼依賴模塊調用和入口模塊調用有什麼區別呢，主要體如今下面代碼中：

if (mod._entry.length) {
  mod.onload()
  return
}
複製代碼

若是這個依賴模塊沒有另外的依賴模塊，那麼他的entry就會存在，而後調用onload模塊，可是若是這個代碼中有define方法，而且還有其餘依賴項，就會走上面那麼邏輯，遍歷依賴項，轉換uri，調用fetch巴拉巴拉。這個後面再看，先看看onload會作什麼。

Module.prototype.onload = function() {
  var mod = this
  mod.status = STATUS.LOADED 
  for (var i = 0, len = (mod._entry || []).length; i < len; i++) {
    var entry = mod._entry[i]
    // 每次加載完畢一個依賴模塊，remain就-1
    // 直到remain爲0，就表示全部依賴模塊加載完畢
    if (--entry.remain === 0) {
      // 最後就會調用entry的callback方法
      // 這就是前面爲何要給每一個依賴模塊存入entry
      entry.callback()
    }
  }
  delete mod._entry
}
複製代碼

依賴模塊執行，完成所有操做

還記得最開始use方法中給入口模塊設置callback方法嗎，沒錯，兜兜轉轉咱們又回到了起點。

mod.callback = function() { //設置模塊加載完畢的回調
  var exports = []
  var uris = mod.resolve()

  for (var i = 0, len = uris.length; i < len; i++) {
    // 執行全部依賴模塊的exec方法，存入exports數組
    exports[i] = cachedMods[uris[i]].exec()
  }

  if (callback) {
    callback.apply(global, exports) //執行回調
  }

  // 移除一些屬性
  delete mod.callback
  delete mod.history
  delete mod.remain
  delete mod._entry
}
複製代碼

那麼這個exec到底作了什麼呢？

Module.prototype.exec = function () {
  var mod = this

  mod.status = STATUS.EXECUTING

  if (mod._entry && !mod._entry.length) {
    delete mod._entry
  }

  function require(id) {
    var m = mod.deps[id]
    return m.exec()
  }

  var factory = mod.factory

  // 調用define定義的回調
  // 傳入commonjs相關三個參數: require, module.exports, module
  var exports = factory.call(mod.exports = {}, require, mod.exports, mod)
  if (exports === undefined) {
    exports = mod.exports //若是函數沒有返回值，就取mod.exports
  }
  mod.exports = exports
  mod.status = STATUS.EXECUTED

  return mod.exports // 返回模塊的exports
}
複製代碼

這裏的factory就是依賴模塊define中定義的回調函數，例如咱們加載的main.js中，定義了一個模塊。

define(function (require, exports, module) {
  module.exports = 'main-module'
})
複製代碼

那麼調用這個factory的時候，exports就爲module.exports，也是是字符串"main-moudle"。最後callback傳入的參數就是"main-moudle"。因此咱們執行最開頭寫的那段代碼，最後會在頁面上彈出main-moudle。

define定義模塊

你覺得到這裏就結束了嗎？並無。前面只說了加載依賴模塊中define方法中沒有其餘依賴，那若是有其餘依賴呢？廢話很少說，先看看define方法作了什麼：

global.define = Module.define
Module.define = function (id, deps, factory) {
  var argsLen = arguments.length

  // 參數校準
  if (argsLen === 1) {
    factory = id
    id = undefined
  }
  else if (argsLen === 2) {
    factory = deps
    if (isArray(id)) {
      deps = id
      id = undefined
    }
    else {
      deps = undefined
    }
  }

  // 若是沒有直接傳入依賴數組
  // 則從factory中提取全部的依賴模塊到dep數組中
  if (!isArray(deps) && isFunction(factory)) {
    deps = typeof parseDependencies === "undefined" ? [] : parseDependencies(factory.toString())
  }

  var meta = { //模塊加載與定義的元數據
    id: id,
    uri: Module.resolve(id),
    deps: deps,
    factory: factory
  }

  // 激活define事件, used in nocache plugin, seajs node version etc
  emit("define", meta)

  meta.uri ? Module.save(meta.uri, meta) :
    // 在腳本加載完畢的onload事件進行save
    anonymousMeta = meta
  }
複製代碼

首先進行了參數的修正，這個邏輯很簡單，直接跳過。第二步判斷了有沒有依賴數組，若是沒有，就經過parseDependencies方法從factory中獲取。這個方法頗有意思，是一個狀態機，會一步步的去解析字符串，匹配到require，將其中的模塊取出，最後放到一個數組裏。這個方法在requirejs中是經過正則實現的，早期seajs也是經過正則匹配的，後來改爲了這種狀態機的方式，多是考慮到性能的問題。seajs的倉庫中專門有一個模塊來說這個東西的，請看連接。

獲取到依賴模塊以後又設置了一個meta對象，這個就表示這個模塊的原數據，裏面有記錄模塊的依賴項、id、factory等。若是這個模塊define的時候沒有設置id，就表示是個匿名模塊，那怎麼才能與以前發起請求的那個mod相匹配呢？

這裏就有了一個全局變量anonymousMeta，先將元數據放入這個對象。而後回過頭看看模塊加載時設置的onload函數裏面有一段就是獲取這個全局變量的。

function onRequest(error) { //模塊加載完畢的回調
...
  // 保存元數據到匿名模塊，uri爲請求js的uri
  if (anonymousMeta) {
    Module.save(uri, anonymousMeta)
    anonymousMeta = null
  }
...
}
複製代碼

不論是不是匿名模塊，最後都是經過save方法，將元數據存入到mod中。

// 存儲元數據到 cachedMods 中
Module.save = function(uri, meta) {
  var mod = Module.get(uri)
  
  if (mod.status < STATUS.SAVED) {
    mod.id = meta.id || uri
    mod.dependencies = meta.deps || []
    mod.factory = meta.factory
    mod.status = STATUS.SAVED
  }
}
複製代碼

這裏完成以後，就是和前面的邏輯同樣了，先去校驗當前模塊有沒有依賴項，若是有依賴項，就去加載依賴項和use的邏輯是同樣的，等依賴項所有加載完畢後，通知入口模塊的remain減1，知道remain爲0，最後調用入口模塊的回調方法。整個seajs的邏輯就已經所有走通，Yeah！