ES6 模块化笔记
2018-06-24 01:32:21来源:未知 阅读 ()
ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
// ES6模块 import { stat, exists, readFile } from 'fs';
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
export常用的写法如下:
1 // 写法1 2 export var firstName = 'Michael'; 3 export var lastName = 'Jackson'; 4 export var year = 1958; 5 6 // 写法2 7 var firstName = 'Michael'; 8 var lastName = 'Jackson'; 9 var year = 1958; 10 11 export {firstName, lastName, year}; 12 13 // 写法3 14 15 var firstName = 'Michael'; 16 var lastName = 'Jackson'; 17 var year = 1958; 18 19 export { 20 firstName as variable1, 21 lastName as variable2, 22 year as variable3 23 }; 24 25 // 方法1 26 export function multiply(x, y) { 27 return x * y; 28 }; 29 30 // 方法2 31 function v1() { ... } 32 function v2() { ... } 33 34 export { v1,v2 }; 35 36 // 方法3 37 function v1() { ... } 38 function v2() { ... } 39 export { 40 v1 as streamV1, 41 v2 as streamV2, 42 v2 as streamLatestVersion 43 };
import命令具有 [ 提升效果 ] ,会提升到整个模块的头部,首先执行。
import是静态执行,所以不能使用表达式和变量。
1 import { lastName as surname } from './profile'; 2 foo(); 3 // import命令是编译阶段执行的,在代码运行之前,所以foo已经被赋值 4 import { foo } from 'my_module';
import语句会执行所加载的模块,因此可以有下面的写法。
import 'lodash';
模块的整体加载,即用星号(*
)指定一个对象,所有输出值都加载在这个对象上面。
【注意】,模块整体加载所在的那个对象(上例是circle),应该是可以静态分析的,所以不允许运行时改变。下面的写法都是不允许的。
1 // circle.js 2 3 export function area(radius) { 4 return Math.PI * radius * radius; 5 } 6 7 export function circumference(radius) { 8 return 2 * Math.PI * radius; 9 } 10 11 // main.js 12 13 import { area, circumference } from './circle'; 14 15 console.log('圆面积:' + area(4)); 16 console.log('圆周长:' + circumference(14)); 17 18 // 第二种写法 19 import * as circle from './circle'; 20 21 console.log('圆面积:' + circle.area(4)); 22 console.log('圆周长:' + circle.circumference(14));
export default命令,为模块指定默认输出。
1 // export-default.js 2 export default function () { 3 console.log('foo'); 4 } 5 6 // import-default.js 7 import customName from './export-default'; 8 customName(); // 'foo'
本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。
1 // modules.js 2 function add(x, y) { 3 return x * y; 4 } 5 export {add as default}; 6 // 等同于 7 // export default add; 8 9 // app.js 10 import { default as xxx } from 'modules'; 11 // 等同于 12 // import xxx from 'modules';
正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
1 // 正确 2 export var a = 1; 3 4 // 正确 5 var a = 1; 6 export default a; 7 8 // 错误 9 export default var a = 1;
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Jquery插件写法笔记整理 2020-03-29
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- manifest.json 解析--手机web app开发笔记(三-2) 2019-08-14
- es6学习笔记(二) 2019-08-14
- 前端笔记之微信小程序(四)WebSocket&Socket.io&am 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash