Seajs源碼詳解分析

<!-- 首先在頁面中引入sea.js，也可以使用cdn資源 -->
<script type="text/javascript" src="./sea.js"></script>
<script>
// 設(shè)置一些參數(shù)
seajs.config({
 debug: true, // debug為false時(shí)，在模塊加載完畢后會(huì)移除head中的script標(biāo)簽
 base: './js/', // 通過路徑加載其他模塊的默認(rèn)根目錄
 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'
})

(function (global, undefined) {
 if (global.seajs) {
 return
 }
 var data = seajs.data = {}
 
 seajs.config = function (configData) {
 for (var key in configData) {
  var curr = configData[key] // 獲取當(dāng)前配置
  var prev = data[key] // 獲取之前的配置
  if (prev && isObject(prev)) { // 如果之前已經(jīng)設(shè)置過，且為一個(gè)對(duì)象
  for (var k in curr) {
   prev[k] = curr[k] // 用新值覆蓋舊值，舊值保留不變
  }
  }
  else {
  // 如果之前的值為數(shù)組，進(jìn)行concat
  if (isArray(prev)) {
   curr = prev.concat(curr)
  }
  // 確保 base 為一個(gè)路徑
  else if (key === "base") {
   // 必須已 "/" 結(jié)尾
   if (curr.slice(-1) !== "/") {
   curr += "/"
   }
   curr = addBase(curr) // 轉(zhuǎn)換為絕對(duì)路徑
  }

  // Set config
  data[key] = curr 
  }
 }
 }
})(this);

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

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

// 該方法用來加載一個(gè)匿名模塊
Module.use = function (ids, callback, uri) { //如果是通過seajs.use調(diào)用，uri是自動(dòng)生成的
 var mod = Module.get(
 uri,
 isArray(ids) ? ids : [ids] // 這里會(huì)將依賴模塊轉(zhuǎn)成數(shù)組
 )

 mod._entry.push(mod) // 表示當(dāng)前模塊的入口為本身，后面還會(huì)把這個(gè)值傳入他的依賴模塊
 mod.history = {}
 mod.remain = 1 // 這個(gè)值后面會(huì)用來標(biāo)識(shí)依賴模塊是否已經(jīng)全部加載完畢

 mod.callback = function() { //設(shè)置模塊加載完畢的回調(diào)，這一部分很重要，尤其是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) //執(zhí)行回調(diào)
 }
 }

 mod.load()
}

var cachedMods = seajs.cache = {} // 模塊的緩存對(duì)象
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 = []
}

// 所有依賴加載完畢后執(zhí)行 onload
Module.prototype.load = function() {
 var mod = this
 mod.status = STATUS.LOADING // 狀態(tài)置為模塊加載中
 
 // 調(diào)用resolve方法，將模塊id轉(zhuǎn)為uri。
 // 比如之前的"mian"，會(huì)在前面加上我們之前設(shè)置的base，然后在后面拼上js后綴
 // 最后變成: "http://qq.com/web/js/main.js"
 var uris = mod.resolve()

 // 遍歷所有依賴項(xiàng)的uri，然后進(jìn)行依賴模塊的實(shí)例化
 for (var i = 0, len = uris.length; i < len; i++) {
 mod.deps[mod.dependencies[i]] = Module.get(uris[i])
 }

 // 將entry傳入到所有的依賴模塊，這個(gè)entry是我們?cè)趗se方法的時(shí)候設(shè)置的
 mod.pass()
 
 if (mod._entry.length) {
 mod.onload()
 return
 }

 // 開始進(jìn)行并行加載
 var requestCache = {}
 var m

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

 // 發(fā)送請(qǐng)求進(jìn)行模塊的加載
 for (var requestUri in requestCache) {
 if (requestCache.hasOwnProperty(requestUri)) {
  requestCache[requestUri]() //調(diào)用 seajs.request
 }
 }
}

Module.prototype.resolve = function() {
 var mod = this
 var ids = mod.dependencies // 取出所有依賴模塊的id
 var uris = []
 // 進(jìn)行遍歷操作
 for (var i = 0, len = ids.length; i < len; i++) {
 uris[i] = Module.resolve(ids[i], mod.uri) //將模塊id轉(zhuǎn)為uri
 }
 return uris
}

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

seajs.resolve = id2Uri

function id2Uri(id, refUri) { // 將id轉(zhuǎn)為uri，轉(zhuǎn)換配置中的一些變量
 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
}

function parseAlias(id) { //如果有定義alias，將id替換為別名對(duì)應(yīng)的地址
 var alias = data.alias
 return alias && isString(alias[id]) ? alias[id] : id
}

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

 // 遍歷入口模塊的_entry屬性，這個(gè)屬性一般只有一個(gè)值，就是它本身
 // 具體可以回去看use方法 -> mod._entry.push(mod)
 for (var i = 0; i < mod._entry.length; i++) {
 var entry = mod._entry[i] // 獲取入口模塊
 var count = 0 // 計(jì)數(shù)器，用于統(tǒng)計(jì)未進(jìn)行加載的模塊
 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 // 在入口模塊標(biāo)識(shí)曾經(jīng)加載過該依賴模塊
  count++
  m._entry.push(entry) // 將入口模塊存入依賴模塊的_entry屬性
  }
 }
 // 如果未加載的依賴模塊大于0
 if (count > 0) {
  // 這里`count - 1`的原因也可以回去看use方法 -> mod.remain = 1
  // remain的初始值就是1，表示默認(rèn)就會(huì)有一個(gè)未加載的模塊，所有需要減1
  entry.remain += count - 1
  // 如果有未加載的依賴項(xiàng)，則移除掉入口模塊的entry
  mod._entry.shift()
  i--
 }
 }
}

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

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

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

 emit("request", emitData = { // 設(shè)置加載script時(shí)的一些數(shù)據(jù)
 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) { //發(fā)送請(qǐng)求加載js文件
 requestCache[emitData.requestUri] = sendRequest
 }

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

 function onRequest(error) { //模塊加載完畢的回調(diào)
 var m, mods = callbackList[requestUri]
 delete callbackList[requestUri]
 // 保存元數(shù)據(jù)到匿名模塊，uri為請(qǐng)求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()
  }
 }
 }
}

for (var requestUri in requestCache) {
 requestCache[requestUri]() //調(diào)用 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
 // 腳本加載完畢的回調(diào)
 callback(error)
 }
}

if (mod._entry.length) {
 mod.onload()
 return
}

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]
 // 每次加載完畢一個(gè)依賴模塊，remain就-1
 // 直到remain為0，就表示所有依賴模塊加載完畢
 if (--entry.remain === 0) {
  // 最后就會(huì)調(diào)用entry的callback方法
  // 這就是前面為什么要給每個(gè)依賴模塊存入entry
  entry.callback()
 }
 }
 delete mod._entry
}

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

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

 if (callback) {
 callback.apply(global, exports) //執(zhí)行回調(diào)
 }

 // 移除一些屬性
 delete mod.callback
 delete mod.history
 delete mod.remain
 delete mod._entry
}

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

 // 調(diào)用define定義的回調(diào)
 // 傳入commonjs相關(guān)三個(gè)參數(shù): require, module.exports, module
 var exports = factory.call(mod.exports = {}, require, mod.exports, mod)
 if (exports === undefined) {
 exports = mod.exports //如果函數(shù)沒有返回值，就取mod.exports
 }
 mod.exports = exports
 mod.status = STATUS.EXECUTED

 return mod.exports // 返回模塊的exports
}

define(function (require, exports, module) {
 module.exports = 'main-module'
})

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

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

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

 var meta = { //模塊加載與定義的元數(shù)據(jù)
 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事件進(jìn)行save
 anonymousMeta = meta
 }

function onRequest(error) { //模塊加載完畢的回調(diào)
...
 // 保存元數(shù)據(jù)到匿名模塊，uri為請(qǐng)求js的uri
 if (anonymousMeta) {
 Module.save(uri, anonymousMeta)
 anonymousMeta = null
 }
...
}

// 存儲(chǔ)元數(shù)據(jù)到 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
 }
}