SeaJs研究 之 关键方法实现解析

如果你作为读者，对Seajs还不是很了解，建议先去网站储备一些基础知识，然后我们可以有更多有效的沟通与互补。

就个人而言，SeaJs作为JS模块化框架，我觉得它提供给项目（产品）前端代码，更多的是规范管理与引用(CMD规范)，从而避免代码的交叉混乱重复的应用。如果你想把它作为提高JS代码性能的重要手段，那我还是规劝各位攻城狮多从自己代码本身思考和优化，废话不多说...

SeaJs中整个设计是结合闭包、对象、函数回调以及事件来设计的，通过闭包来暴露关键方法提供调用，我们可以顺利访问到以下的方法和属性

Module：构建包装JS File的对象，包括对JS的规范定义、请求解析、文件下载、对象加载与执行等工作；

cache：作为JS File与Module对象缓存；

config：详细参考官网https://github.com/seajs/seajs/issues/262

emit：触发事件函数

on：绑定事件

off：解除事件

request：下载JS文件方法

require：加载JS文件的 Module

resolve：解析模块标识符为全路径

use：加载并使用JS文件

下面我针对几个关键方法实现过程分析，我们来进一步认识下seajs的实现。

seajs.use

seajs.use实质上是调用的module.use，然后通过Module.get判断是否需要为当前目录新建一个新的module，module初始化完后，则对module进行加载，在加载完毕之后会调用回调函数callback来执行自定义的方法逻辑。

seajs.use = function(ids, callback) {

//调用module.use方法，data.cwd用来获取seajs的当前路径
  Module.use(ids, callback, data.cwd + "_use_" + cid())
  return seajs
}

接着看module.use部分的实现，这个方法负责加载完毕当前路径中所有JS文件，并封装成逐一封装成Module对象，导出每个对象中的回调方法和属性，作为自定义函数的入参，再回调自定义函数。

Module.use = function (ids, callback, uri) {

//判断当前使用的js文件是否被缓存过，如果没有的话，会重新创建一个新module对象
  var mod = Module.get(uri, isArray(ids) ? ids : [ids])
//定义回调函数（在模块加载完毕之后，才会调用）
  mod.callback = function() {
    var exports = []

//解析js file为全路径
    var uris = mod.resolve()
//循环每个module，获取模块中可访问的方法和属性
    for (var i = 0, len = uris.length; i < len; i++) {

      exports[i] = cachedMods[uris[i]].exec()
    }

    if (callback) {
      callback.apply(global, exports)
    }

    delete mod.callback
  }
//加载js文件
  mod.load()
}

Module.prototype.load部分的实现，该方法负责加载JS文件。如果当前目录中有多个JS File未加载完成，需要在全部JS File加载完毕之后才会继续加载Module。

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

  // 如果当前模块正在加载，那就暂不执行，等待onload事件触发
  if (mod.status >= STATUS.LOADING) {
    return
  }
//设置当前模块的状态为正在加载
  mod.status = STATUS.LOADING

//将ID转化对应JS文件的全路径
  var uris = mod.resolve()

//执行load事件函数
  emit("load", uris)
//当前需要加载的js文件数
  var len = mod._remain = uris.length
  var m

  // 初始化需要加载的模块
  for (var i = 0; i < len; i++) {
    m = Module.get(uris[i])
//如果当前目录中子Module未加载完,那就把他加入当前目录Module的等待队列._waiting中
    if (m.status < STATUS.LOADED) {
      // Maybe duplicate: When module has dupliate dependency, it should be it's count, not 1
      m._waitings[mod.uri] = (m._waitings[mod.uri] || 0) + 1
    }

//否则待加载数量减1
    else {
      mod._remain--
    }
  }
//如果当前目录中所有待加载JS File均已加载完毕，那么就加载当前目录Module
  if (mod._remain === 0) {
    mod.onload()
    return
  }


  var requestCache = {}

  for (i = 0; i < len; i++) {
    m = cachedMods[uris[i]]
//如果子module还未加入下载队列，那先将module加入下载队列，初始化下载信息
    if (m.status < STATUS.FETCHING) {
      m.fetch(requestCache)
    }

//如果module的下载必需信息均已保存，那就开始加载module
    else if (m.status === STATUS.SAVED) {
      m.load()
    }
  }

//发送所有下载队列中的module的请求，下载js文件
  for (var requestUri in requestCache) {
    if (requestCache.hasOwnProperty(requestUri)) {
      requestCache[requestUri]()
    }
  }
}

再进一步看看Module.onload方法，主要负责执行回调函数，并且再次检查待下载队列中的Module数量，如果数量为0，那会再次执行onload方法。主要就是做一下善后工作，收拾下残局，

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

//将当前module的状态置为已加载
  mod.status = STATUS.LOADED
//这里就开始执行回调函数了（自定义的，往上看看callback里面干了什么事儿）
  if (mod.callback) {
    mod.callback()
  }

  var waitings = mod._waitings
  var uri, m

//循环待下载的module的集合
  for (uri in waitings) {

    if (waitings.hasOwnProperty(uri)) {

//从缓存中拿module对象
      m = cachedMods[uri]

//待下载的文件个数减少

      m._remain -= waitings[uri]

      if (m._remain === 0) {
        m.onload()
      }
    }
  }

  // 删除引用，节约内存空间
  delete mod._waitings
  delete mod._remain
}

不过，在以上的方法中，对Module原型中的方法fetch 和 exec没有详细说明，这里是对一个流程上所见的重要方法进行详解，在下面两个方法中会具体来说

seajs.define

Module.define = function (id, deps, factory) {

//获取参数
  var argsLen = arguments.length

//如果参数1个，那么id是function，但模块就没有标示符，成了一个匿名模块

//define(factory)
  if (argsLen === 1) {
    factory = id
    id = undefined
  }

//如果参数2个，deps就是function，id是模块标识符

  else if (argsLen === 2) {
    factory = deps

    // define(deps, factory)
    if (isArray(id)) {
      deps = id
      id = undefined
    }
    // define(id, factory)
    else {
      deps = undefined
    }
  }

//将function转化为字符串，然后匹配到reqiure方法中请求JS文件的路径
  if (!isArray(deps) && isFunction(factory)) {
    deps = parseDependencies(factory.toString())
  }
//设置元数据
  var meta = {
    id: id,

//将JS File相对路径转化为全路径
    uri: Module.resolve(id),
    deps: deps,
    factory: factory
  }

  // Try to derive uri in IE6-9 for anonymous modules

  if (!meta.uri && doc.attachEvent) {
    var script = getCurrentScript()

    if (script) {
      meta.uri = script.src
    }

    // NOTE: If the id-deriving methods above is failed, then falls back
    // to use onload event to get the uri
  }

  emit("define", meta)

//保存module对象信息，或者保存至匿名对象anonymousMeta 
  meta.uri ? Module.save(meta.uri, meta) :
      // Save information for "saving" work in the script onload event
      anonymousMeta = meta
}

//保存元数据到Module对象中
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

    emit("save", mod)
  }
}

seajs.require

seajs.require = function(id) {

//根据Id解析并获取JS的Module对象
  var mod = Module.get(Module.resolve(id))

//如果module还未被执行，就先执行
  if (mod.status < STATUS.EXECUTING) {
    mod.onload()
    mod.exec()
  }
  return mod.exports
}

这里我们重点去看看mod.exec()方法，这里可谓是是整个seajs的万里长城的最后一步

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

//不解释，大家都懂
  if (mod.status >= STATUS.EXECUTING) {
    return mod.exports
  }

  mod.status = STATUS.EXECUTING

  // Create require
  var uri = mod.uri

//定义define中回调函数的参数require，exports
  function require(id) {
    return Module.get(require.resolve(id)).exec()
  }
//解析id的方法
  require.resolve = function(id) {
    return Module.resolve(id, uri)
  }
//异步请求的方法
  require.async = function(ids, callback) {
    Module.use(ids, callback, uri + "_async_" + cid())
    return require
  }

  // Exec factory
  var factory = mod.factory
//这里是一个亮点，这里就会去执行define中的回调函数，并把集合exports作为执行结果返回出来
  var exports = isFunction(factory) ?
      factory(require, mod.exports = {}, mod) :
      factory

  if (exports === undefined) {
    exports = mod.exports
  }

  // 回收限制对象，做好善后工作
  delete mod.factory

  mod.exports = exports
  mod.status = STATUS.EXECUTED


  emit("exec", mod)

  return exports
}

总的来说，seajs的核心是Module，一个JS File会对应一个Module，每个Module均有自己状态、属性和方法，Module中的核心是加载执行JS代码的方法（load&exec），同时结合回调函数来串联自定义逻辑代码。