ES6 模块化笔记
ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。
// ES6模块
import { stat, exists, readFile } from 'fs';
需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
export常用的写法如下:
// 写法1
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958; // 写法2
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958; export {firstName, lastName, year}; // 写法3 var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958; export {
firstName as variable1,
lastName as variable2,
year as variable3
}; // 方法1
export function multiply(x, y) {
return x * y;
}; // 方法2
function v1() { ... }
function v2() { ... } export { v1,v2 }; // 方法3
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
import命令具有 [ 提升效果 ] ,会提升到整个模块的头部,首先执行。
import是静态执行,所以不能使用表达式和变量。
import { lastName as surname } from './profile';
foo();
// import命令是编译阶段执行的,在代码运行之前,所以foo已经被赋值
import { foo } from 'my_module';
import语句会执行所加载的模块,因此可以有下面的写法。
import 'lodash';
模块的整体加载,即用星号(*
)指定一个对象,所有输出值都加载在这个对象上面。
【注意】,模块整体加载所在的那个对象(上例是circle),应该是可以静态分析的,所以不允许运行时改变。下面的写法都是不允许的。
// circle.js export function area(radius) {
return Math.PI * radius * radius;
} export function circumference(radius) {
return 2 * Math.PI * radius;
} // main.js import { area, circumference } from './circle'; console.log('圆面积:' + area(4));
console.log('圆周长:' + circumference(14)); // 第二种写法
import * as circle from './circle'; console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));
export default命令,为模块指定默认输出。
// export-default.js
export default function () {
console.log('foo');
} // import-default.js
import customName from './export-default';
customName(); // 'foo'
本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。
// modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同于
// export default add; // app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';
正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。
// 正确
export var a = 1; // 正确
var a = 1;
export default a; // 错误
export default var a = 1;
ES6 模块化笔记的更多相关文章
- 前端学习(三十五)模块化es6(笔记)
RequireJs:一.安装.下载 官网: requirejs.org Npm: npm i requirejs二.使用 以前的开发方式的问题: 1).js 是阻塞加 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
- ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
随机推荐
- 沉默的螺旋--digest
孤立的恐惧对名望的追求高度的和谐和共识是大部分人的幸福感.安全感的源头公开性能让某种行为具有社会可接受性 P5谈论和沉默决定了意见气候那些被新的东方政策说服的人,感觉自己所想的都是合理的.因此他们就会 ...
- tkinter中frame布局控件(九)
frame控件 frame控件是将窗口分成好几个小模块,然后每个小模块中添加控件. 也就是将窗口合理的布局 由于和其他控件的操作基本一致,就不做注释了 import tkinter wuya = tk ...
- java 匿名对象,内部类,修饰符,代码块
匿名对象是在建对象时只有创建对象的语句方法而没有把对象的地址赋值给变量,匿名对象只能调用一次方法,想再调用时需要再创建一个新的匿名对象 创建普通对象:Person p =new Person(); 创 ...
- 树莓派.Raspberry Pi 3碰到"Unable to determine hardware version. I see: Hardware : BCM2835"错误的解决过程
按pi4jp官方的安装指导(http://pi4j.com/install.html)进行安装 curl -s get.pi4j.com | sudo bash 安装完成后执行JAVA程序, 发现如下 ...
- Java 中的纤程库 – Quasar
来源:鸟窝, colobu.com/2016/07/14/Java-Fiber-Quasar/ 如有好文章投稿,请点击 → 这里了解详情 最近遇到的一个问题大概是微服务架构中经常会遇到的一个问题: 服 ...
- 渐进式Web应用(PWA)入门教程(下)
上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍. 渐进式Web应用(PWA)入门教程(上) 在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的. 第一步:使用HTTPS 渐进式W ...
- bzoj4035 [HAOI2015]数组游戏
这题显然把每个白格子看成一个子游戏 一个白格子$x$的$sg$值是$mex{[0,sg[2x],sg[2x] XOR sg[3x].....]}$ 打表发现一个数的$sg$值只和$n/x$有关,然后分 ...
- [Poi2014]FarmCraft 树状dp
对于每个点,处理出走完其子树所需要的时间和其子树完全下载完软件的时间 易证,对于每个点的所有子节点,一定优先选择差值大的来给后面的时间 树规+贪心. #include<cstdio> #i ...
- BZOJ_3573_[Hnoi2014]米特运输_树形DP+hash
BZOJ_3573_[Hnoi2014]米特运输_树形DP+hash 题意: 给你一棵树每个点有一个权值,要求修改最少的权值,使得每个节点的权值等于其儿子的权值和且儿子的权值都相等. 分析: 首先我们 ...
- BZOJ_3747_[POI2015]Kinoman_线段树
BZOJ_3747_[POI2015]Kinoman_线段树 Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放 ...