seajs学习之模块的依赖加载及模块API的导出

前言

SeaJS非常强大，SeaJS可以加载任意 JavaScript 模块和css模块样式，SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中。

通过参照上文的demo，我们结合源码分析在简单的API调用的背后，到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出。

模块类和状态类

首先定义了一个Module类，对应与一个模块

function Module(uri, deps) { this.uri = uri this.dependencies = deps || [] this.exports = null this.status = 0 // Who depends on me this._waitings = {} // The number of unloaded dependencies this._remain = 0}

Module有一些属性，uri对应该模块的绝对url，在Module.define函数中会有介绍；dependencies为依赖模块数组；exports为导出的API；status为当前的状态码；_waitings对象为当前依赖该模块的其他模块哈希表，其中key为其他模块的url；_remain为计数器，记录还未加载的模块个数。

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}

上述为状态对象，记录模块的当前状态：模块初始化状态为0，当加载该模块时，为状态fetching；模块加载完毕并且缓存在cacheMods后，为状态saved；loading状态意味着正在加载该模块的其他依赖模块；loaded表示所有依赖模块加载完毕，执行该模块的回调函数，并设置依赖该模块的其他模块是否还有依赖模块未加载，若加载完毕执行回调函数；executing状态表示该模块正在执行；executed则是执行完毕，可以使用exports的API。

模块的定义

commonJS规范规定用define函数来定义一个模块。define可以接受1,2,3个参数均可，不过对于Module/wrappings规范而言，module.declare或者define函数只能接受一个参数，即工厂函数或者对象。不过原则上接受参数的个数并没有本质上的区别，只不过库在后台给额外添加模块名。

seajs鼓励使用define(function(require,exports,module){})这种模块定义方式，这是典型的Module/wrappings规范实现。但是在后台通过解析工厂函数的require方法来获取依赖模块并给模块设置id和url。

// Define a moduleModule.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 // 如果deps为非数组，则序列化工厂函数获取入参。 if (!isArray(deps) && isFunction(factory)) { deps = parseDependencies(factory.toString()) } var meta = { id: id, uri: Module.resolve(id), // 绝对url deps: deps, factory: factory } // Try to derive uri in IE6-9 for anonymous modules // 导出匿名模块的uri 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}