30分钟掌握ES6/ES2015核心内容(下)

115

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.jscontent.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入门


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

23 条评论
大青山Z · 2016年11月09日

这里的 export default 'A cat' 有什么意义?

+2 回复

0

default后是默认在引用该文件时返回的对象,这里是个字符串,个人是这样理解的:)

marinajane00 · 2017年10月12日
0

定义并默认导出: ‘A cat ’ 可以是对象 string等

GUAPO · 2017年12月01日
array_huang · 2016年06月01日

虽然不知道之后会怎么样,但是现在这ES6的module功能都还是依赖于webpack之类的构建工具,感觉意义不是很大嘛,我看babel也是直接把import转成require的

+1 回复

小无路 · 2016年01月28日

模块化是亮点。。

回复

jsync · 2016年01月30日

666

回复

think2011 · 2016年02月03日

777

回复

王刚 · 2016年02月14日

888

回复

AndyLee33 · 2016年04月28日

感谢分享

回复

这次可以有 · 2017年01月11日

写的很棒,通俗易懂

回复

hellow3c · 2017年01月11日

看过之前那篇文章,最近涉及js模块化。现在对本文的index.js文件import animal from './content'后//content.js文件 export default 'A cat'在webstorm run index时报Unexpected token import 错误 之后用浏览器,也是Unexpected token import。怎么破。

回复

0

我也遇到这个问题,现在解决了吗??

我的唯一 · 2017年05月26日
0

要先编译过,不直接支持modelu的export和import

ayfickle · 2017年08月23日
EugeneOne · 2017年01月19日

感谢分享,大赞

回复

Yfling · 2017年03月20日

通俗易懂!

回复

ITguai · 2017年04月17日

回复

diguanianzhu · 2017年06月15日

define('content.js', function(){

return 'A cat';
})

楼主,require定义模块时,这个地方应该是这样:
define( function(){

return 'A cat';

})

回复

Pinocchio · 2017年08月15日

前端初学者,给博主点个赞

回复

小皇帝James · 2017年08月17日

首先定义://content.js
define(function(){

return 'A cat';

})
应该是这样写的吧 楼主可以再看看

回复

平头_也疯狂 · 2017年09月28日

楼主还继续更新嘛,写的非常棒?

回复

Vinci · 2017年10月25日

Tree-shaking 打包前抖一抖 把没用的都抖下去 太形象了

回复

SkyHsu · 2017年11月02日

最近项目要用。来不及详细学ES6,看了下上下两篇文章。很精炼。

回复

chiuan · 5月31日

非常感谢. 表示正1个小时快速上手中

回复

载入中...