关闭

module、export、require、import的使用

时间: 2018-12-18阅读: 1471标签: 模块

module

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

每个文件内部都有一个module对象,它包含以下属性:

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


module.exports

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

module.exports输出的可以是一个对象,也可以是一个函数。在引用该模块的文件内,如果接受到的是对象,可以直接访问其中的属性,如果接受到的是一个函数,也可以直接执行。


exports

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

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的区别:

  • 使用export时,输出的内容和接收时用的变量名称必须一致,否则无法加载;使用export default,则为模块指定默认输出,同时,可以为接收到的变量指定其它名称
  • 使用export输出的变量或者函数,在import时,需要使用大括号;使用export default则不用


import

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


require

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

  • 如果加载的文件路径以/开头,则表示加载的是一个绝对路径
  • 如果加载的文件路径以./或../开头,则表示加载的是一个相对当前位置的路径
  • 如果加载的文件路径不以以上内容开头,则加载的是一个核心模块,默认会到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


参考

  • http://es6.ruanyifeng.com/#docs/module
  • http://JavaScript.ruanyifeng.com/nodejs/module.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1643

ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

CommonJS的模块加载

Common这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这个常识一点都不常识

计算一个页面内每个模块的曝光时间(停留时间)

产品希望看到投放出去的活动页,用户对其页面内的什么信息比较感兴趣,对什么信息完全不感兴趣。=> 计算页面内每模块的停留时间

Nodejs数据加密与crypto模块

nodejs 中的 crypto 模块提供了各种各样加密算法的 API。这篇文章记录了常用加密算法的种类、特点、用途和代码实现。其中涉及算法较多,应用面较广,每类算法都有自己适用的场景。为了使行文流畅,列出了本文记录的几类常用算法

JavaScript中模块的导入和导出

早期的 Web 网站主要由 HTML 和 CSS 组成。如果有任何 JavaScript 的代码需要在页面中执行,通常是以小的代码片段的形式来提供功能和交互性。结果就是通常 JavaScript 的代码都会被编写在一个文件中,然后通过 script 标签加载到页面中。

http模块和fs模块

response.write()发送一块相应主体,用来给客户端发送相应数据。write可以使用多次,但是最后一定要使用end来结束响应,否则客户端会一直等待。response.end()此方法向服务器发出信号

Vue 中如何正确引入第三方模块

配置 webpack ProvidePlugin 全局引入,假设要使用到 jquery,那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入;另外一种比较靠谱的方法是将第三方模块打包成插件,如我需要全局使用 echarts,那么在 src 目录下新建一个 lib

Node.js使用Kafka-node模块实现生产者与消费者

基于Node.js,采用Kafka-node模块实现生产者与消费者,我正在做一个的项目,我在自己的服务器上有一个Kafka生产者,并使用Kafka-Node作为我的应用程序的消费者。

JS模块化_CommonJS AMD CMD UMD ES6 Module 比较

模块化开发优点:模块化开发中,通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数,并且可以按需加载。依赖自动加载,按需加载。提高代码复用率,方便进行代码的管理,使得代码管理更加清晰、规范。

Node.js 模块系统源码探微

Node.js 的出现使得前端工程师可以跨端工作在服务器上,当然,一个新的运行环境的诞生亦会带来新的模块、功能、抑或是思想上的革新,本文将带领读者领略 Node.js (以下简称 Node) 的模块设计思想以及剖析部分核心源码实现。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!