30分钟快速入门掌握ES6/ES2015的核心内容(下)


Posted in Javascript onApril 18, 2018

前言

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

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

import export

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

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

这有可能导致两个问题:

  • 一方面js代码变得很臃肿,难以维护
  • 另一方面我们常常得很注意每个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入门

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
微信小程序签到功能
Oct 31 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
一个基于react的图片裁剪组件示例
Apr 18 #Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 #Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 #Javascript
JS实现的base64加密解密操作示例
Apr 18 #Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 #Javascript
You might like
elgg 获取文件图标地址的方法
2010/03/20 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php常用的url处理函数总结
2014/11/19 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
javascript实现微信分享
2014/12/23 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
python中ConfigParse模块的用法
2014/09/29 Python
python实现查询IP地址所在地
2015/03/29 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python3中exp()函数用法分析
2019/02/19 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
C语言笔试题
2014/09/04 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
就业协议书怎么填
2014/04/11 职场文书
村党支部公开承诺书
2014/05/29 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
导游词幽默开场白
2019/06/26 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang