前端模块化
将逻辑代码拆分成独立的块，各自封装，互相独立 前端模块化的目的：使代码更易于维护，测试和重构。提升代码的可复用性和开发效率 目前流行的js模块化规范：CommonJS，AMD，CMD，ES6模块化 ES6是静态加载，其他都是动态加载1、CommonJS
CommonJS用同步的方式加载模块，适用于服务端编程。 在服务端，模块文件都存储在本地磁盘，读取非常快，所以这样做不会有问题，最佳应用node.js 在浏览器，由于网络原因，更合理的方案时异步加载 语法糖： 输入：require 输出：module.exports// 定义模块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()加载模块
// 定义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和开发人员写的一样/** 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
标签：function,模块化,前端,add,模块,var,require,加载 From： https://www.cnblogs.com/alisadream/p/18312869