深入seajs源码系列一

浏览数：21 / 时间：2015年06月09日

简述

前端开发模块化已经是大势所趋，目前模块化的规范有很多，众所周知的有commonJS，Module/Wrappings和AMD等，而且ES6也着手开始制定模块化机制的实现。类似于c/c++的include，java中的import关键字，在js中也定义了require关键字，用以引进依赖模块。

由于规范的多样性，模块化的实现也是各有各的不同。nodejs遵从的就是commonJS规范，它有着一些形式上的约定：　　

require为函数，该函数接受一个字符串作为模块标示符
require函数返回值为改模块的API
require函数出错，则抛出异常
exports到处模块API
如果有多个require，则依次加载依赖模

但是浏览器端加载的模块却不像服务器端，依赖模块不在本地，需要通过http请求获取文件，这就涉及到异步加载。但是异步加载并不阻塞代码的运行，如果函数上下文中应用了加载的依赖模块，而此时依赖模块并未加载或者解析完毕，就会抛出undefined错误，避免该错误的发生可以使用回调模式。当所有依赖模块均加载完毕，后执行代码。这也就是Module/Wrappings规范，而seajs基本实现了该规范。

剖析

阅读seajs官网的入门demo，首先在主页面引入seajs文件，并设置入口

// seajs 的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})

// 加载入口模块
seajs.use("../static/hello/src/main")

其次定义模块（main.js）

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require(‘jquery‘);
  var Spinning = require(‘./spinning‘);

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});