最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼

來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:00:38
文檔

JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼

JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼:最近看了些Vue框架寫的程序,發(fā)現(xiàn)自己的前端知識還停留在幾年以前,發(fā)現(xiàn)現(xiàn)在Javascript程序里有各種各樣的對module的導(dǎo)入和到處,導(dǎo)入乍一看跟python的語法挺像的無非就是把from和import這兩個關(guān)鍵詞的使用顛倒了一下順序。仔細(xì)看下來還是和python挺不
推薦度:
導(dǎo)讀JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼:最近看了些Vue框架寫的程序,發(fā)現(xiàn)自己的前端知識還停留在幾年以前,發(fā)現(xiàn)現(xiàn)在Javascript程序里有各種各樣的對module的導(dǎo)入和到處,導(dǎo)入乍一看跟python的語法挺像的無非就是把from和import這兩個關(guān)鍵詞的使用顛倒了一下順序。仔細(xì)看下來還是和python挺不

最近看了些Vue框架寫的程序,發(fā)現(xiàn)自己的前端知識還停留在幾年以前,發(fā)現(xiàn)現(xiàn)在Javascript程序里有各種各樣的對module的導(dǎo)入和到處,導(dǎo)入乍一看跟python的語法挺像的無非就是把from和import這兩個關(guān)鍵詞的使用顛倒了一下順序。仔細(xì)看下來還是和python挺不一樣的import模塊的前提是模塊有導(dǎo)出,并且還分默認(rèn)導(dǎo)出和命名導(dǎo)出,有些麻煩。所以今天這篇文章就把所有的export形式和相應(yīng)的import使用匯總一下。

ES6在語言標(biāo)準(zhǔn)的層面上,實(shí)現(xiàn)了模塊功能,成為瀏覽器和服務(wù)器通用的模塊解決方案,完全可以取代 CommonJS 和 AMD 規(guī)范,基本特點(diǎn)如下:

  • 每一個模塊只加載一次, 每一個JS只執(zhí)行一次, 如果下次再去加載同目錄下同文件,直接從內(nèi)存中讀?。?/li>
  • 每一個模塊內(nèi)聲明的變量都是局部變量, 不會污染全局作用域;
  • 模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出;
  • 一個模塊可以導(dǎo)入別的模塊
  • 2.模塊功能主要由兩個命令構(gòu)成:export和import。export命令用于規(guī)定模塊的對外接口,import命令用于輸入其他模塊提供的功能;

    3.一個模塊就是一個獨(dú)立的文件,該文件內(nèi)部的所有變量,外部無法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個變量,就必須使用export關(guān)鍵字輸出該變量;

    var year = '2018';
    var month = 'Febuary';
    export {year, month};

    export 導(dǎo)出模塊

    export語法聲明用于導(dǎo)出函數(shù)、對象、指定文件(或模塊)的原始值。 有兩種模塊導(dǎo)出方式:命名式導(dǎo)出(名稱導(dǎo)出)和默認(rèn)導(dǎo)出(定義式導(dǎo)出),命名式導(dǎo)出每個模塊可以有多個,而默認(rèn)導(dǎo)出每個模塊僅一個 。

    命名式導(dǎo)出

    模塊可以通過export前綴關(guān)鍵詞聲明導(dǎo)出對象,導(dǎo)出對象可以是多個。這些導(dǎo)出對象用名稱進(jìn)行區(qū)分,稱之為命名式導(dǎo)出

    export { func }; // 導(dǎo)出一個已定義的函數(shù)func
    export const foo = Math.sqrt(100); // 導(dǎo)出一個常量

    我們可以使用*和from關(guān)鍵字來實(shí)現(xiàn)的模塊的繼承:

    export * from 'base_module';

    模塊導(dǎo)出時(shí),可以指定模塊的導(dǎo)出成員。導(dǎo)出成員可以認(rèn)為是類中的公有成員,而非導(dǎo)出成員可以認(rèn)為是類中的私有成員:

    var name = 'Kevin的居酒屋';
    var domain = 'http://coffee.toast.com';
     
    export {name, domain}; // 相當(dāng)于導(dǎo)出{name:name,domain:domain}

    模塊導(dǎo)出時(shí),我們可以使用as關(guān)鍵字對導(dǎo)出成員進(jìn)行重命名,上面的導(dǎo)出可以這樣寫:

    export {name as siteName, domain}

    注意一下語法錯誤:

    export 1; 
    var a = 100;
    export a;
    

    export在導(dǎo)出接口的時(shí)候,必須與模塊內(nèi)部的變量具有一一對應(yīng)的關(guān)系。直接導(dǎo)出1沒有任何意義,也不可能在import的時(shí)候有一個變量與之對應(yīng)export a雖然看上去成立,但是a的值是一個數(shù)字,根本無法完成解構(gòu),因此必須寫成export {a}的形式。即使a被賦值為一個函數(shù),也是不建議使用上面的形式導(dǎo)出的因?yàn)榇蟛糠诛L(fēng)格都建議,模塊中最好在末尾用一個export導(dǎo)出所有的接口,就像上面那些例子一樣。

    默認(rèn)導(dǎo)出

    默認(rèn)導(dǎo)出也被稱做定義式導(dǎo)出。命名式導(dǎo)出可以導(dǎo)出多個值,但在import引用時(shí),也要使用相同的名稱來引用相應(yīng)的值。默認(rèn)導(dǎo)出只有導(dǎo)出一個單一值,這個輸出可以是一個函數(shù)、類或其它類型的值,這樣在模塊import導(dǎo)入時(shí)也會更 容易引用。

    export default function() {}; // 導(dǎo)出一個函數(shù)
    export default class(){}; // 導(dǎo)出一個類

    默認(rèn)導(dǎo)出可以理解為另一種形式的命名導(dǎo)出,默認(rèn)導(dǎo)出可以認(rèn)為是使用了default名稱的命名導(dǎo)出。

    下面兩種導(dǎo)出方式是等價(jià)的:

    const D = 123; 
    export default D;
    export { D as default };
    

    使用名稱導(dǎo)出一個模塊時(shí):

    // "my-module.js" 模塊
    function cube(x) {
     return x * x * x;
    }
    const foo = Math.PI + Math.SQRT2;
    export { cube, foo };
    

    在另一個模塊(js文件)中,我們可以像下面這樣引用:

    import { cube, foo } from 'my-module';
    console.log(cube(3));
    console.log(foo);
    

    使用默認(rèn)導(dǎo)出一個模塊時(shí):

    // "my-module.js"模塊
    export default function (x) {
    return x * x * x;
    }

    在另一個模塊中,我們可以像下面這樣引用,相對名稱導(dǎo)出來說使用更為簡單:

    import cube from 'my-module';
    console.log(cube(3)); // 27

    import導(dǎo)入模塊

    import語法聲明用于從已導(dǎo)出的模塊、腳本中導(dǎo)入函數(shù)、對象、指定文件(或模塊)的原始值。import模塊導(dǎo)入與export模塊導(dǎo)出功能相對應(yīng),也存在兩種模塊導(dǎo)入方式:命名式導(dǎo)入(名稱導(dǎo)入)和默認(rèn)導(dǎo)入(定義式導(dǎo)入)。

    注意事項(xiàng): import必須放在文件的最開始,且前面不允許有其他邏輯代碼,這和其他所有編程語言的導(dǎo)入風(fēng)格一致。

    命名導(dǎo)入

    我們可以通過指定名稱將導(dǎo)入成員插入到當(dāng)作用域中??梢詫?dǎo)入單個成員或多個成員:

    注意,花括號里面的變量與export后面的變量一一對應(yīng)

    import {myMember} from "my-module";
    import {foo, bar} from "my-module";

    通過*符號,我們可以導(dǎo)入模塊中的全部屬性和方法。當(dāng)導(dǎo)入模塊全部導(dǎo)出內(nèi)容時(shí),就是將導(dǎo)出模塊('my-module.js')所有的導(dǎo)出綁定內(nèi)容,插入到當(dāng)前模塊('myModule')的作用域中:

    import * as myModule from "my-module";
    

    默認(rèn)導(dǎo)入

    在模塊導(dǎo)出時(shí),可能會存在默認(rèn)導(dǎo)出。同樣的,在導(dǎo)入時(shí)可以使用import指令導(dǎo)入這些默認(rèn)值。直接導(dǎo)入默認(rèn)值:

    import defaultName from "my-module";
    import myDefault, {foo, bar} from "my-module"; // 指定成員導(dǎo)入和默認(rèn)導(dǎo)入

    default關(guān)鍵字

    // my-module.js
    export default function() {}
     
    // 等效于:
    function func() {};
    export {func as default};
    

    在import的時(shí)候,可以這樣用:

    import a from './my-module';
    // 等效于,或者說就是下面這種寫法的簡寫
    import {default as a} from './my-module';

    這個語法糖的好處就是import的時(shí)候,可以省去{}。

    簡單的說,如果import的時(shí)候,你發(fā)現(xiàn)某個變量沒有花括號括起來(沒有*號),那么你在腦海中應(yīng)該把它還原成有花括號的{default as ...}語法,所以import $,{each,map} from 'jquery';import后面第一個${default as $}的替代寫法。

    聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼

    JS module的導(dǎo)出和導(dǎo)入的實(shí)現(xiàn)代碼:最近看了些Vue框架寫的程序,發(fā)現(xiàn)自己的前端知識還停留在幾年以前,發(fā)現(xiàn)現(xiàn)在Javascript程序里有各種各樣的對module的導(dǎo)入和到處,導(dǎo)入乍一看跟python的語法挺像的無非就是把from和import這兩個關(guān)鍵詞的使用顛倒了一下順序。仔細(xì)看下來還是和python挺不
    推薦度:
    • 熱門焦點(diǎn)

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top