为何使用模块化
历史上，JavaScript 一直没有模块（module）体系，没法将一个大程序拆分红互相依赖的小文件，再用简单的方法拼装起来。其余语言都有这项功能，好比 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，可是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目造成了巨大障碍。javascript
<script src="area.js"></script> <script src="len.js"></script> <script src="people.js"></script>
上面是最原始的 JavaScript 文件加载方式，若是把每个文件看作是一个模块，那么他们的接口一般是暴露在全局做用域下，也就是定义在 window 对象中，不一样模块的接口调用都是一个做用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口。html
这种原始的加载方式暴露了一些显而易见的弊端:
一、全局做用域下容易形成变量冲突。
二、文件只能按照javaScripe的书写顺序进行加载。
三、开发人员必须主观解决模块和代码库的依赖关系。
四、在大型项目中各类资源难以管理，长期积累的问题致使代码库混乱不堪。
java
在 ES6 以前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。编程
在 ES6 以后，ES6 在语言标准的层面上，实现了模块功能，并且实现得至关简单，彻底能够取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。浏览器
ES6模块化实现
模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口 import命令用于输入其余模块提供的功能。服务器
export 命令
export let firstName = '牛哄哄的柯南'; export let lastName = 'Keafmd'; export let year = 1958;
上面代码中，使用export命令对外部输出了三个模块。app
let firstName = '牛哄哄的柯南'; let lastName = 'Keafmd'; let year = 1958; export { firstName as f, //可使用as关键字，重命名对外接口 lastName, year };
上面代码是export命令的另一种写法。 在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法（直接放置在let语句前）是等价的，可是应该优先考虑使用这种写法。由于这样就能够在脚本尾部，一眼看清楚输出了哪些变量。框架
export function multiply(x, y) { return x * y; }; export class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return this.x + ',' + this.y; } };
export命令除了输出变量，还能够输出函数、类（class）。模块化
import命令
一、使用export命令定义模块对外接口后，其余 JS 文件就能够经过import命令加载这个模块。函数
import { name, age, sex } from './module1.js‘ console.log(name + '\t' + age + '\t' + sex);
上面代码的import命令，用于加载module1.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其余模块导入的变量名。大括号里面的变量名，必须与被导入模块（ module1.js）对外接口的名称相同。
二、import命令可使用as关键字，将输入的变量重命名。
import { lastName as surname } from './profile.js';
三、import命令具备提高效果，会提高到整个模块的头部，首先执行。
foo(); import { foo } from ‘./my_module.js';
上面的代码不会报错，由于import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行以前。
四、import是静态执行，因此不能使用表达式和变量，这些只有在运行时才能获得结果的语法结构。
// 报错 import { 'f' + 'oo' } from ‘./my_module.js'; // 报错 let module = ‘./my_module.js'; import { foo } from module; // 报错 if (x === 1) { import { foo } from './module1.js'; } else { import { foo } from './module2.js'; }
五、若是屡次重复执行同一句import语句，那么只会执行一次，而不会执行屡次。
import './lodash.js'; import './lodash.js';
上面代码加载了两次lodash，可是只会执行一次。
六、import语句是 Singleton 模式。
import { foo } from './my_module.js'; import { bar } from './my_module.js'; // 等同于 import { foo, bar } from './my_module.js';
上面代码中，虽然foo和bar在两个语句中加载，可是它们对应的是同一个my_module实例。也就是说，import语句是 Singleton 模式。
完整实例
profile.js文件：
export var firstName = '牛哄哄的柯南'; export var lastName = 'Keafmd'; export var year = 1958; export function jia(x, y) { return x + y; } export function jian(x, y) { return x - y; } export class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return this.x + '\t' + this.y; } }
app.js文件：
import { firstName,lastName,year,jia,jian,Point} from './profile.js' console.log(firstName + '\t' + lastName + '\t' + year); console.log(jia(1,2)); console.log(jian(1,2)); let obj = new Point(1,2) console.log(obj.toString());
注意： from ‘./profile.js’ 即便是在同一个文件夹中，也必需要写 ./
index.html文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/app.js" type="module"></script> </head> <body> </body> </html>
效果截图：
export default 命令
使用import命令的时候，用户须要知道所要加载的变量名或函数名，不然没法加载。可是，用户确定但愿快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。
// export-default.js export default function () { console.log('foo'); }
上面代码是一个模块文件export-default.js，它的默认输出是一个函数。
// import-default.js import customName from './export-default.js'; customName(); // 'foo'
上面代码的import命令，能够用任意名称指向export-default.js输出的方法，这时就不须要知道原模块输出的函数名。
注意：
一、一个js文件中，不能有两个export default命令。
二、import命令后面，不使用大括号。由于只能写一个模块名。
export default命令用在非匿名函数前，也是能够的：
// export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo;
上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
看完若是对你有帮助，感谢点赞支持！
若是你是电脑端的话，看到右下角的 “一键三连” 了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd