seajs源码阅读

seajs主要解决的问题包括：命名冲突、文件依赖、异步加载和模块化等问题，具体怎么实现的呢？通过阅读源码一探究竟。源码地址：https://github.com/seajs/seajs

 

seajs-debug.js

/**
 * Sea.js 3.0.0
 */
(function(global, undefined) {

//多次加载seajs.js保证只有一个seajs.js文件有效
  if (global.seajs) {
    return
  }

  var seajs = global.seajs = {
    // The current version of Sea.js being used
    version: "3.0.0"
  } ;

//seajs的配置信息
  var data = seajs.data = {}

  /**
   * 类型判断信息
   */
  function isType(type) {
    return function(obj) {
      return {}.toString.call(obj) == "[object " + type + "]"
    }
  }

  var isObject = isType("Object")
  var isString = isType("String")
  var isArray = Array.isArray || isType("Array")
  var isFunction = isType("Function")

  var _cid = 0
  function cid() {
    return _cid++
  }

  /**
   * util-events.js - The minimal events support
   */
  var events = data.events = {}

  /**
   * 注册事件
   * @param name
   * @param callback
   * @returns {{version: string}}
   */
  seajs.on = function(name, callback) {
    var list = events[name] || (events[name] = [])
    list.push(callback)
    return seajs
  }

// Remove event. If `callback` is undefined, remove all callbacks for the
// event. If `event` and `callback` are both undefined, remove all callbacks
// for all events
  seajs.off = function(name, callback) {
    // Remove *all* events
    //如果name和callback都为空，则清除所有的事件
    if (!(name || callback)) {
      events = data.events = {};
      return seajs
    }

    var list = events[name] ;
    if (list) {
      //如果回调函数为空，则删除所有的时间监听，否则移除指定的监听事件
      if (callback) {
        for (var i = list.length - 1; i >= 0; i--) {
          if (list[i] === callback) {
            list.splice(i, 1)
          }
        }
      }else {
        delete events[name]
      }
    }

    return seajs
  }

// Emit event, firing all bound callbacks. Callbacks receive the same
// arguments as `emit` does, apart from the event name
//触发指定的事件监听
  var emit = seajs.emit = function(name, data) {
    var list = events[name] ;
    if (list) {
      // Copy callback lists to prevent modification
      list = list.slice()
      // Execute event callbacks, use index because it's the faster.
      for(var i = 0, len = list.length; i < len; i++) {
        list[i](data)
      }
    }

    return seajs
  }

  /**
   * util-path.js - The utilities for operating path such as id, uri
   */
//^在方括号中使用，表示不接受字符集合。 只匹配所有的路径信息，最后一个标识符为“/”
  var DIRNAME_RE = /[^?#]*\// ;
//替换/./为/
  var DOT_RE = /\/\.\//g ;
//替换“/路径名/../”为单个“/”
  var DOUBLE_DOT_RE = /\/[^/]+\/\.\.\// ;
//替换多个“//”为一个“/”
  var MULTI_SLASH_RE = /([^:/])\/+\//g ;

  /**
   * 导出请求中的路径，不包括具体的文件名称
   * dirname("a/b/c.js?t=123#xx/zz") ==> "a/b/"
   * ref: http://jsperf.com/regex-vs-split/2
   * @param path
   * @returns {*}
   */
  function dirname(path) {
    return path.match(DIRNAME_RE)[0]
  }

  /**
   * 对路径进行格式化，对路径中特殊转义字符进行了转换，例如：realpath("http://test.com/a//./b/../c") ==> "http://test.com/a/c"
   * @param path
   * @returns {XML|string|*}
   */
  function realpath(path) {
    // /a/b/./c/./d ==> /a/b/c/d
    path = path.replace(DOT_RE, "/")
    /*
     @author wh1100717
     a//b/c ==> a/b/c
     a///b/////c ==> a/b/c
     DOUBLE_DOT_RE matches a/b/c//../d path correctly only if replace // with / first
     */
    path = path.replace(MULTI_SLASH_RE, "$1/")

    // a/b/c/../../d  ==>  a/b/../d  ==>  a/d
    while (path.match(DOUBLE_DOT_RE)) {
      path = path.replace(DOUBLE_DOT_RE, "/")
    }

    return path
  }

  /**
   * url后缀名称自动添加“.js”
   * @param path
   * @returns {string}
   */
  function normalize(path) {
    var last = path.length - 1
    var lastC = path.charCodeAt(last)

    if (lastC === 35 /* "#" */) {
      return path.substring(0, last)
    }
    //此处只是针对js文件做了处理。在一般的请求后缀后添加“.js”
    return (path.substring(last - 2) === ".js" ||  path.indexOf("?") > 0 || lastC === 47 /* "/" */) ?
        path : path + ".js"
  }

  //只获取路径中第一个“/”之前的文字
  var PATHS_RE = /^([^/:]+)(\/.+)$/ ;
  //匹配大括号内的内容
  var VARS_RE = /{([^{]+)}/g ;

  /**
   * 检查是否有配置别名，如果未配置别名，则需要使用原有id
   * @param id
   * @returns {*}
   */
  function parseAlias(id) {
    var alias = data.alias ;
    return alias && isString(alias[id]) ? alias[id] : id ;
  }

  /**
   * 根据id解析路径，id的组成部分使用“/”进行分隔
   * @param id
   * @returns {*}
   */
  function parsePaths(id) {
    var paths = data.paths ;
    var m ;

    //paths是一个{}对象，解析id的组成部分，使用path中指定的变量替换路径名称
    //解析路径中第一个“/”之前的字符串是否有指定path，如果有指定path，则用指定的path替换当前路径中的字符串
    if (paths && (m = id.match(PATHS_RE)) && isString(paths[m[1]])) {
      id = paths[m[1]] + m[2]
    }

    return id
  }

  /**
   * 使用正则表达式解析字符串中的变量。变量使用“{}”包含
   * @param id
   * @returns {*}
   */
  function parseVars(id) {
    //通过配置参数中传递
    var vars = data.vars ;
    if (vars && id.indexOf("{") > -1) {
      //function参数，第一个为所有匹配的文本，第二个为指定的子匹配文本
      id = id.replace(VARS_RE, function(m, key) {
        return isString(vars[key]) ? vars[key] : m ;
      })
    }

    return id
  }

  /**
   * 通过map对请求的url进行转换，其中map为一个数组。
   * 如果数组元素为一个函数，则直接调用函数对uri进行转换，否则将当前元素看做为一个数组，使用第二个元素替换第一个元素
   * @param uri
   * @returns {*}
   */
  function parseMap(uri) {
    var map = data.map ;
    var ret = uri ;
    if (map) {
      for (var i = 0, len = map.length; i < len; i++) {
        var rule = map[i] ;

        //针对uri进行映射转换
        ret = isFunction(rule) ?
            (rule(uri) || uri) :
            uri.replace(rule[0], rule[1]) ;
        //只应用一次uri的映射转换
        if (ret !== uri) {
          break ;
        }
      }
    }
    return ret
  }

  //匹配“//.”或“:/”
  var ABSOLUTE_RE = /^\/\/.|:\// ;
  //根目录正则表达式，匹配当前请求的根请求路径，基本规则为：“协议://域名/”。此处使用了正则表达式的非贪婪匹配
  var ROOT_DIR_RE = /^.*?\/\/.*?\// ;
  /**
   * 添加请求路径信息。此处对应seajs中文件路径加载方式
   * @param id
   * @param refUri
   * @returns {XML|string|*}
   */
  function addBase(id, refUri) {
    var ret ;
    var first = id.charCodeAt(0)

    if (ABSOLUTE_RE.test(id)) {
      //如果是绝对路径
      ret = id
    }else if (first === 46 /* "." */) {
      //如果是相对路径，则获取当前请求的地址路径，然后加上当前的模块的id
      ret = (refUri ? dirname(refUri) : data.cwd) + id
    }else if (first === 47 /* "/" */) {
      //如果是根目录开始，则获取请求地址的根目录，然后加上当前资源的id
      var m = data.cwd.match(ROOT_DIR_RE)
      ret = m ? m[0] + id.substring(1) : id
    }else {
      //如果是别名字段等，则默认使用seajs配置的js加载根目录
      ret = data.base + id
    }

    //如果请求地址是以“//”开头，则默认使用当前请求的默认协议
    if (ret.indexOf("//") === 0) {
      ret = location.protocol + ret
    }

    //格式化路径
    return realpath(ret)
  }

  /**
   * 将id解析为请求的url
   * @param id
   * @param refUri
   * @returns {*}
   */
  function id2Uri(id, refUri) {
    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
  }

  /**
   * 格式化id为路径
   * @type {id2Uri}
   */
  seajs.resolve = id2Uri;

// Check environment
  var isWebWorker = typeof window === 'undefined' && typeof importScripts !== 'undefined' && isFunction(importScripts) ;

//部分浏览器打开的地址为：about:xxx and blob:xxx，忽略这些地址
  var IGNORE_LOCATION_RE = /^(about|blob):/;

  var loaderDir;
// Sea.js's full path
  var loaderPath;

//获取当前的工作目录，在web浏览器使用场景下，就是当前请求的地址，在路径“/”之前的字符
  var cwd = (!location.href || IGNORE_LOCATION_RE.test(location.href)) ? '' : dirname(location.href);

  if (isWebWorker) {
    // Web worker doesn't create DOM object when loading scripts
    // Get sea.js's path by stack trace.
    var stack;
    try {
      var up = new Error();
      throw up;
    } catch (e) {
      // IE won't set Error.stack until thrown
      stack = e.stack.split('\n');
    }
    // First line is 'Error'
    stack.shift();

    var m;
    // Try match `url:row:col` from stack trace line. Known formats:
    // Chrome:  '    at http://localhost:8000/script/sea-worker-debug.js:294:25'
    // FireFox: '@http://localhost:8000/script/sea-worker-debug.js:1082:1'
    // IE11:    '   at Anonymous function (http://localhost:8000/script/sea-worker-debug.js:295:5)'
    // Don't care about older browsers since web worker is an HTML5 feature
    var TRACE_RE = /.*?((?:http|https|file)(?::\/{2}[\w]+)(?:[\/|\.]?)(?:[^\s"]*)).*?/i
    // Try match `url` (Note: in IE there will be a tailing ')')
    var URL_RE = /(.*?):\d+:\d+\)?$/;
    // Find url of from stack trace.
    // Cannot simply read the first one because sometimes we will get:
    // Error
    //  at Error (native) <- Here's your problem
    //  at http://localhost:8000/_site/dist/sea.js:2:4334 <- What we want
    //  at http://localhost:8000/_site/dist/sea.js:2:8386
    //  at http://localhost:8000/_site/tests/specs/web-worker/worker.js:3:1
    while (stack.length > 0) {
      var top = stack.shift();
      m = TRACE_RE.exec(top);
      if (m != null) {
        break;
      }
    }
    var url;
    if (m != null) {
      // Remove line number and column number
      // No need to check, can't be wrong at this point
      var url = URL_RE.exec(m[1])[1];
    }
    // Set
    loaderPath = url
    // Set loaderDir
    loaderDir = dirname(url || cwd);
    // This happens with inline worker.
    // When entrance script's location.href is a blob url,
    // cwd will not be available.
    // Fall back to loaderDir.
    if (cwd === '') {
      cwd = loaderDir;
    }
  }else {
    var doc = document ;

    var scripts = doc.scripts ;

    //当前js文件加载后运行时的script脚本命令行
    var loaderScript = doc.getElementById("seajsnode") ||
        scripts[scripts.length - 1] ;

    function getScriptAbsoluteSrc(node) {
      return node.hasAttribute ? // non-IE6/7
          node.src :
        // see http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
          node.getAttribute("src", 4)
    }

    loaderPath = getScriptAbsoluteSrc(loaderScript) ;

    // When `sea.js` is inline, set loaderDir to current working directory
    loaderDir = dirname(loaderPath || cwd)

    //console.log("loaderPath="+loaderPath+"    loaderDir="+loaderDir)
  }

  /**
   * util-request.js - The utilities for requesting script and style files
   * ref: tests/research/load-js-css/test.html
   */
  if (isWebWorker) {
    function requestFromWebWorker(url, callback, charset) {
      // Load with importScripts
      var error;
      try {
        importScripts(url);
      } catch (e) {
        error = e;
      }
      callback(error);
    }
    // For Developers
    seajs.request = requestFromWebWorker;
  }
  else {
    var doc = document ;

    var head = doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement ;

    var baseElement = head.getElementsByTagName("base")[0] ;

    var currentlyAddingScript ;

    function request(url, callback, charset) {

      var node = doc.createElement("script") ;

      if (charset) {
        var cs = isFunction(charset) ? charset(url) : charset ;
        if (cs) {
          node.charset = cs
        }
      }

      addOnload(node, callback, url) ;

      node.async = true ;
      node.src = url ;

      // For some cache cases in IE 6-8, the script executes IMMEDIATELY after
      // the end of the insert execution, so use `currentlyAddingScript` to
      // hold current node, for deriving url in `define` call
      currentlyAddingScript = node

      // ref: #185 & http://dev.jquery.com/ticket/2709
      baseElement ?
          head.insertBefore(node, baseElement) :
          head.appendChild(node) ;

      currentlyAddingScript = null
    }

    function addOnload(node, callback, url) {

      var supportOnload = "onload" in node ;

      if (supportOnload) {
        node.onload = onload ;
        node.onerror = function() {
          emit("error", { uri: url, node: node }) ;
          onload(true) ;
        }
      }else {
        node.onreadystatechange = function() {
          if (/loaded|complete/.test(node.readyState)) {
            onload() ;
          }
        }
      }

      function onload(error) {
        // Ensure only run once and handle memory leak in IE
        node.onload = node.onerror = node.onreadystatechange = null ;

        // Remove the script to reduce memory leak
        if (!data.debug) {
          head.removeChild(node) ;
        }

        // Dereference the node
        node = null ;

        callback(error) ;
      }
    }

    //For Developers，默认的request方法
    seajs.request = request
  }
  var interactiveScript ;

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

    /**
     * In non-IE browsers, the onload event is sufficient, it always fires
     immediately after the script is executed.
     * In IE, if the script is in the cache, it actually executes *during*
     the DOM insertion of the script tag, so you can keep track of which
     script is being requested in case define() is called during the DOM
     insertion.
     * In IE, if the script is not in the cache, when define() is called you
     can iterate through the script tags and the currently executing one will
     have a script.readyState == "interactive"
     **/
    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 ;
      }
    }

  }

  /**
   * 解析文件中的require依赖。
   * 主要解析方式为：
   * 1、提取第一个字符，如果是字母，则定位require开头的文本位置。
   * 2、解析出require内容，通过使用“'”或“"”
   * 通过正则解析require开头的字符，获取requrie内部的模块
   **/
  function parseDependencies(s) {
    if(s.indexOf('require') == -1) {
      return []
    }
    var index = 0, peek, length = s.length, isReg = 1, modName = 0, parentheseState = 0,
        parentheseStack = [], res = [] ;

    while(index < length) {
      readch() ;
      if(isBlank()) {

      }else if(isQuote()) {
        dealQuote()
        isReg = 1
      } else if(peek == '/') {
        readch()
        if(peek == '/') {
          index = s.indexOf('\n', index)
          if(index == -1) {
            index = s.length
          }
        }else if(peek == '*') {
          index = s.indexOf('*/', index)
          if(index == -1) {
            index = length
          }else {
            index += 2
          }
        }else if(isReg) {
          dealReg()
          isReg = 0
        }else {
          index--
          isReg = 1
        }
      }
      else if(isWord()) {
        dealWord()
      }
      else if(isNumber()) {
        dealNumber()
      }
      else if(peek == '(') {
        parentheseStack.push(parentheseState)
        isReg = 1
      }
      else if(peek == ')') {
        isReg = parentheseStack.pop()
      }
      else {
        isReg = peek != ']'
        modName = 0
      }
    }

    return res
    function readch() {
      peek = s.charAt(index++)
    }
    function isBlank() {
      return /\s/.test(peek)
    }
    function isQuote() {
      return peek == '"' || peek == "'"
    }
    //查找下一个引用字符的位置，并把当前被引用的内容加入到依赖列表中
    function dealQuote() {
      var start = index ;
      var c = peek ;
      //查找后续出现的引用字符
      var end = s.indexOf(c, start)
      if(end == -1) {
        index = length
      }else if(s.charAt(end - 1) != '\\') {
        index = end + 1
      }else {
        while(index < length) {
          readch()
          if(peek == '\\') {
            index++
          }
          else if(peek == c) {
            break
          }
        }
      }
        //判断是否已经解析了require开头的字符
      if(modName) {
        //单独存储依赖信息
        res.push(s.slice(start, index - 1))
        modName = 0
      }
    }
    function dealReg() {
      index--
      while(index < length) {
        readch()
        if(peek == '\\') {
          index++
        }
        else if(peek == '/') {
          break
        }
        else if(peek == '[') {
          while(index < length) {
            readch()
            if(peek == '\\') {
              index++
            }
            else if(peek == ']') {
              break
            }
          }
        }
      }
    }
    function isWord() {
      return /[a-z_$]/i.test(peek)
    }
    function dealWord() {
      var s2 = s.slice(index - 1)
      var r = /^[\w$]+/.exec(s2)[0];
      //判断是否为特殊的符号
      parentheseState = {
        'if': 1,
        'for': 1,
        'while': 1,
        'with': 1
      }[r]
      isReg = {
        'break': 1,
        'case': 1,
        'continue': 1,
        'debugger': 1,
        'delete': 1,
        'do': 1,
        'else': 1,
        'false': 1,
        'if': 1,
        'in': 1,
        'instanceof': 1,
        'return': 1,
        'typeof': 1,
        'void': 1
      }[r];
      //判断是否是require开头的字符。此处正则表达式用到了“反向向匹配”，其中“\1”指向前面“()”中的内容。
      modName = /^require\s*\(\s*(['"]).+?\1\s*\)/.test(s2) ;
      //如果符合以上格式，则只获取require('字符串
      if(modName) {
        r = /^require\s*\(\s*['"]/.exec(s2)[0]
        index += r.length - 2
      }else {
        index += /^[\w$]+(?:\s*\.\s*[\w$]+)*/.exec(s2)[0].length - 1
      }
    }
    function isNumber() {
      return /\d/.test(peek)
          || peek == '.' && /\d/.test(s.charAt(index))
    }
    function dealNumber() {
      var s2 = s.slice(index - 1)
      var r
      if(peek == '.') {
        r = /^\.\d+(?:E[+-]?\d*)?\s*/i.exec(s2)[0]
      }
      else if(/^0x[\da-f]*/i.test(s2)) {
        r = /^0x[\da-f]*\s*/i.exec(s2)[0]
      }
      else {
        r = /^\d+\.?\d*(?:E[+-]?\d*)?\s*/i.exec(s2)[0]
      }
      index += r.length - 1
      isReg = 0
    }
  }
//========================module相关操作========================
//模块缓存，存储uri和module的映射
  var cachedMods = seajs.cache = {} ;

  var anonymousMeta ;

  //正在加载的模块
  var fetchingList = {} ;
  //已经获取的模块
  var fetchedList = {} ;
  //ajax请求完成之后module的回调函数。通过回调函数加载模块依赖的js
  var callbackList = {} ;

  var STATUS = Module.STATUS = {
    // 1 - The `module.uri` is being fetched
    FETCHING: 1,
    // 2 - The meta data has been saved to cachedMods
    SAVED: 2,
    // 3 - The `module.dependencies` are being loaded
    LOADING: 3,
    // 4 - The module are ready to execute
    LOADED: 4,
    // 5 - The module is being executed
    EXECUTING: 5,
    // 6 - The `module.exports` is available
    EXECUTED: 6,
    // 7 - 404
    ERROR: 7
  }

//seajs的基础模块类，seajs.use 或 require都是以该类为基础
  function Module(uri, deps) {
    this.uri = uri ;
    //存储依赖的名称
    this.dependencies = deps || [] ;

    //存储依赖名称和访问url的映射
    this.deps = {} ;

    //当前模块及依赖加载的加载的阶段
    this.status = 0 ;

    //当前模块的入口模块，例如使用seajs.use(id , factory)，是一个顶层模块，其中id是entry，可以看做是一个入口
    //entry在按照依赖的层级，按照层次不断传播
    this._entry = [] ;
  }

  /**
   * 解析模块依赖，返回依赖模块的实际访问地址
   * @returns {Array}
   */
  Module.prototype.resolve = function() {
    var mod = this ;
    var ids = mod.dependencies ;
    var uris = [] ;

    //解析各个依赖的的url
    for (var i = 0, len = ids.length; i < len; i++) {
      uris[i] = Module.resolve(ids[i], mod.uri) ;
    }

    return uris ;
  }

  /**
   * 传递模块
   */
  Module.prototype.pass = function() {
    var mod = this ;

    var len = mod.dependencies.length ;

    //遍历当前模块的入口
    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]] ;

        //如果模块没有装载 并且 模块没有被使用，则设置最初入口的
        if (m.status < STATUS.LOADED && !entry.history.hasOwnProperty(m.uri)) {
          //记录已经传递依赖的entry
          entry.history[m.uri] = true ;
          count++ ;
          m._entry.push(entry) ;
          if(m.status === STATUS.LOADING) {
            m.pass() ;
          }
        }
      }

      //如果传递了entry到其依赖的模块中，就entry从当前模块中删掉。但是通过remain数量增加，来标识需要额外加载的模块
      if (count > 0) {
        //由于remain从1开始，包括当前模块。而开始的顶层依赖是没有module的及seajs.use
        entry.remain += count - 1 ;
        //将当前entry删掉，继续对下一个执行循环
        mod._entry.shift() ;
        i-- ;
      }

    }
  }

  /**
   * 装载模块的依赖
   */
  Module.prototype.load = function() {
    var mod = this ;

    // If the module is being loaded, just wait it onload call
    if (mod.status >= STATUS.LOADING) {
      return
    }

    mod.status = STATUS.LOADING ;

    //解析依赖的各个插件的url
    var uris = mod.resolve() ;
    emit("load", uris) ;

    //在依赖中存储相关对象
    for (var i = 0, len = uris.length; i < len; i++) {
      //console.log("存储模块依赖子模块："+mod.dependencies[i])
      mod.deps[mod.dependencies[i]] = Module.get(uris[i])
    }

    //每次状态完成在之后，都会执行load函数，在此处重新设置和检查依赖关系
    mod.pass() ;

    //如果当前模块的entry没有被传递，即没有依赖其它模块，则运行onload
    if (mod._entry.length) {
      mod.onload() ;
      return
    }

    //开始并行加载
    var requestCache = {} ;
    var m ;

    //开始加载依赖的模块
    for (i = 0; i < len; i++) {
      m = cachedMods[uris[i]] ;
      if (m.status < STATUS.FETCHING) {
        m.fetch(requestCache) ;
      }else if (m.status === STATUS.SAVED) {
        m.load() ;
      }
    }

    //Send all requests at last to avoid cache bug in IE6-9. Issues#808
    for (var requestUri in requestCache) {
      if (requestCache.hasOwnProperty(requestUri)) {
        requestCache[requestUri]() ;
      }
    }
  }

// Call this method when module is loaded
  Module.prototype.onload = function() {
    var mod = this
    mod.status = STATUS.LOADED

    // When sometimes cached in IE, exec will occur before onload, make sure len is an number
    for (var i = 0, len = (mod._entry || []).length; i < len; i++) {
      var entry = mod._entry[i] ;
      if (--entry.remain === 0) {
        entry.callback() ;
      }
    }

    delete mod._entry ;
  }

// Call this method when module is 404
  Module.prototype.error = function() {
    var mod = this ;
    mod.onload() ;
    mod.status = STATUS.ERROR ;
  }

// Execute a module
  Module.prototype.exec = function () {
    var mod = this ;

    // When module is executed, DO NOT execute it again. When module
    // is being executed, just return `module.exports` too, for avoiding
    // circularly calling
    if (mod.status >= STATUS.EXECUTING) {
        //如果返回的是一个全局的object对象
      return mod.exports ;
    }

    mod.status = STATUS.EXECUTING ;

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

    //non-cmd module has no property factory and exports
    if (!mod.hasOwnProperty('factory')) {
      mod.non = true
      return
    }

    // Create require
    var uri = mod.uri

    /**
     * 传递到define的factory中作为参数
     * @param id
     * @returns {*|Array|{index: number, input: string}}
     */
    function require(id) {
      //模块已经在开始加载的时候解析完成了，此时可以直接获取相关的module
      var m = mod.deps[id] || Module.get(require.resolve(id)) ;

      if (m.status == STATUS.ERROR) {
        throw new Error('module was broken: ' + m.uri);
      }

      return m.exec() ;
    }

    require.resolve = function(id) {
      return Module.resolve(id, uri) ;
    }

    /**
     * 此处的require.async和seajs.use实现的功能是类似的
     * @param ids
     * @param callback
     * @returns {require}
     */
    require.async = function(ids, callback) {
      Module.use(ids, callback, uri + "_async_" + cid()) ;
      return require ;
    }

    // Exec factory
    var factory = mod.factory ;

    var exports = isFunction(factory) ?
        factory(require, mod.exports = {}, mod) :
        factory ;

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

    // Reduce memory leak
    delete mod.factory ;

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

    // Emit `exec` event
    emit("exec", mod)

    return mod.exports
  }

  /**
   * 远程加载文件
   * @param requestCache
   */
  Module.prototype.fetch = function(requestCache) {
    var mod = this ;
    var uri = mod.uri ;

    mod.status = STATUS.FETCHING ;

    var emitData = { uri: uri } ;
    emit("fetch", emitData) ;

    var requestUri = emitData.requestUri || uri ;

    // Empty uri or a non-CMD module
    if (!requestUri || fetchedList.hasOwnProperty(requestUri)) {
      mod.load() ;
      return ;
    }

    //如果当前获取uri中已包含指定的uri，则回调列表中加入当前module
    if (fetchingList.hasOwnProperty(requestUri)) {
      callbackList[requestUri].push(mod) ;
      return ;
    }

    fetchingList[requestUri] = true ;
    //将当前模块加入回调列表，当前模块加载完成之后，再去加载其依赖的其它模块
    callbackList[requestUri] = [mod] ;

    //触发request请求
    emit("request", emitData = {
      uri: uri,
      requestUri: requestUri,
      onRequest: onRequest,
      charset: isFunction(data.charset) ? data.charset(requestUri) || 'utf-8' : data.charset
    }) ;

    //标识是否已经由事件处理函数对请求做了处理
    if (!emitData.requested) {
      requestCache ?
          requestCache[emitData.requestUri] = sendRequest :
          sendRequest()
    }

    function sendRequest() {
      seajs.request(emitData.requestUri, emitData.onRequest, emitData.charset)
    }

    function onRequest(error) {
      delete fetchingList[requestUri] ;
      fetchedList[requestUri] = true ;

      // Save meta data of anonymous module
      if (anonymousMeta) {
        Module.save(uri, anonymousMeta) ;
        anonymousMeta = null ;
      }

      // Call callbacks
      var m, mods = callbackList[requestUri] ;
      delete callbackList[requestUri] ;
      while ((m = mods.shift())) {
        // When 404 occurs, the params error will be true
        if(error === true) {
          m.error() ;
        } else {
          //执行当前模块的加载，加载当前模块依赖的其它模块
          m.load() ;
        }
      }
    }
  }

  /**
   * 解析模块的完整访问地址。id为依赖模块的id，refUri源模块的uri
   * @param id
   * @param refUri
   * @returns {*}
   */
  Module.resolve = function(id, refUri) {
    // Emit `resolve` event for plugins such as text plugin
    var emitData = { id: id, refUri: refUri } ;

    //console.log(id+"模块解析："+refUri);

    //此处提现出了很好的扩展性，使用事件机制，优先调用注册的解析方法。如果解析失败，才掉用seajs本身的resolve方法
    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 = typeof parseDependencies === "undefined" ? [] : 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 (!isWebWorker && !meta.uri && doc.attachEvent && typeof getCurrentScript !== "undefined") {
      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
  }

// Save meta data to cachedMods
  Module.save = function(uri, meta) {
    var mod = Module.get(uri)

    // Do NOT override already saved modules
    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)
    }
  }

// Get an existed module or create a new one
  Module.get = function(uri, deps) {
    return cachedMods[uri] || (cachedMods[uri] = new Module(uri, deps))
  }

// Use function is equal to load a anonymous module
  Module.use = function (ids, callback, uri) {

    var mod = Module.get(uri, isArray(ids) ? ids : [ids]) ;

    mod._entry.push(mod)
    mod.history = {}
    mod.remain = 1

    mod.callback = function() {
      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)
      }

      delete mod.callback
      delete mod.history
      delete mod.remain
      delete mod._entry
    }

    mod.load()
  }


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

  Module.define.cmd = {}
  global.define = Module.define


// For Developers
  seajs.Module = Module
  data.fetchedList = fetchedList
  data.cid = cid

  seajs.require = function(id) {
    var mod = Module.get(Module.resolve(id)) ;
    if (mod.status < STATUS.EXECUTING) {
      mod.onload() ;
      mod.exec() ;
    }
    return mod.exports
  }

  /**
   * config.js - The configuration for the loader
   */
// The root path to use for id2uri parsing
  data.base = loaderDir

// The loader directory
  data.dir = loaderDir

// The loader's full path
  data.loader = loaderPath

// The current working directory
  data.cwd = cwd

// The charset for requesting files
  data.charset = "utf-8"

// data.alias - An object containing shorthands of module id
// data.paths - An object containing path shorthands in module id
// data.vars - The {xxx} variables in module id
// data.map - An array containing rules to map module uri
// data.debug - Debug mode. The default value is false
  seajs.config = function(configData) {

    for (var key in configData) {
      var curr = configData[key] ;
      var prev = data[key] ;

      // Merge object config such as alias, vars
      if (prev && isObject(prev)) {
        for (var k in curr) {
          prev[k] = curr[k]
        }
      }else {
        // Concat array config such as map
        if (isArray(prev)) {
          //连接prev和curr数组
          curr = prev.concat(curr)
        }
        // Make sure that `data.base` is an absolute path
        else if (key === "base") {
          // Make sure end with "/"
          if (curr.slice(-1) !== "/") {
            curr += "/"
          }
          curr = addBase(curr)
        }

        // Set config
        data[key] = curr
      }
    }

    emit("config", configData)
    return seajs
  }

})(this);

 

seajs-wrap-debug.js，通过扩展request事件，对返回的js内容动态追加define()，避免在每个js中都要手写define函数。

 

/**
 * The Sea.js plugin for loading CommonJS file
 */
var global = window
var wrapExec = {}

seajs.on("resolve" , function(data) {
  var id = data.id
  if (!id) {
    return ""
  }

  // avoid seajs-css plugin conflict
  if (/\.css\.js$/.test(id)) {
    return;
  }
  
  var m = id.match(/[^?]+?(\.\w+)?(\?.*)?$/)
  // not parse those types
  var WhiteListReg = /\.(tpl|html|json|handlebars|css)/i

  if (m && (!WhiteListReg.test(m[1]) || !m[1])) {
    var uri = seajs.resolve(id, data.refUri)
    var query = m[2] || '';
    wrapExec[uri] = function(uri, content) {
      var wrappedContent;
//    var CMD_REG = /define\(.*function\s*\(\s*require\s*(.*)?\)\s*\{/;
      var CMD_REG = /define\(.*function\s*\(\s*(.*)?\)\s*\{/;
      //如果带有dowrap，则一定用define包装；否则根据是否带有define和nowrap判断是否封装
      if (uri.indexOf('dowrap')==-1&&(CMD_REG.test(content) ||
              query.indexOf('nowrap') > 0 || uri.indexOf('nowrap')>0)) {
        wrappedContent= content;
      } else {
        wrappedContent = 'define(function(require, exports, module) {\n' +
                        content + '\n})';
      }
      
      wrappedContent = wrappedContent + '//# sourceURL=' + uri;
      
      globalEval(wrappedContent, uri) ;
    }
    data.uri = uri
  }
})

seajs.on("request", function(data) {
  var exec = wrapExec[data.uri]

  if (exec) {

    xhr(data.requestUri, function(content) {
      exec(data.uri, content)
      data.onRequest()
    })

    data.requested = true
  }
})

// Helpers
function xhr(url, callback) {
  //modified , 解决ie10跨域加载js问题。首先使用XMLHttpRequest，ActiveXObject是ie7之前版本
  var r = global.XMLHttpRequest ? new global.XMLHttpRequest() :
      new global.ActiveXObject("Microsoft.XMLHTTP") ;

  try{
    r.open("GET", url, true) ;
  }catch (e){
    return failoverxhr(url, callback) ;
  }

  r.onreadystatechange = function() {

    if (r.readyState === 4) {
      // Support local file
      if (r.status > 399 && r.status < 600) {
        failoverxhr(url, callback) ;
      }else {
        callback(r.responseText)
      }
    }
  }

  //发送请求结果
  var result = null ;
  try{
    result = r.send(null) ;
  }catch (e){
    return failoverxhr(url, callback) ;
  }

  return result ;
}

/**
 * 静态资源请求失败的处理
 */
function failoverxhr(url, callback){

  var r = global.XMLHttpRequest ? new global.XMLHttpRequest() :
      new global.ActiveXObject("Microsoft.XMLHTTP") ;

  url = getLocalAppUrl(url) ;

  console.log("use backup "+url);

  r.open("GET", url, true) ;

  r.onreadystatechange = function() {
    if (r.readyState === 4) {
      // Support local file
      if (r.status > 399 && r.status < 600) {
        seajs.emit("failover error", {
          uri: url ,
          status: r.status
        }) ;
      }else {
        callback(r.responseText)
      }
    }
  }

  return r.send(null) ;
}

/**
 * 由本项目中获取请求的url
 */
function getLocalAppUrl(resourceURL) {
  //获取静态资源的uri
  var urlReg = /\/resources.*/ ;
  var uri = urlReg.exec(resourceURL) ;
  //如果配置了项目的url，则有url中请求静态资源
  if(uri && window.resourceConfig && window.resourceConfig.path){
    uri = window.resourceConfig.path + uri ;
  }
  return uri ;
}

function globalEval(content, uri) {
  if (content && /\S/.test(content)) {
    //global.execScript ||
    (function(content) {

      try {
        //var startDate = new Date();
        (global.eval || eval).call(global, content)
        //var endDate = new Date();
        //console.log(uri+" start-> "+(endDate.getTime() - startDate.getTime())+" ms") ;
      } catch(ex) {
        ex.fileName = uri ;
        console.error(ex) ;
      }
    })(content)
  }
}

 

seajs-css-debug.js ： 支持seajs对css资源进行require，在git上提供了一个seajs-css插件，它是直接针对seajs源码进行的改动，有点不友好。以下代码是借助于seajs的事件机制实现css的加载。

 

(function(global){

    var doc = document ;
    var head = doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement ;
    var baseElement = head.getElementsByTagName("base")[0] ;

    //标识是否是css资源,"?:"取消“()”的捕获能力，只是用它来做分组
    var IS_CSS_RE = /\.css(?:\?|$)/i ;

    seajs.on("resolve" , function(data) {
        var id = data.id
        if (!id) {
            return ""
        }
        //只解析css结束的样式文件
        if (! IS_CSS_RE.test(id) ) {
            return ;
        }

        var uri = seajs.resolve(id, data.refUri) ;

        //如果解析后的uri是以".css.js"结尾，是因为seajs对于css加载本身不支持导致
        if( /\.css\.js$/.test(uri) ){
            uri = uri.substring(0 , uri.length - 3 ) ;
        }

        //console.log(id+" 解析地址: "+uri);

        data.uri = uri ;
    }) ;

    function cssOnload(node , data) {
        node.onload = node.onerror = node.onreadystatechange = null ;
        node = null ;

        //console.log("资源加载完成："+data.requestUri) ;

        data.onRequest() ;
    }

    //只针对css进行处理
    seajs.on("request", function(data) {
        if(! IS_CSS_RE.test(data.requestUri) ){
            return ;
        }

        //console.log("css请求地址："+data.requestUri) ;

        var node = document.createElement("link") ;

        if (data.charset) {
            node.charset = data.charset ;
        }

        //资源加载完成的处理函数
        var supportOnload = "onload" in node ;
        if (supportOnload) {
            node.onload = cssOnload.bind(global , node , data) ;
            node.onerror = function() {
                seajs.emit("error", { uri: url, node: node })
                cssOnload(node , data) ;
            }
        }else {
            node.onreadystatechange = function() {
                if (/loaded|complete/.test(node.readyState)) {
                    cssOnload(node , data) ;
                }
            }
        }

        //addOnload(node, callback, isCSS, url) ;

        node.rel = "stylesheet" ;
        node.href = data.requestUri ;

        //加入元素
        baseElement ? head.insertBefore(node, baseElement) : head.appendChild(node) ;

        //标识资源已经在此进行了处理
        data.requested = true ;
    }) ;
})(window) ;

 

  seajs源码执行流程： 

  

  seajs源码中很好的设计，仅列出如下几点：

 

• 事件机制。seajs通过事件机制实现扩展，例如插件：seajs-wrap 和 seajs-css 都是借助于seajs的事件机制进行的扩展。这块也可以在前端业务的框架中借鉴。
• 依赖解析。在js加载完成之后，实际上执行的是define函数，在define中没有立刻执行factory函数，而是通过解析factory函数内容，获取其依赖模块并加载，待所有依赖的模块加载完成之后，再执行factory函数，即AMD推崇的依赖前置。此处也可以通过修改代码使用CMD的规则，即延迟加载依赖模块。
• 模块加载。seajs通过模块加载解决了命名冲突（相同名称的变量或函数、多个不同名称或层级的命名空间管理）、模块化、版本化等问题。在js加载速度上seajs体现的并不明显，特别是现在浏览器都支持多个js文件同时加载的情况下。（seajs模块化根本上是将js的执行结果封装到了module.exports中，并通过参数的方式传递到factory中）
• 正则表达式。在seajs源码中使用了很多正则对请求url、参数等进行判断和处理。通过seajs中正则，学习了正则表达式的贪婪匹配、非贪婪匹配、不捕捉模式、前瞻匹配、后瞻匹配、负前瞻匹配、负后瞻匹配、反向引用匹配等。