前端模块化思想

• 将一个产品看成一系列功能模块的组合
• 就是按照功能模块划分来进行代码的编写
• 最终将各个模块组合在一块
• 大到可以是一个集成模块 用户模块、商品模块、登录、注册...
• 小到可以是一个 增、删、查、改
• 各个模块之间是相互独立的
• 即开发时互不干扰
• 由各个模块又可以组成新的集成模块

模块化开发的好处

• 更好的代码复用
• 提高开发效率，缩短开发时间
• 降低耦合度
• 减少 bug 的定位时间
• 降低发布风险
• 避免全局污染，命名冲突
• 文件依赖
• 协同开发

CMD 规范

• 同步加载
• 一个模块就是一个文件
• define 是一个全局函数，用来定义模块
• require 同步加载模块
• require.async 异步加载模块
• exports 对外提供单个接口
• module.exports 对外提供整个接口
• https://github.com/seajs/seajs/issues/242

缺点：

• 只适用于服务器端， 不适用于浏览器端
• 在 require 执行后，必须等到模块加载完之后才能进行应用程序
• 如果加载时间很长，整个应用就会停在那里等
• 在服务器端就不存在这个问题， 因为所有的模块都在本地磁盘中，模块的加载时间就是文件的读取时间
• 在浏览器端，因为所有的模块都在服务器端，加载时间取决于网速，这就容易造成浏览器的‘假死’

/* JSON 数据模块 */
define({ "foo": "bar" });

/* 模板字符串 */
define('I am a template. My name is {{name}}.');

/* 函数 */
define(function(require, exports, module) {
  // 模块代码
});

define(function(require) {
  // 通过 return 直接提供接口
  return {
    foo: 'bar',
    doSomething: function() {}
  };
});

seajs

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

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

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

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

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

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

AMD 规范

• node
  • node.js的模块系统，就是参照CommonJS规范实现的
  • 在CommonJS中，有一个全局性方法require()，用于加载模块

• 异步模块定义
• requirejs
• 模块的加载不影响后面代码的执行
• 所依赖的模块后面都有一个回调函数
• 回调函数在模块加载完成之后执行

【引用】

• http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
• https://github.com/seajs/seajs/issues/242
• http://seajs.org/docs/#quick-start