[TOC]
*****
## 1 模块意义
1. 模块将大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。
2. 模块加载方案之前，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。
3. ES6在语言规格的层面上，实现了模块功能，实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方法
4. CommonJs和AMD模块则是在运行时确定，生成模块对象，输入时必须查找对象属性，这种加载称为运行时加载，完全没有静态化。
5. ES6的模块尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6模块不是对象，通过export命令显式指定输出的代码，输入采用静态命令的形式。这种加载称为编译时加载。
## 2 模块的简单使用
1. 模块功能主要由两个命令构成 export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能
## 3 export命令
1. 模块通常实现为独立的文件。内部的所有变量，外部无法获取，可以使用export命名导出该变量。第一种写法就是声明式导出。
~~~
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
~~~
2. 整体导出。首先考虑下面这种写法。可以在脚本尾部，一眼看清楚输出了哪些变量
~~~
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
~~~
3. 除了输出变量，还可以输出函数或类
~~~
export function multiply (x, y) {
return x * y;
};
~~~
~~~
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
~~~
4. export命令规定的对外的接口，必须与模块内部的变量建立一一对应关系。
~~~
// 报错
export 1;
// 报错
var m = 1;
export m;
~~~
~~~
// 写法一
export var m = 1;
// 写法二
var m = 1;
export {m};
// 写法三
var n = 1;
export {n as m};
~~~
~~~
// 报错
function f() {}
export f;
// 正确
export function f() {};
// 正确
function f() {}
export {f};
~~~
5. export语句输出的接口，与对应的值是动态绑定关系，可以通过该接口，取到模块内部实时的值
~~~
export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
~~~
6. ES6模块与CommonJS规范完全不同。CommmonJS模块输出的是值的缓存，不存在动态更新。ES6模块的import与export命名只可以用在模块顶层，处于块级作用内，就会报错。
## 4 import命令
1. 使用export命令导出的即可，使用其他JS文件可以通过import命令加载这个模块文件
~~~
// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
~~~
2. import 命令用于加载profile.js文件，从中输出变量。import命令接受一个对象，里面指定从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同
3. 可以使用as关键字，将输入变量重新命名
~~~
import { lastName as surname } from './profile';
~~~
4. import命令具有提升效果，会提升到整个模块的头部，首先执行
~~~
foo();
import { foo } from 'my_module';
;不会报错,import导入早于foo的调用
~~~
5. import语句会执行先加载的模块，因此可以使用下面的写法，仅仅执行lodash模块，不输入任何值
~~~
import 'lodash';
~~~
## 5 模块的整体加载
1. 可以使用星号(*)指定一个对象，所有输出值都加载再者对象上面
~~~
// circle.js
export function area(radius) {
return Math.PI * radius * radius;
}
export function circumference(radius) {
return 2 * Math.PI * radius;
}
// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));
// 或者
import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));
~~~
## 6 export default命令
1. 使用import命令，用户需要知道加载的变量名或函数命令，否则无法加载。为了提供方便，可以直接输出匿名函数，在导入时指定名称
~~~
// export-default.js
export default function () {
console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'
~~~
2. 可以使用任意名称指向export-default.js输出的方法，就不需要知道原模块输出的函数名。需要注意的是，import命令后面，不可以使用大括号，也可以使用在非匿名函数前
~~~
// export-default.js
export default function foo() {
console.log('foo');
}
// 或者写成
function foo() {
console.log('foo');
}
export default foo;
~~~
3. 对比默认输出和正常输出
~~~
// 输出
export default function crc32() {
// ...
}
// 输入
import crc32 from 'crc32';
// 输出
export function crc32() {
// ...
};
// 输入
import {crc32} from 'crc32';
~~~
第一组使用export default时，对应import语句不需要使用大括号，
export default命令用于指定模块的默认输出。一个模块只能有一个默认输出，因此export default命令只能使用一次。所以import命名后面不用加大括号，只能导出一个方法。
第二组不使用export default时，对应import语句需要使用大括号
4. 本质上export default输出一个叫做default的变量或方法，允许任意命名。其后不能跟变量声明语句
~~~
// modules.js
function add(x, y) {
return x * y;
};
export {add as default};
// 等同于
// export default add;
// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
~~~
5. 如果要输出默认的值，只需要在export default输出指定值，也可以用来输出类
~~~
export default 42;
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass'
let o = new MyClass();
~~~
## 6 模块的继承
## 7 模块的循环加载
## 8 参考
[ES6语法-Module](http://es6.ruanyifeng.com/#docs/module)
- 概述
- 框架结构
- 编译入口(\entries)
- web-compiler.js(web编译)
- web-runtime.js(web运行时)
- web-runtime-wih-compiler.js(web编译运行)
- web-server-renderer.js(web服务器渲染)
- 核心实现 (\core)
- index.js(核心入口)
- config.js(核心配置)
- core\util(核心工具)
- core\observer(双向绑定)
- core\vdom(虚拟DOM)
- core\global-api(核心api)
- core\instance(核心实例)
- 模板编译(\compiler)
- compiler\parser(模板解析)
- events.js(事件解析)
- helper.js(解析助手)
- directives\ref.js(ref指令)
- optimizer.js(解析优化)
- codegen.js(渲染生成)
- index.js(模板编译入口)
- web渲染(\platforms\web)
- compiler(web编译目录)
- runtime(web运行时目录)
- server(web服务器目录)
- util(web工具目录)
- 服务器渲染(\server)
- render-stream.js(流式渲染)
- render.js(服务器渲染函数)
- create-renderer.js(创建渲染接口)
- 框架流程
- Vue初始化
- Vue视图数据绑定
- Vue数据变化刷新
- Vue视图操作刷新
- 框架工具
- 基础工具(\shared)
- 模板编译助手
- 核心实例工具
- Web渲染工具
- 基础原理
- dom
- string
- array
- function
- object
- es6
- 模块(Module)
- 类(Class)
- 函数(箭头)
- 字符串(扩展)
- 代理接口(Proxy)
- 数据绑定基础
- 数据绑定实现
- mvvm简单实现
- mvvm简单使用
- vdom算法
- vdom实现
- vue源码分析资料