写给前端的你:ES6模块化知识点总结

一：严格模式问题：

ES6module 默认使用严格模式

• 变量必须声明后再使用
• 函数的参数不能有同名属性，否则报错
• 不能使用with语句
• 不能对只读属性赋值，否则报错
• 不能使用前缀 0 表示八进制数，否则报错
• 不能删除不可删除的属性，否则报错 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
• eval不会在它的外层作用域引入变量
• eval和arguments不能被重新赋值
• arguments不会自动反映函数参数的变化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局对象
• 不能使用fn.caller和fn.arguments获取函数调用的堆栈
• 增加了保留字（比如protected、static和interface）

二：export命令

每个js文件都被ES6视为一个模块，export可以决定这个模块的输出内容，

1. export输出变量

// profile.js
export firstName = 'my';
export lastName = 'name';
export age = 24;

等价于

// profile.js
let firstName = 'my';
let lastName = 'name';
let age = 24;
export {firstName,lastName,age}

第二种写法优点是可以清晰看出来这个模块的输出内容 2. 输出函数或者类

// mathUtil.js 
export function multiply(x,y){
 return x * y
}

输出了一个乘的方法

// mathUtil.js
export Class MathUtil{
 multiply(x,y){
 return x * y
 }
}

1. export 需要输出一个接口 而不是一个值，

let m = 1;
export m //报错
function f(){
 
}
export f // 报错
//可以改为
export {
 m,
 fn
}
// 或者改为
export {
 m as n
}

1. export命令可以用as关键字来改名。

// 使用as之后可以把一个方法按照多个名字输出
let add = function(x,y){
 return x + y;
}
export {
 add as addFirst,
 add as addSecond
}

1. export语句输出的接口与对应值是动态绑定关系 与CommonJs不同 CommonJS模块输出的是值的缓存，不存在动态更新

export let foo = 'bar';
setTimeout(() => foo = 'baz', 2000)
// 2000ms后 输出的接口变成了 baz

1. export可以使用在代码的任何位置，但是export必须在顶层作用域，不可以在块级作用域中使用。

function foo() {
 export default 'bar' // SyntaxError
}
foo()

三：import命令

1. 使用import命令 在export命令定义了模块对外的接口后，其他的js文件就可以通过import加载这个文件。

import {firstName,secondName} from 'profile.js';
console.log(firstName);
console.log(secondName);

1. import命令引入的时候如何改名

import { lastName as surname } from 'profile.js'

1. import引入的模块是只读的 import引入的模块是只读的不可以修改，

import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
改写输出对象的属性是可以的

1. import命令具有提升性，会提升到模块头部
2. import是静态命令，不能使用表达式和变量（所有需要运行之后才能得到结果的语法结构）
3. import加载模块

// 加载模块但是不输入任何值，
import 'loadsh'
// 多次重复执行同一句import语句，只会执行一次。
import 'loadsh'
// 多个import引入同一个模块的接口
import {foo} from 'my_module'
import {bar} from 'my_module'
等价于
import {foo,bar} from 'my_module'
所以说明import语句是一个单例模式

1. require与import import要早于require，import在静态解析阶段执行，永远早于require。

四：模块的整体加载

模块整体加载用*指定一个对象，所有的输出值都加载在这个对象。

// circle.js
function area(radius){
 return Math.PI * radius * radius
}
function circumference(radius){
 return 2 * Math.PI * radius
}
export{
 area,
 curcumference
}
// main.js
// 按方法加载
import {area,circumference} from './circle.js'
area(4);
circumference(14);
// 整体加载
import * as circle from './circle.js'
circle.area(4);
circumference(14);

通过整体引入的方法被指定的对象是不可以被扩展的。

import * as util from 'util.js'
util.add = function(x,y){return x + y};
//Uncaught TypeError: Cannot add property add, object is not extensible

五：export default 命令

给模块指定默认输出，无需了解模块有哪些属性和方法

// add.js
export default function(x , y){
 return x + y
}
// main.js
import add from 'add.js'
add(10,20);

export default 和 export的区别

1. export default 默认指定输出，import语句不用大括号 export 需要输出一个接口 import的时候需要使用大括号活着整体加载。
2. export default只能使用一次 export可以使用多次。

本质上export default 就是输出一个叫做default的变量或方法，系统允许你给这个输出起任何名字。

//util.js
let name = 'myname';
export {
 name as default
}
// main.js
import util from './util.js';
console.log(util); // myname

export default 命令本质是将后面的值赋给default。 export 和export default可以一起使用

// util.js
export default class Util{
 subtracter(x,y){
 return x - y; 
 }
}
export function add (x,y){
 return x + y
};
// main.js
import Util,{add}from './util.js';
let util = new Util();
console.log(util.subtracter(20,10));
console.log(add(20,10));

六：export和import的复合写法

import {foo,bar} from 'my_module'
export {foo,bar}
//等价于
export {foo,bar} from 'my_module'
// 默认接口的写法
export { default } from 'util.js'
// 中途改名
export { add as myAdd } from 'util.js'
// 具名接口改成默认接口
export { add as default } from 'util.js'
// 默认接口改成具名接口
export { default as add } from 'util.js'

七：import() 提案方法

引擎处理import命令时是在编译阶段，引擎处于静态分析，并不能动态的加载模块，因此有提案来实现node的require方法，实现动态加载就是import();返回一个Promise对象，成功的回调里就是加载的模块，可以使用解构赋值来输出接口。

应用场景

1. 按需加载
2. 条件加载
3. 动态模块路径

动态路径，这块不知道webpack支持程度如何？