Vue export & export default & import 總結
by:授客 QQ：1033553122
1. 實踐環境
Vue 2.9.6
2. 簡介
在ES6中，export與export default均可用于匯出變數(含常量)、函式、類、檔案、模塊等，然后在其它檔案或模塊中通過import 變數(含常量)|函式|類|檔案|模塊名的方式，將其匯入，以便能夠對其進行使用，
3. export & import
一個模塊就是一個獨立的檔案，該檔案內部的內容，外部無法獲取，如果希望外部能夠讀取模塊內部的內容，比如某個變數，就必須使用export關鍵字匯出該變數，然后在其它模塊中通過import方式匯入使用，
假設module1.js和module2.js在同一個目錄下，
匯出\匯入變數
// module1.js
export var author = "shouke"
export var addr = "sz"
// 等價寫法
var author = "shouke"
var addr = "sz"
export { author, addr }
// module2.js
// 匯入變數
import { author, addr } from "./module1"
// 也可以分開寫
import { author } from "./module1"
import { addr } from "./module1"
// 參考變數
let temp = "addr of " + author + " is " + addr
console.log(author) // 輸出 "shouke"
console.log(addr) // 輸出 "sz"
console.log(temp) // "輸出 addr of shouke is sz"
--------------------------------------------------------
// module1.js
var addr = "sz"
// 按別名匯出
export { addr as address}
// module2.js
// 匯入變數
import { address } from "./module1"
--------------------------------------------------------
// module1.js
var addr = "sz"
export { addr }
// module2.js
//使用as關鍵字給匯入的變數重新取一個名字
import { addr as address } from "./module1"
console.log（ myaddr)
注意：
1) 上面代碼在export命令后面，使用大括號指定所要匯出的一組變數、函式，它與前一種寫法（直接放置在var陳述句前）是等價的，但是應該優先考慮使用這種寫法，因為這樣就可以在腳本尾部，一眼看清楚匯出了哪些變數，
2) import命令接受一對大括號，里面指定要從其他模塊匯入的變數名，大括號里面的變數名，必須與被匯入模塊（例中為module1.js）中匯出的變數名稱相同，
3) import后面的from指定模塊檔案的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略，如果只是模塊名，不帶有路徑，那么必須有組態檔，告訴 JavaScript 引擎該模塊的位置，
常見的 import xxx from "@/someDir/someModule"，這里 @ 默認代表 src目錄，之所以這樣，是因為在build/webpack.base.conf.js檔案中做了對應配置，如下
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
4) import命令具有提升效果，會提升到整個模塊的頭部，在編譯階段，在代碼運行之前執行的
5) 如果多次重復執行同一句import陳述句，那么只會執行一次，而不會執行多次，
6) import命令匯入的變數都是只讀的，不能對它進行修改，
import { addr } from "./module1"
addr = "other" // 報錯 "addr" is read-only，import 命令匯入的變數都是只讀的，不能對它進行修改
當如，如果匯入的是一個物件，則可以更改物件的屬性
import {object} from './xxx.js'
object.atrr = 'hello'; // 合法操作
上面代碼中，object的屬性可以成功改寫，并且其他模塊也可以讀到改寫后的值，不過，這種寫法很難查錯，建議凡是輸入的變數，都當作完全只讀，輕易不要改變它的屬性，
7) export命令可以出現在模塊的任何位置，只要處于模塊頂層就可以
匯出\匯入函式
// module1.js
export function myfunc() {
console.log("run myfunc");
}
// 等價寫法
function myfunc() {
console.log("run myfunc");
}
export { myfunc }
// module2.js
// 匯入函式
import { myfunc } from "./module1"
// 呼叫函式
myfunc()
--------------------------------------------------------
// 按別名匯出
// module1.js
function myfunc() {
console.log("run myfunc");
}
export { myfunc as func}
// module2.js
// 匯入函式
import { func } from "./module1"
// 呼叫函式
func()
--------------------------------------------------------
// module1.js
export function myfunc() {
console.log("run myfunc")
}
// module2.j
//使用as關鍵字給匯入的函式重新取一個名字
import { myfunc as func } from "./export"
func()
整體匯入
import使用星號（*）指定一個物件，所有輸出值都加載在這個物件上面，
// module1.js
function myfunc1() {
console.log("run myfunc1")
}
function myfunc2() {
console.log("run myfunc2")
}
export { myfunc1, myfunc2}
// module2.js
// 整體匯入
import * as myfunc from "./module1"
// 函式呼叫
myfunc.myfunc1()
myfunc.myfunc2()
4. export default && import
從前面的例子可以看出，使用import命令的時候，用戶需要知道所要加載的變數名或函式名，否則無法加載，
為了給用戶提供方便，讓他們不用閱讀檔案就能加載模塊，就要用到export default命令，為模塊指定默認輸出，
// module1.js
export default function () {
console.log("run myfunc")
}
// module2.js
// import customName from "./export"
// customName()
import func from "./export"
func()
// export defualt 也可以用于非匿名函式
// module1.js
export default function myfunc() {
console.log("run myfunc")
}
// 或者
function myfunc() {
console.log("run myfunc")
}
export default myfunc
-----------------------------------------
//export default和export同時使用
// module1.js
export function func() {
console.log("run func")
}
function myfunc() {
console.log("run myfunc")
}
export default myfunc
// module2.js
import myfunc, { func } from "./export"
func()
myfunc()
如上，模塊檔案module1.js的默認匯出是一個匿名函式，其它模塊使用import命令加載該模塊時，可以為該匿名函式指定任意名稱，
需要注意的是，匯出模塊使用了export default時，匯入模塊import命令后面，不使用大括號，
上面代碼中，myfunc函式的函式名myfunc，在模塊外部是無效的，加載的時候，視同匿名函式加載，
export default命令用于指定模塊的默認輸出，顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次，所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令，
本質上，export default就是輸出一個叫做default的變數或方法，然后系統允許你為它取任意名字，所以，下面的寫法是有效的，
// modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同于
// export default add;
// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';
正是因為export default命令其實只是輸出一個叫做default的變數，所以它后面不能跟變數宣告陳述句，
// 正確
export var a = 1;
// 正確
var a = 1;
export default a;
// 錯誤
export default var a = 1;
上面代碼中，export default a的含義是將變數a的值賦給變數default，所以，最后一種寫法會報錯，
同樣地，因為export default命令的本質是將后面的值，賦給default變數，所以可以直接將一個值寫在export default之后，
// 正確
export default 42;
// 報錯
export 42;
上面代碼中，最后一句報錯是因為沒有指定對外的介面，而前一句指定對外介面為default，
5. import()
import()函式用于完成動態加載，
import(specifier)
引數specifier，指定所要加載的模塊的位置，import命令能夠接受什么引數，import()函式就能接受什么引數，兩者區別主要是后者為動態加載，
import()函式可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用，它是運行時執行，也就是說，什么時候運行到這一句，就會加載指定的模塊， import()類似于 Node 的require方法，區別主要是前者是異步加載，后者是同步加載，
6. 參考鏈接
http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/module#export-default-%E5%91%BD%E4%BB%A4
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100541.html
標籤：JavaScript
上一篇：Promise.all() 與 Promise.race()
下一篇：JavaScript陣列