前端模块化

模块的理解

• 将一个复杂的程序按照一定的规范封装成几个块或文件，并进行组合
• 块的内部数据和实现是私有的，只是向外部暴露一些接口（方法）

模块化的进程

1. 全局function模式：将不同的功能封装成不同的全局函数

缺点：污染全局命名空间，模块成员间看不出直接关系

2. namespace模式：简单对象封装

缺点：数据不安全，外部可以直接修改模块内部数据

3. IIFE模式：匿名函数自调用，引入依赖（闭包）

缺点：引入多个script，请求过多，依赖模糊

模块化规范

1. CommonJS规范

在服务端，模块是在运行时同步加载的；在浏览器端，模块需要提前编译打包处理

• 暴露模块：module.exports = value 或 exports.xxx = value
• 引入模块：require(xxx)如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为文件路径

2. AMD规范

非同步加载模块，允许指定回调函数。浏览器环境，要从服务端加载模块，必须采用非同步模式，因此浏览器端一般采用AMD规范

• 暴露模块

  define(['module'], function(m) {
    return 模块
  })

• 引入模块

  require([module], function(m) {
    使用m
  })

3. CMD规范

专门用于浏览器端，模块加载是异步的，模块使用时才会加载执行

• 暴露模块

  define(function(require, export, module) {
    var m = require('./module1')
    export.xxx = value
    module.export = value
  })

• 引入模块

  define(function(require) {
    var m1 = require('./module1')
    m1.show()
  })

4. ES6模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

• 暴露模块

  var num = 0
  var add = function(a, b) {
    return a + b
  }

  export { num, add }

  <!-- -------------------------------或者默认暴露 -->
  export default function () {
    console.log('这是默认暴露的方法')
  }

• 引入模块

  import { num, add } from './module'
  <!-- ----------------------------------或者自定义名称引入默认暴露的模块 -->
  import log from './module'
  log()