模块
- 函数式
function fn(){...}
模块是实现特定功能的文件，将多个函数编写在同一个文件中就构成了一个模块，加载文件即可调用文件中的函数。其缺点是污染全局变量，无法保证与其他模块文件发生命名冲突，且模块成员之间没有什么关系。
- 对象式
// 将模块作为一个对象，模块成员封装在对象中。
var module = {
prop:0,
fn:function(){...}
};
// 通过调用对象属性访问使用模块成员
module.fn();
module.prop = 1;// 缺点是暴露了模块成员，外部可修改模块内部状态。
将模块作为一个对象，模块成员封装在对象中，通过调用对象属性访问使用模块成员。缺点是暴露了模块成员，外部可修改模块内部状态。
- 自执行函数
var module = (function(){
var prop = 0; // 私有变量
var fn = function(){
console.log('fn');
};
return {fn:fn};
})();
module.fn();// fn
// 外部无法访问内部私有变量
console.log(module.prop); // undefined
立即执行函数的优点在于外部无法访问内部私有变量。
模块化
JS模块化起源于Node.js，前端模块化规范分为CommonJS、AMD、CMD，CommonJS使用在服务端，AMD和CMD使用在浏览器环境。
- AMD（Asynchronous Module Definition）异步模块定义
- CMD（Common Module Definition）通用模块定义
前端模块化规范
- CommonJS Module/2.0 规范
- AMD 是RequireJS在推广过程中对模块化定义的规范化产出，特点是提前执行（异步加载即依赖先执行）、延迟执行。（异步加载，依赖前置，提前执行）
-
define定义模块define(['require', 'foo'], function(){return}) -
require加载模块依赖前置require(['foo', 'bar'], function(foo,bar){})
-
- CMD 是SeaJS在推广过程中对模块化规范化产生，特点是延迟执行，即运行时按需加载，顺序执行。（同步加载，依赖就近，延迟执行）
-
define定义exports导出define(function(require, exports, module){...}) -
module上存储了当前模块上的一些对象 -
require(filepath)直接引入，require.async异步引入。
-
CommonJS
CommonJS是服务器端模块的规范，由Node.js推广使用。由于服务端编程复杂性，若没有模块将很难与操作系统及其他引用互动。CommonJS规范指出：
- 一个单独的文件就是一个模块
每个模块都有一个独立的作用域，在模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。 - 输出模块变量的方式是使用
module.exports对象 - 加载模块使用
require()方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。
# math.js 计算参数的和
exports.add = function(){
var sum = 0;
var i = 0;
while(i < arguments.length;){
sum += arguments[i++];
}
return sum;
}
# increment.js 累加计算
var add = require('math').add;
exports.inc = function(val){
return add(val, 1);
}
# test.js
var increment = require('increment').inc;
console.log(increment(1));// 2
CommonJS中require()是同步的，模块系统需同步读取模块文件内容，并编译执行以获得模块接口。然后，这在浏览器端问题多多。由于浏览器端加载JS最佳的方式是在document中插入<script>标签，但<script>脚本标签天生是异步加载的。所以传统的CommonJS模块在浏览器环境中无法正常加载。
解决的思路是开发服务端组件，对模块代码做静态分析，将模块与其依赖一并返回给浏览器。但是这需要服务端安装额外的组件并因此要调整一系列底层架构。
另一种解决的方案是用一套标准模板来封装模块定义，这套模块代码为模块加载器提供了机会，使其能再模块代码执行之前，对代码模块进行静态分析，并动态生成依赖列表。
define(function(require, exports, module){
// the module code goes here...
})
上述案例修改
# math.js
define(function(require, exports, module){
exports.add = function(){
var sum=0, i=0;
while(i < argument.length){
sum += argument[i++];
}
return sum;
}
})
# increment.js
define(function(require, exports, module){
var add = require('math').add;
exports.inc = function(val){
return add(val, 1);
}
})
# test.js
define(function(require, exports, module){
var inc = require('increment').inc;
inc(1);// 2
});
AMD
AMD异步模块定义，由于JS原生不支持，使用AMD规范进行页面开发需使用对应的库函数，也就是大名鼎鼎的RequireJS，实际上AMD是RequireJS在推广过程中对模块定义的规范化产出。
RequireJS采用异步加载模块，模块加载不影响后续语句的执行。所有依赖此模块的语句都定义在一个回调函数中，等待加载完毕后回调函数才开始执行。
RequireJS主要解决了两个问题
- 多个JS文件可能具有依赖关系，被依赖的文件需早于依赖它的文件加载到浏览器。
- JS加载时浏览器会停止页面渲染，加载文件越多页面失去响应的时间将越长。
RequireJS依赖前置
# main.js
// 定义别名
requirejs.config({
paths:{
jquery:'jquery.min'// 可省略后缀.js
}
});
// 引入模块，使用变量$表示jquery模块
requirejs(['jquery'],function($){
$('body').css('background-color', 'red');
});
require.config用于定义别名，在paths属性下配置别名，然后通过requirejs传入所需引入的模块名。
requirejs通过define()方法定义模块，在模块内的方法和属性外部是无法访问的，只能通过return返回才行。
# math.js 定义模块并引入jquery
define('math', ['jquery'], function($){
return {
add:function(x,y){
return x+y;
}
};
});
引入模块也可写成require()，使用时首先将math.js在main.js中引入。
require(['jquery', 'math'], function($, math){
console.log(math.add(1, 2));// 3
})
RequireJS 定义模块
RequireJS定义了define()函数，它是一个全局变量用于定义模块。
define(id?, dependencies?, factory);
# eg:
define(['require', 'foo'], function(){return})
- id 可选，指定模块的名字。若无则模块默认为模块加载器请求的指定脚本的名字。若有则模块名必须是顶级的和绝对的。
- dependencies 可选，当前模块依赖，已被模块定义的模块标识的数组字面量。若无则默认为
["require", "exports", "module"]，若工厂方法长度小于3则加载器会选择以函数的长度属性指定的参数个数调用工厂方法。 - factory 工厂方法，模块初始化要执行的函数或对象，若为函数则应只被执行一次，若为对象则为模块的输出值。
例如
define('alpha', ['require','exports','beta'], function(require, exports, beta){
export.verb = function(){
return beta.verb();
// return require('beta').verb();
}
})
RequireJS 加载模块（依赖前置）
RequireJS采用require()语句加载模块，不同于CommonJS，它要求两个参数。
require([modules], callback)
# eg
require(['foo', 'bar'], function(foo,bar){})
- module 要加载的模块数组
- callback 加载成功后的回调函数
例如
# test.js
require(['increment'], function(inc){
inc.add(1);
});
CMD
CMD通用模块定义，其规范是国内发展出来的，就像AMD有个RequireJS，CMD有个浏览器的实现叫作SeaJS，SeaJS要解决的问题和RequireJS一样，只不过在模块定义方法和模块加载时机上有所不同。
CMD规范中一个模块就是一个文件
define(function(require, exports, module){
// goes here
})
-
require是将其他模块导入的参数 -
exports是将模块内的属性和方法导出的参数 -
module是一个对象，存储了与当前模块相关联的属性和方法。
AMD和CMD的区别
- AMD是依赖关系前置，即在定义模块时就要声明其依赖的模块。
- CMD是按需加载依赖（依赖就近），即只有使用某个模块时再去
require。
# CMD 依赖就近
define(function(require, exports, module){
var a= require('a');
a.todo();
...
var b= require('b');
b.todo();
});
// AMD 依赖前置
define(['a','b'], function(a,b){
a.todo();
b.todo();
})
SeaJS
https://github.com/seajs/seajs
$ npm i -g npm
$ npm install -g bower
$ mkdir seajs && cd seajs
$ bower install seajs
$ bower install jquery
$ vim index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs</title>
<script src="bower_components/seajs/dist/sea.js"></script>
</head>
<body>
<script type="text/javascript">
seajs.config({
base:'./bower_components/jquery/dist/',
alias:{
'jquery':'jquery.js'
}
});
seajs.use('./js/main');
</script>
</body>
</html>
$ vim js/main.js
define(function(require, exports, module){
require('jquery');
});
RequireJS
$ mkdir requirejs && cd requirejs
$ bower install requirejs
$ vim index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requirejs</title>
</head>
<body>
<script type="text/javascript" src="bower_components/requirejs/require.js" data-main="js/app.js"></script>
</body>
</html>
$ vim js/app.js
define(['require','app'], function(){
require(['test'],function(test){
test.init();
});
});
$ vim js/test.js
define(['require', 'test'], function(require){
var obj = {
init:function(){
console.log('test init');
}
};
return obj;
});
