module

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命令

  1. import會提升到整個模塊的頭部,首先執行,所以放到那里都行,最好放到代碼的頭部,增加易讀性
  2. 因為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就介紹這么多,希望對你有所幫助,如果想看更詳細的資料,請狠狠的點擊我

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,238評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,430評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,134評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,893評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,653評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,136評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,212評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,372評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,888評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,738評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,939評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,482評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,179評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,588評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,829評論 1 283
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,610評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,916評論 2 372

推薦閱讀更多精彩內容

  • 認識模塊 JS 作為一名編程語言,一直以來沒有模塊的概念。嚴重導致大型項目開發受阻,js 文件越寫越大,不方便維護...
    faremax閱讀 647評論 0 0
  • Module 語法 ES6 模塊不是對象,而是通過 export 命令顯示指定輸出的代碼,再通過 import 命...
    Mjericho閱讀 619評論 0 0
  • Module 1.ES6在語言標準的層面上,實現了模塊功能,成為瀏覽器和服務器通用的模塊解決方案,完全可以取代 C...
    Cryptic閱讀 7,191評論 0 11
  • 這種加載稱為“運行時加載”,因為只有運行時才能得到這個對象,導致完全沒辦法在編譯時做“靜態優化”。 ES6 模塊不...
    codeSirCao閱讀 518評論 0 0
  • 歷史上,JavaScript 一直沒有模塊(module)體系,無法將一個大程序拆分成互相依賴的小文件,再用簡單的...
    木中木閱讀 857評論 0 0