30分钟快速入门掌握ES6/ES2015的核心内容（下）
前言
在30分钟掌握ES6/ES2015核心内容（上）我们讲解了es6最常用的一些语法：let,const,class,extends,super,arrowfunctions,templatestring,destructuring,default,restarguments
俗话说打铁要趁热，今天我们继续讲es6其他几个非常有用的新特性。
importexport
这两个家伙对应的就是es6自己的module功能。
我们之前写的Javascript一直都没有模块化的体系，无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程连接在一起。
这有可能导致两个问题：
- 一方面js代码变得很臃肿，难以维护
- 另一方面我们常常得很注意每个script标签在html中的位置，因为它们通常有依赖关系，顺序错了可能就会出bug
在es6之前为解决上面提到的问题，我们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。
如果想了解更多AMD，尤其是require.js，可以参看这个教程：whymodulesonthewebareusefulandthemechanismsthatcanbeusedonthewebtodaytoenablethem
而现在我们有了es6的module功能，它实现非常简单，可以成为服务器和浏览器通用的模块解决方案。
ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。
上面的设计思想看不懂也没关系，咱先学会怎么用，等以后用多了、熟练了再去研究它背后的设计思想也不迟！好，那我们就上代码...
传统的写法
首先我们回顾下require.js的写法。假设我们有两个js文件:index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？
首先定义：
//content.js
define('content.js',function(){
return'Acat';
})
然后require：
//index.js
require(['./content.js'],function(animal){
console.log(animal);//Acat
})
那CommonJS是怎么写的呢？
//index.js
varanimal=require('./content.js')
//content.js
module.exports='Acat'
ES6的写法
//index.js importanimalfrom'./content' //content.js exportdefault'Acat'
以上我把三者都列出来了，妈妈再也不用担心我写混淆了...
ES6module的其他高级用法
//content.js
exportdefault'Acat'
exportfunctionsay(){
return'Hello!'
}
exportconsttype='dog'
上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类（react的模块基本都是输出类）
//index.js
import{say,type}from'./content'
letsays=say()
console.log(`The${type}says${says}`)//ThedogsaysHello
这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。
如果还希望输入content.js中输出的默认值(default),可以写在大括号外面。
//index.js
importanimal,{say,type}from'./content'
letsays=say()
console.log(`The${type}says${says}to${animal}`)
//ThedogsaysHellotoAcat
修改变量名
此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。
//index.js
importanimal,{say,typeasanimalType}from'./content'
letsays=say()
console.log(`The${animalType}says${says}to${animal}`)
//ThedogsaysHellotoAcat
模块的整体加载
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
//index.js
importanimal,*ascontentfrom'./content'
letsays=content.say()
console.log(`The${content.type}says${says}to${animal}`)
//ThedogsaysHellotoAcat
通常星号*结合as一起使用比较合适。
终极秘籍
考虑下面的场景：上面的content.js一共输出了三个变量（default,say,type）,假如我们的实际项目当中只需要用到type这一个变量，其余两个我们暂时不需要。我们可以只输入一个变量：
import{type}from'./content'
由于其他两个变量没有被使用，我们希望代码打包的时候也忽略它们，抛弃它们，这样在大项目中可以显著减少文件的体积。
ES6帮我们实现了！
不过，目前无论是webpack还是browserify都还不支持这一功能...
如果你现在就想实现这一功能的话，可以尝试使用rollup.js
他们把这个功能叫做Tree-shaking，哈哈哈，意思就是打包前让整个文档树抖一抖，把那些并未被依赖或使用的东西统统抖落下去。。。
看看他们官方的解释吧：
Normallyifyourequireamodule,youimportthewholething.ES2015letsyoujustimportthebitsyouneed,withoutmuckingaroundwithcustombuilds.It'sarevolutioninhowweuselibrariesinJavaScript,andit'shappeningrightnow.
未完待续
希望更全面了解es6伙伴们可以去看阮一峰所著的电子书ECMAScript6入门
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。