seajs3.0.0源码分析记录

自己边读变加了一些注释，理解了一下seajs3.0.0工作的流程。正则没有一个个去理解，插件模块也没看， 以后有时间了可以补充完整~

事件系统中事件队列的获取&定义方法

var list = events[name] || (events[name] = [])

以前自己写都是

if(!events[name]){
    events[name]=[];
}
var list=events[name];

囧

加载模块文件的方法

webworker环境下加载模块文件

获取seajs的加载路径：

var stack;
  try {
    var up = new Error();
    throw up;
  } catch (e) {
    // IE won't set Error.stack until thrown
    stack = e.stack.split('\n');
  }

//  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

根据url加载模块，使用的是webworker全局环境下的importScripts方法

function requestFromWebWorker(url, callback, charset) {
    // Load with importScripts
    var error;
    try {
      importScripts(url);
    } catch (e) {
      error = e;
    }
    callback(error);
  }
  // For Developers
  seajs.request = requestFromWebWorker;

浏览器js线程中异步加载模块文件

  // 通过script标签加载脚本
  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
  }
  //添加加载完成之后的处理，包括报错、清除对象、移除dom等操作
  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
  seajs.request = request

核心模块类 Module

Module类定义

//定义module类
function Module(uri, deps) {
  //模块路径
  this.uri = uri
  //这是一个字符串数组，内容是该模块依赖模块的id列表
  this.dependencies = deps || []
  //这是该模块所依赖的模块的一个map key为id，value为Module对象
  this.deps = {} // Ref the dependence modules
  //模块状态
  this.status = 0
  //用来辅助load的一个数组，load完成后会删掉
  this._entry = []
}

模块缓存

var cachedMods = seajs.cache = {}

原型方法列表

// 获取模块中依赖模块的uri数组
Module.prototype.resolve 
// 一个辅助模块load过程的函数
Module.prototype.pass
//加载并执行模块
Module.prototype.load
//模块加载完成后触发
Module.prototype.onload
//模块404时候触发
Module.prototype.error
//执行模块
Module.prototype.exec
//用来获取模块文件，每调用一次给一个缓存对象设置一个key value，value是一个函数，调用即开始加载文件

函数方法列表

//通过id获取文件uri
Module.resolve = function(id, refUri)
//用来定义一个模块
Module.define= function (id, deps, factory)
//将id、依赖、 factory 、模块加载状态设置给缓存中的模块
Module.save= function(uri, meta)
////根据uri，从缓存中获取模块，或者以接收的uri和deps参数创建一个模块返回，并加入缓存
Module.get=function(uri, deps)
//用来加载并运行模块
Module.use = function(ids, callback, uri)

暴露出来的API

 // Public API

 seajs.use = function(ids, callback) {
   //use 实际上创建了一个id为data.cwd + "_use_" + cid()的模块，这个模块的依赖模块是待启动的模块
   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)) {
         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
 }

常用API和特性的理解

seajs.use原理

seajs.use ("index.js")=Module.use(["index.js"],undefined,"http://xxxx.com/xxx/xxx/_use_i")

① 通过Module.get创建模块mod，

② 通过Module.prototype.load加载mod模块，为mode定义history、remain、callback属性，设置_entry

 

Module.prototype.load中：

①通过Module.prototype.resolve函数获取模块的依赖模块uri数组。

Module.prototype.resolve会遍历mod对象的dependencies中的模块id,挨个通过Module.resolve函数获取其uri，最后返回数组

② 遍历上一步获取的uri，通过Module.get获取模块，给mod的deps属性设置值，key为依赖模块id，value为依赖模块对象

④ 通过Module.prototype.fetch 获取所有依赖模块的模块文件

⑤ 对子模块重复以上过程

⑥mod模块加载完成后，执行onload回调，在onload中执行Module.use的回调callback，在callback中执行Module.prototype.exec来运行该模块

require、exports、module的注入&懒执行

Module.use的回调callback中会运行模块的Module.prototype.exec ，返回module的exports对象。

这个过程中，若factory是function，则调用factory，参数传入require，mod.exports，mod。

require：

  function require(id) {
    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()
  }

注入的过程：

// Exec factory
  var factory = mod.factory
  //执行factory的代码，这个时候才执行，懒执行
  var exports = isFunction(factory) ?
    factory(require, mod.exports = {}, mod) :
    factory

可以看到，require的作用是从缓存中获取模块，然后exec。也就是说，只有require函数被执行的时候，模块代码才会被执行。这就是seajs的as lazy as posible ，懒执行。

global.define

define函数的作用是从参数中获取 id 、dependences 、  factory，然后从模块缓存中获取模块对象，或者创建新模块加入缓存，将id、dependences、factory设置给模块。

贴上关键代码：

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
    }
  }
  // 从function字符串中获取依赖模块id
  if (!isArray(deps) && isFunction(factory)) {
    deps = typeof parseDependencies === "undefined" ? [] : parseDependencies(factory.toString())
  }
  var meta = {
    id: id,
    uri: Module.resolve(id),
    deps: deps,
    factory: factory
  }
  meta.uri ? Module.save(meta.uri, meta) :
    // Save information for "saving" work in the script onload event
    anonymousMeta = meta
}

(为了方便理解，源码中一些辅助代码被我剪切掉了)

 最后附上我写过注释的源码

sea3.0.0-learn