10.1 模塊的基本用法

模塊最基礎(chǔ)的用法就是導(dǎo)出和導(dǎo)入，分別使用export和import關(guān)鍵字來(lái)操作，例如下面的例子。

    //siteInfo.js
    export var siteName = "excelib";
    export var domainName = "www.excelib.com";


    //app.js
    import { siteName, domainName } from "./siteInfo";
    console.log(siteName);      //excelib
    console.log(domainName);    //www.excelib.com

這個(gè)例子中有兩個(gè)文件，在siteInfo.js中定義了模塊，并使用export導(dǎo)出了兩個(gè)變量siteName和domainName，在app.js中使用import將它們導(dǎo)入，這時(shí)在app.js中就可以使用這兩個(gè)變量了。

只有模塊中導(dǎo)出的變量（實(shí)際可能是變量、函數(shù)或者類等，這里統(tǒng)一稱作變量）才可以被其他文件導(dǎo)入，并且只有導(dǎo)入相應(yīng)的變量之后才可以使用，如果上述例子中的app.js文件中只導(dǎo)入了siteName，就無(wú)法使用domainName。導(dǎo)出時(shí)使用export關(guān)鍵字，將要導(dǎo)出的變量放到export后面，可以在定義時(shí)直接導(dǎo)出，也可以在定義完成后統(tǒng)一導(dǎo)出。如果統(tǒng)一導(dǎo)出則需要將要導(dǎo)出的變量使用花括號(hào)括起來(lái)。導(dǎo)入時(shí)使用import關(guān)鍵字，格式為：import { 變量名 } from "Module"，這里的模塊就是定義模塊的文件名去除．js后綴，文件名是包含路徑的，可以是相對(duì)路徑，也可以是完整路徑。我們?cè)賮?lái)看個(gè)例子。

    //siteInfo.js
    var siteName = "excelib";
    var domainName = "www.excelib.com";
    function getSiteName(){
        return siteName;
    }
    function getDomainName(){
        return domainName;
    }
    export {getSiteName, getDomainName};


    //app.js
    import { getSiteName } from "./siteInfo";
    console.log(getSiteName());      //excelib
    console.log(domainName);         //出錯(cuò)，因?yàn)閐omainName沒(méi)有導(dǎo)出
    console.log(getDomainName());    //出錯(cuò)，因?yàn)間etDomainName沒(méi)有導(dǎo)入

這個(gè)例子在定義模塊的siteInfo.js文件中添加了getSiteName和getDomainName兩個(gè)函數(shù)，并將導(dǎo)出語(yǔ)句export單獨(dú)放到最后，并且沒(méi)有直接導(dǎo)出siteName和domainName屬性，而是導(dǎo)出了getSiteName和getDomainName函數(shù)。在app.js中只導(dǎo)入了getSiteName函數(shù)，這時(shí)在app.js中就只可以調(diào)用模塊的getSiteName方法，而調(diào)用domainName和getDomainName都會(huì)出錯(cuò)。這是因?yàn)閐omainName沒(méi)有被導(dǎo)出，而getDomainName雖然在模塊中導(dǎo)出了，但是app.js中沒(méi)有導(dǎo)入。