前端模块化

前端模块化

将逻辑代码拆分成独立的块，各自封装，互相独立

前端模块化的目的：使代码更易于维护，测试和重构。提升代码的可复用性和开发效率

目前流行的js模块化规范：CommonJS，AMD，CMD，ES6模块化

ES6是静态加载，其他都是动态加载

1、CommonJS 

CommonJS用同步的方式加载模块，适用于服务端编程。

在服务端，模块文件都存储在本地磁盘，读取非常快，所以这样做不会有问题，最佳应用node.js

在浏览器，由于网络原因，更合理的方案时异步加载

语法糖：

输入：require

输出：module.exports

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 定义模块math.js var basicNum = 0; function add(a, b) {   return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量   add: add,   basicNum: basicNum }   // 引用自定义的模块时，参数包含路径，可省略.js var math = require('./math'); math.add(2, 5);   // 引用核心模块时，不需要带路径 var http = require('http'); http.createService(...).listen(3000);

2、AMD

AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行

AMD是依赖前置，提前执行（最佳实践RequireJS）

所有模块加载完成后才执行主逻辑，执行顺序a和b和开发人员写的不一样，那个模块网速好，先下载完就先执行

语法糖：

require.config()指定引用路径等

define()定义模块

require()加载模块

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// 定义math.js模块 define(function () {     var basicNum = 0;     var add = function (x, y) {         return x + y;     };     return {         add: add,         basicNum :basicNum     }; }); // 定义一个依赖underscore.js的模块 define(['underscore'],function(_){   var classify = function(list){     _.countBy(list,function(num){       return num > 30 ? 'old' : 'young';     })   };   return {     classify :classify   }; })   // 引用模块，将模块放在[]内 require(['jquery', 'math'],function($, math){   var sum = math.add(10,20);   $("#sum").html(sum); });

3、CMD

CMD是就近依赖，延迟执行（SeaJs）

模块加载完成后才执行主逻辑，执行顺序a和b和开发人员写的一样

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/** AMD写法 **/ define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {      // 等于在最前面声明并初始化了要用到的所有模块     a.doSomething();     if (false) {         // 即便没用到某个模块 b，但 b 还是提前执行了         b.doSomething()     } });   /** CMD写法 **/ define(function(require, exports, module) {     var a = require('./a'); //在需要时申明     a.doSomething();     if (false) {         var b = require('./b');         b.doSomething();     } });

 

4、ES6模块化

在编译的时候确定依赖关系，以及输入输出变量

语法糖：

输入：import

输出：export