一、模块化分类

  1. require.js AMD 前端的模块化规范
  2. sea.js CMD 前端的模块化规范
  3. common.js 后端的模块化规范 node里面可以用
  4. es6模块化规范


二、模块化方案的好处

  1. 解决了多个文件之间的依赖的问题
  2. 解决了多个文件之间的命名冲突的问题


三、AMD模块化方案

3-1 引入模块

require([dependencies],function(){});

  • 第一个参数是一个数组,表示所依赖的模块
  • 第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用.加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

3-2 定义模块

define(id?,dependencies?,factory);

  • id: 定义中模块的名字;可选；如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字.
  • 依赖dependencies：是一个当前模块依赖的,已被模块定义的模块标识的数组字面量
  • 工厂方法factory,模块初始化要执行的函数或对象.如果为函数,它应该只被执行一次.如果是对象,此对象应该为模块的输出值.
  • 默认情况下文件名即为模块名


四、CMD模块化方案

4-1 声明模块

define(id?,d?,factory)
- id : 因为CMD推崇一个文件一个模块,所以经常就用文件名作为模块id
- d : CMD推崇依赖就近,所以一般不在define的参数中写依赖
- factory :函数 function(require,exports,module)
require 是一个方法,用来获取其他模块提供的接口
exports 是一个对象,用来向外提供模块接口
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法

4-2 使用模块

seajs.use(‘mymodel.js’,function(mymodel){
});

五、AMD和CMD的区别

  1. CMD 推崇依赖就近;AMD 推崇依赖前置
  2. CMD 是延迟执行,懒加载;AMD 是提前执行
  3. CMD性能好,因为只有用户需要的时候才执行;AMD用户体验好,因为没有延迟,依赖模块提前执行了


六、COMMONJS模块化规范

6-1 模块的引入

  1. const modu = require(‘./b.js’)

6-2 模块的导出

  • 导出单个成员

    1. exports.foo = “变量”
    2. exports.add = function(){}

  • 导出多个成员

    1. module.exports = {
    2. }

七、ES6模块化方案

  • 导出单个成员 ```javascript export let name = ‘leo’; export let age= 30;
    //import {name,age} from ‘./a.js’
  2. - 导出多个成员
  3. ```javascript
  4. let name2= 'leo2';
  5. let age2= 33;
  7. export {name2, age2};
  8. //import {name2,age2} from './a.js'
  • 导出默认成员
    1. let kk2 = "abc"
    2. export default kk2;
    3. //import kk2 from './a.js'