模块化一、模块化的思想模块化就是把逻辑代码拆分成独立的块，各自封装，互相独立，每个块自行决定对外暴露什么，同时自行决定

一、模块化的思想

模块化就是把逻辑代码拆分成独立的块，各自封装，互相独立，每个块自行决定对外暴露什么，同时自行决定引入执行哪些外部代码。

ES6模块

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。不再需要UMD模块格式了，将来服务器和浏览器都会支持 ES6 模块格式。
es6模块的语法分为两部分：export 模块导出、 import模块导入

1、export 语法

// profile.js 
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };

上面的例子导出一个对象，包含firstName, lastName, year三个属性。

注意： `export`语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

2、import语法

// main.js 
import { firstName, lastName, year } from './profile.js';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

3、export default 语法

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

// profile.js 
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export default { firstName, lastName, year };
// main.js 
import total from './profile.js';
function setName(element) {
  element.textContent = total.firstName + ' ' + total.lastName;
}

注意：export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。

模块化