前端模块化的演进过程

  • CommonJS

    • 服务端模块化规范
    • 通过require方法同步加载依赖模块
    • 通过module.export导出模块
    // 导出
    var num = 0;
    function add(a,b) {
      return a + b;
    }
    module.export = {
      num: num,
      add: add
    }
    
    // 导入
    var math = require('./math');
    math.add(1,2); // 3
    • 缺点:因同步加载模块,受限于网络条件,会阻塞代码加载,在客户端上体验较差
  • AMD(require.js)

    • 异步加载模块,不会浏览器加载
    • 依赖相关模块的语句,会在模块加载完成后的回调函数里运行
    • 库函数为require.js,通过define方法定义模块
    // 定义模块
    define('math',['jquery'],function(jquery) { // math依赖jquery模块
      return {
        add: funtion(x,y) {
          return x + y;
        }
      }
    })
    
    // 导入模块
    require(['math'],function(math) {
      math.add(1,2);
    })
  • CMD(sea.js)

    • 集CommonJS与AMD所长(正如其名:海纳百川)
    • 使用define定义模块
    • 使用exports导出方法
    • 使用require导入依赖
    • 使用seajs.use使用模块
    // 定义模块,导出属性/方法
    define(function(require,exports,module) {
      var add = function(a,b) {
        return a + b;
      }
      exports.add = add;
    })
    // 导入并使用模块
    seajs.use(['math.js'],function(math) {
      var sum = math.add(1,2)
    })

    AMD vs. CMD

    AMD:依赖前置,提前执行(预执行) --- 定义模块时就要require

    CMD:依赖就近,延迟执行(懒执行) --- 使用模块时才会require

  • ES6 Module

    • 语言层面上的模块化,通用的模块化解决方案
    • 使用import导入模块
    • 使用export导出模块
    • 默认导出为export default
    • 导入default时,不需要使用大括号
    // 导出 math.js
    var num = 0;
    var add = function(a,b) {
      return a + b;
    }
    export {num, add}
    
    // 导入 math.js
    import {num, add} from './math'
    function sum(base) {
      return add(num,base)
    }
    
    // 默认导出
    export default function add(a, b) {
      return a + b;
    }
    
    // 导入默认
    import add from './math'
    // 同时导入默认及非默认
    import add, {sub, mul} from './math'
    
    // 复合导出
    export { foo, bar } from 'my_module';
    // 等同于
    import { foo, bar } from 'my_module';
    export { foo, bar };
    
    // 导入改名
    import { myFoo as Foo } from 'my_module'
    // 全部导入
    import * as someIdentifier from "someModule";
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章