版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pcaxb/article/details/53670097
转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：http://blog.csdn.net/pcaxb/article/details/53670097
ES6 模块化(Module)export和import详解
ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。// ES6模块
import { stat, exists, readFile } from 'fs';(1)不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。目前，通过各种工具库，其实已经做到了这一点
(2)将来浏览器的新 API 就能用模块格式提供，不再必要做成全局变量或者navigator对象的属性
(3)不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供
1.严格模式(模块必须遵守,严格模式是ES5引入)
(1)严格模式主要有以下限制:
(2)变量必须声明后再使用
(3)函数的参数不能有同名属性，否则报错
(4)不能使用with语句
(5)不能对只读属性赋值，否则报错
(6)不能使用前缀0表示八进制数，否则报错
(7)不能删除不可删除的属性，否则报错
(8)不能删除变量delete prop，会报错，只能删除属性delete global[prop]
(9)eval不会在它的外层作用域引入变量
(10)eval和arguments不能被重新赋值
(11)arguments不会自动反映函数参数的变化
(12)不能使用arguments.callee
(13)不能使用arguments.caller
(14)禁止this指向全局对象
(15)不能使用fn.caller和fn.arguments获取函数调用的堆栈
(16)增加了保留字（比如protected、static和interface）
2.export 命令
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是使用export命令输出变量的方式:
//方式一
export let name = '张三';
//方式二(推荐)可以一起在模块结束位置输出
let age = 12;
let height = 14;
//导出多个数据,单个数据也一样。
export {age,height};
//export age;或者export 12;都是错误的写法
//方式三(输出函数)
//1
export let reduce1 = function reduce1(){
console.log('reduce1函数减少');
};
export let add1 = ()=>{
console.log('add1函数增加');
};
//2
let reduce2 = function reduce2(){
console.log('reduce2函数减少');
};
export {reduce2};
function reduce2k(){
console.log('reduce2k函数减少');
};
export {reduce2k};
let add2 = ()=>{
console.log('add2函数增加');
};
export {add2};
//3
export function reduce3(){
console.log('reduce3函数减少');
};
//export function(){} 没有函数名,不能这么写
//export ()=>{} 没有函数名,不能这么写
//export add3(){} 不能这样写
//方式四(类)export {
age as AGE1,
age as AGE2,
height as HEIGHT
};export var foo = 'bar';
setTimeout(()=>{foo = 'baz';},500)3.import 命令
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
import {name} from './Modules';
console.log(name);
import {age,height} from './Modules';
console.log(age + "===" + height);
import {reduce1,reduce2,reduce2k,reduce3,add1,add2} from './Modules';
reduce1();
reduce2();
reduce2k();
reduce3();
add1();
add2();
import {foo} from './Modules';
console.log(foo);
setTimeout(()=>{console.log(foo)},500);import {name as name1,name as name2} from './Modules';
console.log(name1+"==="+name2);export先申明后导出不会报错
//导出多个数据,单个数据也一样。
export {age,height};
//方式二(推荐)可以一起在模块结束位置输出
let age = 12;
let height = 14;function A(){
//导出多个数据,单个数据也一样。
export {age,height};
}
//SyntaxError: 'import' and 'export' may only appear at the top level//正确
console.log(name);
import {name} from './Modules';
//错误
function A(){
import {name} from './Modules';
}// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}import './Modules';
//错误import * from './Modules';import './style.css';//import导入样式
当然样式文件也可以使用一下方式使用样式
import styles from './xx.css';4.模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
//模块的整体加载
import * as Modules from './Modules';
console.log(Modules);
console.log("模块的整体加载"+Modules.age + "=="+Modules.name);5.export default 命令
使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
export default class Person {
getAge() {
console.log('Person age');
}
};
let weight = 100;
export default weight;
let width = 30;
export {width as default};import data from './Modules';
console.log(data+"===");export default function foo() {
console.log('foo');
}
//或者写成
function foo() {
console.log('foo');
}
export default foo;function add(x, y) {
return x * y;
}
//export
export {add as default};
// 等同于
// export default add;
//import
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;import _,* as Modules1 from './Modules';
console.log(_);
console.log(Modules1);
或者
import _, { name,age } from './Modules';export default 12;6.export 与 import 的复合写法
如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起部分输出
//输出
export {name,age} from './Modules';
// 等同于
import {name,age} from './Modules';
export {name,age};
//输入
import {name,age} from './Tab';
console.log(name + "Q"+age);
模块的接口改名和整体输出，也可以采用这种写法
//输出
export {name as firstName} from './Modules';
//输入
import {firstName} from './Tab';
console.log(firstName+"===============");//输出
export * from './Modules';
//输入
import {name,age} from './Tab';
console.log(name + "Q"+age);
//或者
import * as Tab from './Tab';
console.log(Tab.name + "XXX" + Tab.age);默认接口的写法如下
//输出
export {default} from './Modules';
//输入
import TabDef from './Tab';
console.log(TabDef);具名接口改为默认接口的写法如下。
export {height as default} from './Modules';
// 等同于
import { height } from './Modules';
export default height;//输入
export {default as defWidth} from './Modules';
//输出
import {defWidth} from './Tab';
console.log(defWidth);
7.模块的继承
如果一个模块A继承了模块B,在模块A中可以使用export *命令整体的导入B中的变量、函数和Class等,export *会忽略B模块的default方法
//TabParent.js
export let w = 1;
export let h = 2;
//Tab.js
export * from './TabParent';//Tab继承TabParent
//TabMain.js
import {w,h} from './Tab';
console.log(w+"======="+h);8.ES6模块加载的实质
ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
//输入Tab.js
let count = 1;
function compute(){
count++;
}
module.exports = {
count:count,
compute:compute
};
//输出TabMain.js
let TabES5 = require('./Tab');
console.log(TabES5.count);//1
TabES5.compute();
console.log(TabES5.count);//1let count = 1;
function compute(){
count++;
}
module.exports = {
get count() {
return count
},
compute:compute
};//输入Tab.js
let count = 1;
function compute(){
count++;
}
export {count,compute}
//输出TabMain.js
import {count,compute} from './Tab';
console.log(count);//1
compute();
console.log(count);//2//输入Tab.js
export let obj = {};
//输出TabMain.js
import {obj} from './Tab';
obj.len = 10;
console.log(obj);
//obj = {len:20};SyntaxError: "obj" is read-only
说明:如果在Tab.js中obj是10,在TabMain.js中也不能改变obj=20。9.浏览器的模块加载
浏览器使用 ES6 模块的语法如下。
<script type="module" src="foo.js"></script>
上面代码在网页中插入一个模块foo.js，由于type属性设为module，所以浏览器知道这是一个 ES6 模块。浏览器对于带有type="module"的<script>，都是异步加载外部脚本，不会造成堵塞浏览器。
详细参考资料:点击打开链接
ES6 模块化(Module)export和import详解
博客地址：http://blog.csdn.net/pcaxb/article/details/53670097
下载地址：http://download.csdn.net/detail/pcaxb/9712331