seajs源码解析

Seajs是一款模块化开发框架，遵循CMD规范。虽然到现在为止很多模块打包工具比它更加的完善，但还是有必要拜读一下的，毕竟为前端模块化的发展做了很大的贡献，分析一下涨涨姿势。
文章主要从以下几个方面来分析。有不对的地方，欢迎大家指出。

1、什么是CMD规范

CMD（Common Module Definition）是seajs在推广中规范出来的。详情请看 CMD模块定义规范

2、模块化开发的好处

• 2.1、提高代码可维护性
• 2.2、按需加载
• 2.3、避免变量污染
• 2.4、为前端工程化发展打下基础

3、seajs是如何加载模块，如何设计api的

先在浏览器控制台中打印下seajs这个全局变量，可以看到它挂载的一些对象和方法。让我们先对它有个整体的感受

seajs 从use函数开始，到加载module的过程大致如下：

模块加载完后浏览器会立马执行define函数，这个函数比较有意思，先看源代码

// Resolve id to uri
Module.resolve = function(id, refUri) {
  // Emit `resolve` event for plugins such as text plugin
  var emitData = { id: id, refUri: refUri }
  emit("resolve", emitData)

  return emitData.uri || seajs.resolve(emitData.id, refUri)
}

// Define a module
Module.define = function (id, deps, factory) {
  var argsLen = arguments.length

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

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

  // Parse dependencies according to the module factory code
  if (!isArray(deps) && isFunction(factory)) {
    deps = parseDependencies(factory.toString())
  }

  var meta = {
    id: id,
    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` event, used in nocache plugin, seajs node version etc
  emit("define", meta)

  meta.uri ? Module.save(meta.uri, meta) :
      // Save information for "saving" work in the script onload event
      anonymousMeta = meta
}

有意思的是如果factory是个函数，同时deps不是一个数组，那么会将factory序列化，然后通过正则匹配从其中解析出依赖

var REQUIRE_RE = /"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g
var SLASH_RE = /\\\\/g

function parseDependencies(code) {
  var ret = []

  code.replace(SLASH_RE, "")
      .replace(REQUIRE_RE, function(m, m1, m2) {
        if (m2) {
          ret.push(m2)
        }
      })

  return ret
}

解析依赖后会扔到模块缓存系统中。之前模块加载的时候就可以看到，主模块加载完之后会执行factory函数。在执行factory函数的时候，会执行require加载的依赖。而require函数会判断模块状态是否已经执行过了，如果不是那么就加载依赖，加载完后执行依赖。最后将执行的结果暴露给exports对象。
到此，seajs的整个加载执行过程已经分析完毕。相比requirejs,seajs代码不是很多，但是能够感受到代码组织起来的精妙之处。

4、seajs是如何解决模块互相依赖问题

seajs解决模块的互相依赖是通过缓存系统和模块的状态来实现的。

5、seajs如何解决浏览器兼容性问题

• 5.1、onload 事件在 webkit<535.23和firfox<9.0中不支持

// `onload` event is not supported in WebKit < 535.23 and Firefox < 9.0
// ref:
//  - https://bugs.webkit.org/show_activity.cgi?id=38995
//  - https://bugzilla.mozilla.org/show_bug.cgi?id=185236
//  - https://developer.mozilla.org/en/HTML/Element/link#Stylesheet_load_events
var isOldWebKit = +navigator.userAgent
    .replace(/.*(?:AppleWebKit|AndroidWebKit)\/(\d+).*/, "$1") < 536

解决的办法是通过一个定时器，去监听link节点是否已经加载，并且解析完。

• 5.2、脚本onload事件在脚本执行的时候不会立马触发

function getCurrentScript() {
  if (currentlyAddingScript) {
    return currentlyAddingScript
  }

  // For IE6-9 browsers, the script onload event may not fire right
  // after the script is evaluated. Kris Zyp found that it
  // could query the script nodes and the one that is in "interactive"
  // mode indicates the current script
  // ref: http://goo.gl/JHfFW
  if (interactiveScript && interactiveScript.readyState === "interactive") {
    return interactiveScript
  }

  var scripts = head.getElementsByTagName("script")

  for (var i = scripts.length - 1; i >= 0; i--) {
    var script = scripts[i]
    if (script.readyState === "interactive") {
      interactiveScript = script
      return interactiveScript
    }
  }
}

解决办法是通过脚本的readyState===‘interactive’来判断

6、总结

以上就是对seajs的一个大致的分析，如有错误，欢迎指出。