ES6/ES2015核心内容（下）

import export

　　这两个家伙对应的就是es6本身的module功能。

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

　　这有可能致使两个问题：

　　（1）一方面js代码变得很臃肿，难以维护

　　（2）另外一方面咱们经常得很注意每一个script标签在html中的位置，由于它们一般有依赖关系，顺序错了可能就会出bug

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

　　而如今咱们有了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 实现一键换名。（有点相似sql语句，哈哈）

//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

模块的总体加载

　　除了指定加载某个输出值，还可使用总体加载，即用星号（*）指定一个对象，全部输出值都加载在这个对象上面。一般 星号* 结合 as 一块儿使用比较合适。

//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

终极秘籍

　　考虑下面的场景：上面的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入门