js模块化

第一章 commonJS 、 ES6 module 、 AMD 、 CMD

commonJS ： 同步加载模块（为后端制定）

1.浏览器环境之外构建的项目，比如在服务器或桌面中，nodejs遵循 commonJS 规范。

2.作用： 通过模块化引入，解决js作用域问题，使每一个模块可以在自己的 命名空间 中执行。

3.作用：通过module.exports导出对外的变量，通过require()导入其他模块的输出导入到当前页面中。

AMD ：异步加载模块（为前端制定）

1.特点：在服务端和浏览器可以运行。（commonJS对于服务端不是一个问题，但是对于浏览器端，这却是一个严重的问题。因为浏览器需要请求服务端模块，需要等待。因此，浏览器端的模块，应该采用异步加载）

2.采用require.js加载模块，不同于commonJS。

语法:

require(模块名，回调函数)；

CMD：异步加载模块

1.是seajs推崇的规范，用的时候再require。

2.语法:

define(function(require,exports,module){
    var clock = require('clock');
    clock.start();
})

总结：

1. amd vs cmd

相同：都属于异步加载模块方案

不同：amd依赖前置，立即加载；cmd就近依赖，需要把模块变成字符串解析一遍，才知道该依赖了哪些模块。 实际上，解析模块用的时间短到可以忽略。

ES6 module

export + import

【总结】同步：commonJs,ES6 module 。 异步: amd,cmd

第二章 ES5 module.exports vs exports (require引入)

备注：module.exports 属于CommonJS .

1. module 和 exports是nodejs给每个文件内置的两个对象。可以通过 console.log(module) 和 console.log(exports) 在 node main.js 打印出来。

exports // {}
module // Module{..., exports:{},...}

2.module.exports 和 exports 等价，即指向同一块内存。(前提：不去改变他们指向的内存地址)

即:

module.exports.age = 18; // 等价 export.age = 18;

const a =1;
module.export = a;  // 等价于 exports a;

module.export = {a}; // 等价于 exports {a};

3. require引入的对象本质是: module.exports。 即module.exports 和 exports 指向的不是同一块内存时，exports的内容就会失效。

man.js

module.exports = {
    name:'叔叔'
};

exports = {name:"阿姨"};

index.js

let man = require('./1'); // 叔叔
console.log("man",man);

第三章 ES6 export vs export default (import 引入)

一、基本用法

• export default 导出

const a = 1;

export default a;

对应导入:

import a from './a.js'

• export 导出

const a = 1;

export { a };

对应导入:

import { a } from './a.js';

二、区别

在node main.js打印一下，

const a = { name: 1 };
export {a};

console.log(module); // {exports: {a:{ name : 1 }}}

const a = { name: 1 };
export default a;

console.log(module); // {exports :{default : {a:1} }}

结论:

1.export 相当于将对象添加到module的exports中
2.export default相当于：将对象添加到module.exports中，并且对象的key叫做default。

导入：

1.带{}。本质：按照属性key值，导入exports中对应的属性值。  
import {a} from './a.js';

2.不带{}的导入。本质：导入exports中的default属性，如果default属性不存在，则导入exports对象。
import a from './a.js';

第四章 ES5 module.export vs ES6 export

CommonJS模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。