module、export、require、import的使用

更新日期: 2018-12-18阅读: 3.1k标签: 模块

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


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

ES6模块功能:export和import的加载方式

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

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

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

Node.js - 模块系统

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

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

ES6 export 和 export default的区别

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

export和export default的区别

export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;

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

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

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

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

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

点击更多...

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