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