10.1 模块的基本用法

模块最基础的用法就是导出和导入，分别使用export和import关键字来操作，例如下面的例子。

    //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

这个例子中有两个文件，在siteInfo.js中定义了模块，并使用export导出了两个变量siteName和domainName，在app.js中使用import将它们导入，这时在app.js中就可以使用这两个变量了。

只有模块中导出的变量（实际可能是变量、函数或者类等，这里统一称作变量）才可以被其他文件导入，并且只有导入相应的变量之后才可以使用，如果上述例子中的app.js文件中只导入了siteName，就无法使用domainName。导出时使用export关键字，将要导出的变量放到export后面，可以在定义时直接导出，也可以在定义完成后统一导出。如果统一导出则需要将要导出的变量使用花括号括起来。导入时使用import关键字，格式为：import { 变量名 } from "Module"，这里的模块就是定义模块的文件名去除．js后缀，文件名是包含路径的，可以是相对路径，也可以是完整路径。我们再来看个例子。

    //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);         //出错，因为domainName没有导出
    console.log(getDomainName());    //出错，因为getDomainName没有导入

这个例子在定义模块的siteInfo.js文件中添加了getSiteName和getDomainName两个函数，并将导出语句export单独放到最后，并且没有直接导出siteName和domainName属性，而是导出了getSiteName和getDomainName函数。在app.js中只导入了getSiteName函数，这时在app.js中就只可以调用模块的getSiteName方法，而调用domainName和getDomainName都会出错。这是因为domainName没有被导出，而getDomainName虽然在模块中导出了，但是app.js中没有导入。