ES6学习笔记之模块

Airmusic 发布于2019-08-19 18:38 / 2517人阅读

摘要：但是一直没有在语言层面支持模块，直到的出现。相信在不久的将来，的模块一定会全面取代和。的模块提供了个新的语法，分别是和。就是模块用来对外暴露数据的接口，具体用法如下。

本文同步自我得博客：http://www.joeray61.com

简介

在当今的Javascript程序中，模块的作用不言而喻，目前广泛应用的主要有AMD（浏览器端）和CommonJS（服务器端）。但是Javascript一直没有在语言层面支持模块，直到ES6的出现。相信在不久的将来，ES6的模块一定会全面取代AMD和CommonJS。

export

ES6的模块提供了2个新的语法，分别是export和import。export就是模块用来对外暴露数据的接口，具体用法如下。

export let a = 1;
export class A {};
export let b = () => {};

输出多个数据时不必分别export，可以用一个export统一输出

let a = 1;
class A {};
let b = () => {};
export {a, A, b};

import

与export对应，import就是ES6的模块用来引入数据的命令。

我们先来建立一个数据数据的文件a.js:

// a.js
let a = 1;
export {a};

然后再创建一个b.js用来导入a.js暴露的数据

// b.js
import {a} from "./a";
console.log(a);    // 1

如果要导入的模块暴露了很多变量，而你又不想一个一个地去写要import的数据时，可以使用*

// b.js
import * as obj from "./a";
console.log(obj.a);    // 1

需要注意的是，import使用的变量名必须跟export使用的变量名一致

rename

import和export的时候都是可以对变量进行重命名的

// a.js，用于export变量a，但是导出时将a改名为aa
let a = 1;
export {a as aa};

// b.js用于import从a.js导出的数据aa，但是在导入时将aa改名为b
import {aa as b} from "./a";
console.log(a);   // undefined
console.log(aa);  // undefined
console.log(b);   // 1

default

export时可以指定要默认导出的数据

// a.js
let a = 1;
let aa = 2;
export default a;
export {aa};
// 也可以写成
export {a as default, aa};

导入默认数据时需要这样写：

// b.js
import x from "./a";
console.log(x);  // 1

细心的同学可能发现了，这里import的时候使用的变量名是x，这就是default的特权了，导入时使用的变量名可以随便取，不需要跟导出时的变量名一致。

另外，如果同时要导入default和其他数据时该怎么写呢？

// b.js
import x, {aa} from "./a";
console.log(x);    // 1
console.log(aa);   // 2

ES6模块加载实质

CommonJS加载模块时，加载的是值的副本，而ES6的模块加载，加载的是值的引用。还是直接上代码吧

// lib.js
export let x = 1;
export let changeX = () => {
    x++;
};

// a.js
import {x, changeX} from "./lib";
changeX();
console.log(x);

// b.js
import {x, changeX} from "./lib";
changeX();
console.log(x);

// index.js
import "./a";
import "./b";

执行index.js输出的值是2和3，这就说明a.js和b.js执行的时候改变的都是lib.js里的x，而不是各自操作了一份副本

注意点

ES6的模块采用严格模式，无论你是否申明use strict;

import具有提升效果，即使写在文件的后面，也会被提到头部首先执行

本文为学习过程中整理，如有问题欢迎交流~

idc机房托管专线服务学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79803.html

2017-07-07 前端日报

摘要：前端日报精选了解中的全局对象和全局作用域张鑫旭鑫空间鑫生活子进程你应该知道的一切直出内存泄露问题的追查实践我他喵的到底要怎样才能在生产环境中用上模块化腾讯前端大会大咖说大咖干货，不再错过发布发布中文翻译在使用进行本地开发代码 2017-07-07 前端日报精选了解JS中的全局对象window.self和全局作用域self « 张鑫旭-鑫空间-鑫生活Node.js 子进程：你应该知道...

import. 2019-08-20 17:48 评论0 收藏0
angularV4+学习笔记

摘要：注解的元数据选择器页面渲染时，组件匹配的选择器使用方式采用标签的方式。当然必要的，在需要用到的的模块中引入引入的指令，放在声明里面引入的模块引导应用的根组件关于的元数据还未完全，所以后面会继续完善。 angular学习笔记之组件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1组件注解 @Component注解，对组件进行配置。 1....

galaxy_robot 2019-08-22 18:40 评论0 收藏0
angularV4+学习笔记

摘要：注解的元数据选择器页面渲染时，组件匹配的选择器使用方式采用标签的方式。当然必要的，在需要用到的的模块中引入引入的指令，放在声明里面引入的模块引导应用的根组件关于的元数据还未完全，所以后面会继续完善。 angular学习笔记之组件篇 showImg(https://i.imgur.com/NQG0KG1.png); 1注解 1.1组件注解 @Component注解，对组件进行配置。 1....

LoftySoul 2019-08-02 10:53 评论0 收藏0
正则表达式

摘要：最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。学习目标了解正则表达式语法在中使用正则表达式在中使 JS高级技巧本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测...

yibinnn 2019-08-21 17:57 评论0 收藏0
es6学习笔记-顶层对象_v1.0_byKL

摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

Meils 2019-08-21 11:31 评论0 收藏0