js模块化

模块化的演进过程

1. 文件划分
2. 命名空间 (将每个模块暴露在全局对象
3. IIFE 立即执行函数

模块化开发的思想

模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。

CommonJS (Node.js)

• 运行在服务端

• 代码同步加载

• 代码可以多次加载，但是运行结果会被缓存

• require('xxx')加载模块

• module.exports={}(全局变量或方法)或exports定义对外的接口

AMD (require.js)

• Async Module Definition
• 依赖前置，定义模块时就要声明依赖
• 代码异步加载，且谁先加载完执行谁

  // AMD
  define("fooModule",["./a", "./b"], function(a, b) {
      function foo(){
          a.doSomething();
          b.doSomething();
      // ...可能b比a先执行了
      }
      return{
          foo
      }
      exports.xxx = ...
      module.exports = ...
  });
  
  require(["fooModule",'./fooModule.js'],function(module,file) {})

CMD (sea.js)

• Common Module Definition
• 定义和加载与AMD相同
• 依赖可以就近书写
• 依赖全部加载完才按顺序执行

  // CMD
  define(function(require, exports, module) {
      var a = require("./a");
      a.doSomething();
  
      var b = require("./b"); 
      b.doSomething();
  
      exports.xxx = ...
      module.exports = ...
  });

UMD

• Universal Module Definition
• 写法是一个自运行函数
• 兼容CMD/AMD/命名空间

ES6 MODULE

• ！ES6模块不是对象，import指向的是模块的的只读引用（动态引用），export只是显式指定输出的代码

• 编译时加载,用到才执行

• export导出模块,提供export default制定默认输出

• import引入

• import和export命令只能写在代码顶层

  // modules.js
  function add(x, y) {
      return x * y;
  }
  export {add as default};
  // 等同于
  export default add;
  
  // app.js
  import { default as foo } from 'modules';
  // 等同于
  import foo from 'modules';

ES6 MODULE和CommonJS的区别

// CommonJS模块
// 运行时加载
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
//上面代码的实质是整体加载fs模块（即加载fs的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为“运行时加载”

modules.exports xxx
//CommonJS 模块输出的是值的拷贝，输出后模块内部的变化就影响不到这个值

// ES6
// 编译时加载
import { stat, exists, readFile } from 'fs';
//编译时就完成模块加载，（确定了指针
//当然，这也导致了没法引用 ES6 模块本身，因为它不是对象

exports default xxx
// ES6 MODULES输出的是值的引用，运行时才到指定模块中取值