ES6新特性|ES6新特性-模块化（import/export）前端|es6|vue.js|js|javascript

ES6新特性的学习

一.模块化的概念
二.导入（import）
三.导出（export）
四.默认导出（export default）

一.模块化的概念模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。
在es5中，用module.exports和exports导出模块，用require引入模块。
es6新增export和export default导出模块，import导入模块。
二.导入（import） import语句只能在声明了type="module"的script的标签中使用。
动态导入：import()，它不需要依赖type="module"的script标签。
按照一定的条件或者按需加载模块的时候，动态import()是非常有用的。
而静态的import是初始化加载的最优选择。

通用模式：写法：import * as 命名 from “文件地址” 解构赋值形式：写法：import {school,findJob} from “文件地址” 简便形式：只能针对默认暴露，对其他无效写法：import 命名 from “文件地址”

三.导出（export） export后必须跟语句, 何为语句, 如声明, for, if 等都是语句, export 不能导出匿名函数, 也不能导出某个已经声明的变量, 如:

export const bar = function() {}; // 合法 export bar; // 非法 export 1; // 非法 export function foo () {}; // 合法, 后跟的是声明语句 export { foo }; // 合法, 后面跟的{}理解为语句, 就像if后面的{}一样 export { foo as bar }; // 合法export { foo: foo }; // 非法, 后面的{}被解析成对象

四.默认导出（export default） export default在整个模块中只能出现一次, 后只能具体的值, 何为具体的值, 如1, 2, 3, 再比如一个函数声明(非表达式), 或者是一个类声明(与函数声明一个意思), 或者匿名函数, 只要是能用变量接受的都可以, 例子:

export default 1; // 合法 export default function foo() {}; // 合法, 因为function foo() {} 能被变量接受, 如 var bar = function foo() {} export default const bar = 1; // 非法, 因为var a = const bar = 1 是不合法的 export default { foo }; // 合法, {} 被理解为一个对象 export default { foo: foo }; // 合法, 同上//先用export default语法默认导出 //既然是默认输出，那么一个模板只能使用一次 export default function foo() { console.log('foo'); }//导入默认值 import customName from './default.js'; //不用加大括号{} customName(); // 'foo'

【ES6新特性|ES6新特性-模块化（import/export）】参考：
https://zhuanlan.zhihu.com/p/59683520
https://www.jianshu.com/p/a72d0560bcc6