ES6語法—— 模塊化開發之import和export命令詳解

export:

1.導出定義的變量
2.直接在export定義導出的函數或變量
3.導出函數或變量重命名（as）
4.export default(不須要變量名稱)js文件只有一個功能
5.export {fn as default}
6.export * from ..

import

1.import add from math
2.import * from math
3.import * as else
(不要修改裏面的值，當作只讀來用)

1.export
export命名式導出有三種方式
第一種
// 注意我這裏定義變量都用了let，建議用const定義，只要知道const的性能更優就能夠了

export let json = {'name': 'dkr'}
export let str = '字符串'
export function multiply (x, y) {
  return x * y
}
  上面的寫法等同於（第二種）

第二種

let json = {'name': 'dkr'}
let str = '字符串'
function multiply (x, y) {
  return x * y
}
export {json, str, multiply}

第三種

你能夠用as關鍵字重命名想要輸出的變量，函數或者類名，當你這麼作的時候，注意要用as重命名的值去接收

export {json as newJson, str as newStr, multiply as newMultiply}

一般狀況下這個功能並無什麼軟用，固然你能夠拿他來輸出同一個值的多種命名規則，以下

export {json as myJson, json as youJson, json as newJson}

2.import 命令

1. 咱們能夠經過下面的方式，引入剛纔模塊中的一些函數和變量

import {json, str, multiply, number} from './export.js'

導入變量和函數後，就可使用這些數據了，在使用的過程當中要注意一個點，雖然import導入的東西並非徹底「只讀」的，但請儘可能不要去改變裏面的值，就看成「只讀」來用。

2.import {json, str, multiply, number} from ‘./export.js’
json.name = ‘hello’ // 對象的值可改,但不推薦修改import導入的數據
console.log(json)
console.log(str)
// str = ‘改寫字符串’ //報錯,非對象引入不能改寫,屬於只讀
console.log(multiply(2, 3))
上述代碼說明了，對象內部的值能夠修改，但對string類型的值修改會直接報錯，總之，儘可能不要去修改外部模塊的值，「只讀」便可。
3. import也支持引入的時候對變量名進行修改和使用，注意是變量名，不是修改變量，以下所示
import {json as myJson} from ‘./export.js’
console.log(myJson)
關於import的使用，有個小tips，import模塊導入擁有提高效果，這有點相似於var的變量提高效果，你能夠先使用，後定義，固然不推薦這樣使用。

console.log(myJson) //這樣寫並不會報錯
import {json as myJson} from ‘./export.js’
3.模塊的總體加載
除了指定加載某個輸出值，還可使用總體加載，即用星號（*）指定一個對象，全部輸出值都加載在自定義的對象上面。你須要經過自定義的對象去訪問裏面的變量或函數。

import * as Math from ‘./export.js’
console.log(Math.json)
4.export defaul命令
4.export defaul命令
從前面的例子能夠看出，使用import命令的時候，你須要知道所要加載的變量名或函數名，這對於傳統的"上手就能用"的開發帶來了不少困擾。爲了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，能夠用export default命令，爲模塊指定默認輸出。先來看一下demo

export default function (…msg) {
msg.forEach((item) => {
console.log(item)
})
}
上面的代碼等同於

function hello (…msg) {
msg.forEach((item) => {
console.log(item)
})
}
export default hello
上面的模塊輸出一個函數,用於打印信息.你能夠在import導入的時候爲該函數指定任意名字,無論這個函數導出的時候是匿名函數仍是非匿名函數,在模塊外部是無效的。加載的時候，視同匿名函數加載。

import print from ‘./exportDefault.js’
print(‘hello’, ‘world’)
上面代碼的import命令，能夠用任意名稱指向exportDefault.js輸出的方法，這時就不須要知道原模塊輸出的函數名。須要注意的是，這時import命令後面，不使用大括號。

本質上，export default就是輸出一個叫作default的變量或方法，而後系統容許你爲它取任意名字。