ES6新特性之模块Module用法详解_es6module资源-CSDN下载

139 浏览量 2020-12-09 15:00:45 上传评论收藏 78KB PDF 举报

资源推荐

资源详情

资源评论

ES6新特性之模块新特性之模块Module用法详解用法详解

本文实例讲述了ES6新特性之模块Module用法。分享给大家供大家参考，具体如下：

一、一、Module简介简介

ES6的Class只是面向对象编程的语法糖，升级了ES5的构造函数的原型链继承的写法，并没有解决模块化问题。Module功能

就是为了解决这个问题而提出的。

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。

其他语言都有这项功能。

在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6

在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和

服务器通用的模块解决方案。

ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系（这种加载称为“编译时加载”），以及输入和输

出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

浏览器使用ES6模块的语法如下。

<script type="module" src="fs.js"></script>

上面代码在网页中插入一个模块fs.js，由于type属性设为module，所以浏览器知道这是一个ES6模块。

// ES6加载模块

import { stat, exists, readFile } from 'fs';

上面代码通过import去加载一个Module，加载其中的一些方法。

二、二、import 和和 export

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功

能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必

须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

// profile.js

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

export的写法，除了像上面这样，还有另外一种。(推荐这种，因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。)

// profile.js

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export {firstName, lastName, year};

export命令除了输出变量，还可以输出函数或类（class）。通常情况下，export输出的变量就是本来的名字，但是可以使用as

关键字重命名。

function v1() { ... }

function v2() { ... }

export {

v1 as streamV1,

v2 as streamV2,

v2 as streamLatestVersion

};

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。

// main.js

import {firstName, lastName, year} from './profile';

function setName(element) {

element.textContent = firstName + ' ' + lastName;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38689338

粉丝: 9

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip