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? 生成器函数类似其他服务器端语音中的接口 ...
随机推荐
- requests发送post请求的一些疑点
前言 在Python爬虫中,使用requests发送请求,访问指定网站,是常见的做法.一般是发送GET请求或者POST请求,对于GET请求没有什么好说的,而发送POST请求,有很多朋友不是很清楚,主要 ...
- 如何开始使用 Java 机器学习
开始Java机器学习的最好工具是什么? 这个问题已经有一段时间了,但最近这些日子几乎每个人都在谈论人工智能和机器学习.这已经不再是一个保留给科学家和研究者的秘密,而是几乎实现于每一项新兴技术中. 在下 ...
- 你不知道的JavaScript--Item23 定时器的合理使用
1.定时器概述 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间后运行:而后者则可 ...
- springMVC简单的一些操作
SpringMVC的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器进行处理,由DispatcherServlet来统一 ...
- VMWare Workstation虚拟机 安装Centos7 图文指南
本篇博文将讲述如何一步一步在VMWare Workstation 中安装Centos 7 1. 准备工作 VMWare Workstation Centos7 镜像 VMWare Workstatio ...
- 问题(一) DebugAugmenter
问题: DebugAugmenter的作用是什么?是任何一个自创建的变量都可以取代它还是它有特定含义? public class DebugAugmenter Test { @Test public ...
- ranker.go
package { start = utils.MinInt(options.OutputOffset, len(outputDocs)) end = ...
- BZOJ_1260_[CQOI2007]涂色paint _区间DP
BZOJ_1260_[CQOI2007]涂色paint _区间DP 题意: 假设你有一条长度为5的木版,初始时没有涂过任何颜色.你希望把它的5个单位长度分别涂上红.绿.蓝.绿.红色,用一个长度为5的字 ...
- tday02 上节课复习
什么是编程语言 人与计算机交流的介质 编程是什么东西 写出一个一个文件,然后一个文件的集合就是一个程序 为什么要编程 在计算机上写一个程序实现某种功能,取代劳动力 计算机的五大组成 我们人类最重要的组 ...
- sau交流学习社区--在element-ui中新建FormData对象组合上传图片和文件的文件对象,同时需要携带其他参数
今天有一个坑,同时要上传图片和文件,而且图片要展示缩略图,文件要展示列表. 我的思路是: 首先,只上传附件照片,这个直接看ele的官方例子就行,不仅仅上传附件照片,还同时上传其他参数. 然后,再做上传 ...