30分钟掌握ES6/ES2015核心内容（下）

逃离我推掉我的手 2023-08-17 17:38 118阅读 0赞

在 [30分钟掌握ES6/ES2015核心内容（上）][30_ES6_ES2015]我们讲解了es6最常用的一些语法：`let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments`

俗话说打铁要趁热，今天我们继续讲es6其他几个非常有用的新特性。

## import export ##

这两个家伙对应的就是es6自己的`module`功能。

我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题：

1.  一方面js代码变得很臃肿，难以维护
2.  另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug

在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。

如果想了解更多AMD，尤其是require.js，可以参看这个教程：[why modules on the web are useful and the mechanisms that can be used on the web today to enable them][]

而现在我们有了es6的module功能，它实现非常简单，可以成为服务器和浏览器通用的模块解决方案。

> ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

上面的设计思想看不懂也没关系，咱先学会怎么用，等以后用多了、熟练了再去研究它背后的设计思想也不迟！好，那我们就上代码...

### 传统的写法 ###

首先我们回顾下require.js的写法。假设我们有两个js文件: `index.js`和`content.js`,现在我们想要在`index.js`中使用`content.js`返回的结果，我们要怎么做呢？

首先定义：

//content.js define('content.js', function(){ return 'A cat'; })

然后require：

//index.js require(['./content.js'], function(animal){ console.log(animal); //A cat })

那CommonJS是怎么写的呢？

//index.js var animal = require('./content.js') //content.js module.exports = 'A cat'

### ES6的写法 ###

//index.js import animal from './content' //content.js export default 'A cat'

以上我把三者都列出来了，妈妈再也不用担心我写混淆了...

## ES6 module的其他高级用法 ##

//content.js export default 'A cat' export function say(){ return 'Hello!' } export const type = 'dog'

上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）

//index.js import { say, type } from './content' let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello

这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

//index.js import animal, { say, type } from './content' let says = say() console.log(`The ${type} says ${says} to ${animal}`) //The dog says Hello to A cat

#### 修改变量名 ####

此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用`as`实现一键换名。

//index.js import animal, { say, type as animalType } from './content' let says = say() console.log(`The ${animalType} says ${says} to ${animal}`) //The dog says Hello to A cat

#### 模块的整体加载 ####

除了指定加载某个输出值，还可以使用整体加载，即用星号（`*`）指定一个对象，所有输出值都加载在这个对象上面。

//index.js import animal, * as content from './content' let says = content.say() console.log(`The ${content.type} says ${says} to ${animal}`) //The dog says Hello to A cat

通常星号`*`结合`as`一起使用比较合适。

## 终极秘籍 ##

考虑下面的场景：上面的`content.js`一共输出了三个变量（`default, say, type`）,假如我们的实际项目当中只需要用到`type`这一个变量，其余两个我们暂时不需要。我们可以只输入一个变量：

import { type } from './content'

由于其他两个变量没有被使用，我们希望代码打包的时候也忽略它们，抛弃它们，这样在大项目中可以显著减少文件的体积。

ES6帮我们实现了！

不过，目前无论是webpack还是browserify都还不支持这一功能...

如果你现在就想实现这一功能的话，可以尝试使用[rollup.js][]

他们把这个功能叫做Tree-shaking，哈哈哈，意思就是打包前让整个文档树抖一抖，把那些并未被依赖或使用的东西统统抖落下去。。。

看看他们官方的解释吧：

> Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

未完待续

希望更全面了解es6伙伴们可以去看阮一峰所著的电子书[ECMAScript 6入门][ECMAScript 6]

转载于:https://www.cnblogs.com/ysx215/p/11390385.html

[30_ES6_ES2015]: http://segmentfault.com/a/1190000004365693
[why modules on the web are useful and the mechanisms that can be used on the web today to enable them]: http://requirejs.org/docs/why.html
[rollup.js]: http://rollupjs.org/
[ECMAScript 6]: http://es6.ruanyifeng.com/