module、export、require、import的使用

时间 2019-11-10

标签 module export require import 使用繁體版

原文原文链接

module

每一个文件就是一个模块。文件内定义的变量、函数等等都是在本身的做用域内，都是自身所私有的，对其它文件不可见。javascript

每一个文件内部都有一个module对象，它包含如下属性html

id: 模块的识别符，一般是带有绝对路径的模块文件名
filename：模块的文件名，带有绝对路径
loaded：返回一个布尔值，表示模块是否已经完成加载
parent：返回一个对象，表示调用该模块的模块
children：返回一个数组，表示该模块要用到的其余模块
exports：表示模块对外输出的值

module.exports

在module中有一个属性exports，即：module.exports。它是该模块对外的输出值，是一个对象。其它模块在加载该模块时，实际上加载到的数据都是由它提供的。java

module.exports输出的能够是一个对象，也能够是一个函数。在引用该模块的文件内，若是接受到的是对象，能够直接访问其中的属性，若是接受到的是一个函数，也能够直接执行。node

exports

exports是一个特殊的存在，它是对module.exports的指向，能够经过向exports对象中添加变量、方法等，可是不能直接将exports指向一个值，这样会切断exports和module.exports之间的联系。es6

export和module.exports的使用有一点须要注意，若是导出的是一个函数，只能使用module.exports。数组

export

export用于规定模块的对外接口，能够输出变量、函数或类。export规定的对外接口必须与模块内部的变量创建一一对应关系。函数

错误写法

// 方式一
    export 1; // 报错

    // 方式二
    var a = 1;
    export a; // 报错

    // 方式三
    function fn() {}
    export fn; // 报错

正确写法

// 方式一
    export var a = 1;

    // 方式二
    var a = 1;
    export {a};

    // 方式三
    var a = 1;
    export {a as a1}; // 对a重命名输出

    // 方式四
    export function fn() {};

    // 方式五
    function fn() {}
    export {fn};

export default

export default和export的区别：ui

使用export时，输出的内容和接收时用的变量名称必须一致，不然没法加载；使用export default，则为模块指定默认输出，同时，能够为接收到的变量指定其它名称
使用export输出的变量或者函数，在import时，须要使用大括号；使用export default则不用

import

import和export配对使用，用于加载接收export输入的内容code

require

require用于加载模块文件，默认加载的文件后缀名为.jshtm

若是加载的文件路径以/开头，则表示加载的是一个绝对路径
若是加载的文件路径以./或../开头，则表示加载的是一个相对当前位置的路径
若是加载的文件路径不以以上内容开头，则加载的是一个核心模块，默认会到node_modules下寻找

小结

module、module.exports、exports采用的是CommonJS模块规范。export和export default采用的是ES6模块规范。

module.exports输出的是值的拷贝；export是值的引用
module.exports在运行时加载；export是在编译时输出

// addA.js
    var a = 1;
    function addA() {
        a++;
    }
    module.exports = {
        a: a,
        addA: addA
    };

    // use addA
    var addA = require('./addA.js');
    console.log(addA.a); // 1
    addA.addA();
    console.log(addA.a); // 1

    /************ 改善后 *********************/
    // addA.js
    var a = 1;
    function addA() {
        a++;
    }
    module.exports = {
        get a() {
            return a;
        },
        addA: addA
    };

// addA.js
    export.a = 1;
    export.addA = function() {
        a++;
    }

    // use addA
    import {a, addA} from './addA';
    console.log(a);// 1
    addA();
    console.log(a);// 2