关闭

module、export、require、import的使用

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

node路径之path模块

node当在没在当前js文件下执行该js文件时,该js文件引用的路径会是相对于node命令的路径。显然会造成引用路径不对。因此;无论终端目录是在哪个磁盘下,node执行js文件时,里面的引用的路径都能只指向正确的

Node.js中Domain 模块

Node.js Domain(域) 简化异步代码的异常处理,可以捕捉处理try catch无法捕捉的异常。Domain 模块可分为隐式绑定和显式绑定:

Node.js - 模块系统

模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象

无编译/无服务器,实现浏览器的 CommonJS 模块化

平时经常会逛 Github,除了一些 star 极高的大项目外,还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣,或是有不错的技术点,读起来都让人有所收获

ES6 export 和 export default的区别

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

关于export和export default你不知道的事

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

JavaScript 中的模块、Import和Export

在互联网的洪荒时代,网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中

Node.js资源压缩与zlib模块

nodejs 的 zlib 模块提供了资源压缩功能。例如在 http 传输过程中常用的 gzip,能大幅度减少网络传输流量,提高速度。本文将从下面几个方面介绍 zlib 模块和相关知识点:文件压缩 / 解压,HTTP 中的压缩/解,压缩算法:RLE

JavaScript 模块化简析

关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS 、CMD AMD 这些名词,以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范

点击更多...

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