export命令
常用的三種方式
第一種方式，可以直接導(dǎo)出變量，函數(shù)，class
//a.js
export let name="張三豐";
export let age=123;
export function getName(){
return name;
}
export class Person{}
第二種方式,直接用大括號(hào)包起來倒出去
let name="張三豐";
let age=123;
function getName(){
return name;
}
export {name,age,getName};
第三種方式 ，讓輸出的變量重命名
let name="張三豐";
let age=123;
function getName(){
return name;
}
setTimeout(()=>{
age=18;
});
export {name as xingming,age as nianling,getName as getXingmign};
export語句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值。setTimeout可以證明這個(gè)
export對(duì)頂?shù)氖菍?duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)的關(guān)系，下面這幾種都是錯(cuò)誤的
export 1;
// 報(bào)錯(cuò)
var m = 1;
export m;
// 報(bào)錯(cuò)
上面兩種寫法都會(huì)報(bào)錯(cuò)，因?yàn)闆]有提供對(duì)外的接口。第一種寫法直接輸出 1，第二種寫法通過變量m，還是直接輸出 1。1只是一個(gè)值，不是接口。
export default命令
export default 在一個(gè)模塊內(nèi)只允許出現(xiàn)一次
export可以直接導(dǎo)出匿名函數(shù)或者聲明函數(shù)
export default function (){
console.log("匿名函數(shù)");
};
export default function funName(){
console.log("有名字的函數(shù)");
}
因?yàn)閑xport default命令其實(shí)是輸出一個(gè)叫做default的變量，所以后面不能跟聲明變量語句
//錯(cuò)誤的
export default var a=0;
//正確的
var a=0;
export default a;
export default 輸出類
export default class{
}
import from命令
- import會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行,所以放到那里都行，最好放到代碼的頭部，增加易讀性
- 因?yàn)閕mport是靜態(tài)執(zhí)行，所以不能是用表達(dá)式和變量，比如變量，表達(dá)式，if結(jié)構(gòu)等，在靜態(tài)分析階段，這些語法是沒有是沒法得到值的，否則會(huì)報(bào)錯(cuò)
import的三種常用表達(dá)形式
第一種方式對(duì)應(yīng)export的第一種方式或者第二種方式
import {name,age,getName} from './a.js';
第二種方式，讓輸出的變量重命名
import {xingming as name,nianling as age,getXingmign as getName} from "./a.js";
第三種方式是星號(hào)*代替大括號(hào)
import * as person from "./a.js";
對(duì)應(yīng)的export default命令，變量不用加大括號(hào)
import unknown from "./a.js"http://unknown 這個(gè)是一個(gè)變量名字，可以隨便取一個(gè)
一條import語句同時(shí)輸入默認(rèn)方法和其它接口，可以寫成下面這樣,其實(shí)就是前面是指默認(rèn)的方法，后面跟著個(gè)逗號(hào)，后面就是三種常用的表達(dá)方式
import num,* as person from "./a.js";//num這個(gè)是一個(gè)變量名字，可以隨便取一個(gè)
export和import的復(fù)合寫法
export {name,age} from "./a,js";
上面的代碼其實(shí)就是下面這兩條語句的復(fù)合寫法
import {name,age} from "./a.js";
export {name,age};
接口改為默認(rèn)接口寫法
export {job as default} from "./a.js";
默認(rèn)接口改為接口的方法
export {default as job} from "./a.js";
帶有*號(hào)的現(xiàn)在沒有對(duì)應(yīng)的復(fù)合寫法
module的加載方式
加上defer或者async腳本都是異步執(zhí)行，但是不同的是defer是“渲染完再執(zhí)行”，async是“下載完就執(zhí)行”。
<script src="./a.js" defer></script>
<script src="./a.js" async></script>
加載規(guī)則
瀏覽器加載 ES6 模塊，也使用<script>標(biāo)簽，但是要加入type="module"屬性。
<script type="module" src="./a.js"></script>
瀏覽器對(duì)于帶有type="module"的<script>，都是異步加載，不會(huì)造成堵塞瀏覽器，即等到整個(gè)頁面渲染完，再執(zhí)行模塊腳本，等同于打開了<script>標(biāo)簽的defer屬性。
關(guān)于class就介紹這么多，希望對(duì)你有所幫助，如果想看更詳細(xì)的資料，請(qǐng)狠狠的點(diǎn)擊我
