“ 关注 前端开发社区
,回复"1"
便可加入 前端技术交流群
,回复 "2"
便可免费领取 500G前端干货!javascript
上一节主要是总结了ES6中对象扩展的基本知识。本节主要总结ES6中模块的有关内容,具体内容包括如下几个方面:html
模块化是指把一个复杂的系统分解到一个一个的模块,再用必定的方式拼装起来。前端
(1)一个单独的文件就是一个模块,是一个单独的做用域,只向外暴露特定的变量和函数。这样能够避免污染全局变量,减小变量命名冲突。java
(2)代码复用,让咱们更方便地进行代码管理、同时也便于后面代码的修改和维护。web
Js模块化规范有:CommonJS
、AMD
、CMD
、以及本文要总结的ES6的模块系统。浏览器
其中,CommonJS是服务端的模块规范,AMD
和CMD
是浏览器端的模块规范。app
CommonJS加载模块是“运行时加载”:CommonJS的模块就是对象,导入时,实际是总体加载模块的全部方法,生成一个对象,而后再从这个对象读取对应的方法。由于只有运行时才能获得这个对象,致使彻底没办法在编译时作“静态优化”。svg
ES6加载模块是“编译时加载”。ES6模块不是对象,导入时只加载指定的方法,其余方法不加载。这种加载称为“编译时加载”或者静态加载,即 ES6 能够在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高,并使得静态分析成为可能。固然,这也致使了无法引用 ES6 模块自己,由于它不是对象。模块化
关于模块化的更多内容,能够看下以前我总结的一览js模块化:从CommonJS到ES6函数
export
关键字,能够导出变量、函数、类给其余模块。
as
关键字,能够指定变量、函数、类在模块外应该被称为何名称。
// 导出变量--写法1 export let name = "Peter"; // 导出变量--写法2:先定义,再导出 let name = "Peter"; export { name } // 导出变量--写法3:重命名 let name = "Peter"; export { name as PersonName} 这里export时记得加花括号,不加则会报错。 // 导出函数--写法1 export function sum(a, b) { return a + b; } // 导出函数--写法2:先定义、再导出 function sum(a, b) { return a + b; } export { sum }; // 导出函数--写法3:重命名 function sum(a, b) { return a + b; } export { sum as add };
这里export
时记得加花括号,不加则会报错。
// 导出类--写法1 export class Person { constructor(name) { this.name = name; } hello() { console.log('hello' + this.name) } } // 导出类--写法2:先定义、再导出 class Person { constructor(name) { this.name = name; } hello() { console.log('hello' + this.name) } } export { Person } // 导出类--写法3:重命名 class Person { constructor(name) { this.name = name; } hello() { console.log('hello' + this.name) } } export { Person as HelloPerson }
一样的,这里export
时记得加花括号,不加则会报错。
default
关键字,为模块指定默认导出。
// 导出变量--写法4:导出默认值1 let name = "Peter"; export default name; // 导出变量--写法5:导出默认值2 let name = "Peter"; export { name as default }; // 导出函数--写法4:导出默认值1 function sum(a, b) { return a + b; } export default sum; // 导出函数--写法5:导出默认值2 function sum(a, b) { return a + b; } export { sum as default }; // 导出类--写法4:导出默认值1 class Person { constructor(name) { this.name = name; } hello() { console.log('hello' + this.name) } } export default Person // 导出类--写法5:导出默认值2 class Person { constructor(name) { this.name = name; } hello() { console.log('hello' + this.name) } } export { Person as default }
注意:
验证:
// 导出多个default // SyntaxError: duplicate export name 'default' let name = "Peter"; let age = 25; export default name; export default age;
export default
后面不能加声明语句,由于export default
只是输出一个叫作default
的变量export default let name = "Peter"; // 报错
// 导入单个绑定 import { name } from "./export.js"; console.log(name) // Peter // 导入多个绑定 import { name, age } from "./export.js"; console.log(name, age) // Peter 25 // 导入整个模块 import * as test from "./export.js"; console.log(test.name, test.age) // Peter 25 // 导入时重命名 import { name as personName} from "./export.js"; console.log(personName) // Peter
导入默认值时不须要加“{}
”,能够指定任意名字。
// 导出默认值 let name = "Peter"; export default name; // 导入默认值 import lalala from "./export.js"; console.log(lalala) // Peter
也能够同时import
默认值和非默认值:
// 导出默认值、非默认值 let name = "Peter" function sum(a, b) { return a + b; } export default sum; export { name } //import默认值,{非默认值},这种写法要注意默认值和非默认的前后顺序 import sum, { name } from './export.js'; console.log(sum(1, 2)) // 3 console.log(name) // Peter //import写法二:重命名默认值,这种写法不用在乎默认值和非默认值的前后顺序 import { default as add, name } from './export.js'; console.log(add(1, 2)) // 3 console.log(name) // Peter
若是同时import
默认值和非默认值时,用逗号把默认值的本地名称和大括号包裹的非默认值分开,要注意import
时默认值必须在非默认值以前:
import 默认值的本地名称,{非默认值} from ‘xxx.js’;
若是写反则会报错:
import {非默认值},默认值的本地名称 from ‘xxx.js’; // 会报错
验证:
// 报错:SyntaxError: missing keyword 'from' after import clause import {name},sum from './export.js'; console.log(sum(1, 2)) // 3 console.log(name) // Peter
若是在一个模块之中,先导入后导出同一个模块,根据上面的介绍能够这样写:
// 导出默认值、非默认值 let name = "Peter" let age = 25; function sum(a, b) { return a + b; } export { name, age } export default sum;
在下面的模块中先导入后导出:
// 4,先导入后导出模块 import { default as add, name, age } from './export.js'; export { name, age, add }
不过也能够用一条语句完成,上述等价于:
export { default as add, name, age } from './export.js';
导出另外一个模块中的全部值:
// 导出另外一个模块中的全部值 export * from './export.js';
有几点要说明:
即ES6 的模块是自动采用严格模式,无论有没有在模块头部加上"use strict
";
(2)在ES6的模块中,在模块顶层建立的变量只在模块的顶层做用域中存在,不会自动被添加到全局做用域中。
(3)在模块顶层,this
的值是undefined
,即不要在顶层代码使用this
。
(4)模块不支持HTML风格的代码注释。
(5)在<script>
中使用模块,须要将<script>
默认的将js做为脚本加载的行为(type=”text/javascript”)
,改成做为模块加载。方法是将type的属性值设为”moule
”,便可支持按模块加载。
type="module"
不过在使用import
加载模块时,要确保两点:
实例:
export.js文件:
export let name = "Peter";
html文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6模块化</title> </head> <body> <script type="module"> // 导入单个绑定 import { name } from "./export.js"; console.log(name) </script> </body> </html>
export
、import
必须在其余语句、函数外使用。在if语句、函数中使用会报错。这是由于import、export是编译时加载模块,不是运行时加载模块。因此不能使用表达式和变量,这些只有在运行时才能获得结果的语法结构:验证:
// SyntaxError: export declarations may only appear at top level of a module if (true) { export * from './export.js'; }
模块的好处就在于不用把全部东西都放到一个文件中,能够经过模块导出、导入须要的东西。本文主要总结了ES6中模块Module
中的基本语法和使用中须要注意的地方,若有问题,欢迎指正。
请各位帅哥美女多多支持帅编,回复“1”
便可加入前端技术交流群,回复"2"
便可领取 500G 前端干货