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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Javascript 严格模式use strict详解
Sep 16 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vue中nextTick用法实例
Sep 11 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
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
一个php作的文本留言本的例子(一)
2006/10/09 PHP
ArrayList类(增强版)
2007/04/04 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
大学生蛋糕店创业计划书
2014/01/13 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
设备收款委托书范本
2014/10/02 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
Golang日志包的使用
2022/04/20 Golang