By

模块化

模块化开发思想

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

模块化开发的好处

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

CMD 规范

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

缺点：

  • 只适用于服务器端， 不适用于浏览器端
  • 在 require 执行后，必须等到模块加载完之后才能进行应用程序
  • 如果加载时间很长，整个应用就会停在那里等
  • 在服务器端就不存在这个问题， 因为所有的模块都在本地磁盘中，模块的加载时间就是文件的读取时间
  • 在浏览器端，因为所有的模块都在服务器端，加载时间取决于网速，这就容易造成浏览器的‘假死’
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 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 = ...
});

node

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

AMD 规范

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

【引用】

文章目录
  1. 1. 模块化
    1. 1.0.1. 模块化开发思想
    2. 1.0.2. 模块化开发的好处
  2. 1.1. CMD 规范
    1. 1.1.1. seajs
    2. 1.1.2. node
  3. 1.2. AMD 规范