es6 模块的整体加载

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实现一键换名。

//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一起使用比较合适。

转载于:https://www.cnblogs.com/szatpig/p/6392616.html