ES6模块化开发

1. 模块化介绍

随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持”类”（class），更不要说”模块”（module）了。所幸当前ECMAScript标准第六版，将正式支持”类”和”模块”，在现有的运行环境中，实现了”模块”的效果。

模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

模块化开发的4点好处：

1. 避免变量污染，命名冲突

2. 提高代码复用率

3. 提高维护性

4. 依赖关系的管理

关于模块化的具体介绍可以查看附件

2. ES6 模块

目前最主流的模块化方案应该是 ECMAScript 2015 提出的模块化规范（也称“ES6 模块”），这个规范同时适用于 JavaScript 的前后端环境。

通过上面的介绍，我们知道requireJS是AMD规范的起源，seaJS是CMD规范的起源，由于两者功能高度重合，后来seaJS不再维护，从此淡出人们的视野，于是requireJS一家独大，直到ES6的出现，且迅速成为前端和服务器端通用的模块解决方案，完全可以取代AMD 规范和NodeJS支持的CommonJS 规范。

ES6中首次引入模块化开发规范ES Module，让Javascript首次支持原生模块化开发，从此前端开发一发不可收拾，让requireJS等第三方框架倍感压力，被淘汰也只是时间问题。所以以后的JS模块化开发将是ES Module的天下。

ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，那如何把每个模块联系起来呢？核心点就是模块的导入（import）与导出（export）。

1、export命令用于规定模块的对外接口，基本语法为export xxx，暴露的接口可以是对象、函数、基本类型变量。另外可以使用export default xxx为模块指定默认输出，因为很多时候用户不知道要加载的模块的属性名。

注意，export后只能跟function、class、var、let、const、default、{}，export的作用就是给当前模块对象添加属性，方便后期导入到其他模块中。

2、 import命令用于输入其他模块提供的功能，基本语法为import xxx from xxx，其中第一个xxx为引入的模块的属性名，第二个xxx为模块的位置。

2.1 按需导出/导入

我们先来创建一个 test.js 文件，来对这一个变量进行输出：

export let myName = "贾玲";

然后可以创建一个index.js文件，以import的形式将这个变量进行引入：

import {myName} from "./test.js";

console.log(myName); //贾玲

如果要输出多个变量可以将这些变量包装成对象进行模块化输出：

// a.js
let myName = "贾玲";
let myAge = 21;
let myfn = function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
let num = 20;
export {
    myName,
    myAge,
    myfn
}

// b.js
import { myfn, myAge, myName } from "./test.js";
console.log(myfn()); // 我是贾玲！今年21岁了
console.log(myAge);  // 21
console.log(myName); // 贾玲

如果你不想暴露模块当中的变量名字，可以通过as来进行操作:

// a.js
let myName = "laowang";
let myAge = 90;
let myfn = function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export { myName as name, myAge as age, myfn as fn }

// b.js
import {fn, age, name} from "./test.js";
console.log(fn()); // 我是laowang！今年90岁了
console.log(age);  // 90
console.log(name); // laowang

也可以直接导入整个模块，将上面的接收代码修改为：

import * as info from "./test.js";  //通过*来批量接收，as 来指定接收的名字

console.log(info.fn()); // 我是laowang！今年90岁了
console.log(info.age);  // 90
console.log(info.name); // laowang

2.2 默认导出

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致。

// a.js
export default function(){
    return "默认导出一个方法"
}

// b.js
// 导入时不需要不需要用 {}。
import myFn from "./test.js";
console.log(myFn());//默认导出一个方法

可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

// a.js
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName: "laowang"
}

// b.js
import myObj from "./test.js";
console.log(myObj.myFn(), myObj.myName); // 默认导出一个方法 laowang

同样也支持混合导出

// a.js
export default function(){
    return "默认导出一个方法"
}
export var myName="laowang";

// b.js
import myFn,{myName} from "./test.js";
console.log(myFn(),myName); // 默认导出一个方法 laowang

2.3 导入重命名

如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，在导入名称时也可以使用as重新命名：

// a.js
export let myName = "我来自a.js";

// b.js
export let myName = "我来自b.js";

// c.js
import {myName as name1} from "./a.js";
import {myName as name2} from "./b.js";
console.log(name1); // 我来自a.js
console.log(name2); // 我来自b.js

2.4 直接导入

如果想把整个js或者css文件直接拿过来使用可以则可以直接导入import '文件路径'

另外ES Module还具有的一些特点：

• 每一个模块只加载一次， 并只执行一次，重复加载同一文件，直接从内存中读取；

• 每一个模块内声明的变量都是局部变量， 不会污染全局作用域；

• 通过export导出模块，通过import导入模块

• ES6模块只支持静态导入和导出，只可以在模块的最外层作用域使用import和export

• ES6 模块强制自动采用严格模式，所以说不管有没有“user strict”声明都是一样的，换言之，编写代码的时候不必再刻意声明了

• 虽然大部分主流浏览器支持 ES6 模块，但是和引入普通 JS 的方式略有不同，需要在对应 script 标签中将属性 type 值设置为“module”才能被正确地解析为 ES6 模块

• 在 Node.js 下使用 ES6 模块则需要将文件名后缀改为“.mjs”，用来和 Node.js 默认使用的 CommonJS 规范模块作区分

3. 浏览器支持情况

我们可以去这个网站查询一下浏览器支持情况 推荐网站

我们发现，哪怕是Chrome和Firefox这样的现代浏览器，也是在最近的版本中才对ES Module进行支持，IE直接不支持，肯定有小伙伴会问，那如果要兼容低版本浏览器怎么办呢？有听过大名鼎鼎的babel么？可以通过工具让支持在浏览器端使用。

如果我们使用的是vue-cli脚手架就不用担心浏览器支持的问题了。

4.更多模块化补充

b站视频： 前端模块化发展史

• commonJs规范模块化
• AMD/CMD规范模块化
• ES6模块化