module、export、require、import的使用
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
参考
module、export、require、import的使用的更多相关文章
- ES6 模块化(Module)export和import详解 export default
ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...
- ES6 Module export与import复合使用
export与import复合使用 基本语法 export {...} from '文件'; 等价于 import {...} from "文件": export {...} 先加 ...
- module.exports,exports,export和export default,import与require区别与联系【原创】
还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...
- module.exports,exports,export和export default,import与require区别与联系
还在为module.exports.exports.export和export default,import和require区别与联系发愁吗,这一篇基本就够了! 一.首先搞清楚一个基本问题: modu ...
- export,export default,module.exports,import,require之间的区别和关联
module.exports Node 应用由模块组成,采用 CommonJS 模块规范.根据这个规范,每个文件就是一个模块,有自己的作用域.在这些文件里面定义的变量.函数.类,都是私有的,对外不可见 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记(十九)Module 的语法-export和import
1.概述 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require.Pyt ...
- 探索 模块打包 exports和require 与 export和import 的用法和区别
菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...
- export和import实现模块化
export和import实现模块化 阅读目录 ES6的模块化的基本规则或特点: 下面列出几种import和export的基本语法: ES6导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...
- export、export default、module.export区别
在es6里面定义模块,导出模块时可以使用export.export default 这2者区别: 在同一个文件里面可以有多个export, 一个文件里面只能有1个export default //a. ...
随机推荐
- 前端angularJS利用directive实现移动端自定义软键盘的方法
最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后 ...
- JDBC第三篇--【事务、元数据、改造JDBC工具类】
这是我JDBC的第一篇 http://blog.csdn.net/hon_3y/article/details/53535798 这是我JDBC的第二篇 http://blog.csdn.net/ho ...
- JDBC操作数据库之修改数据
使用JDBC修改数据库中的数据,起操作方法是和添加数据差不多的,只不过在修改数据的时候还要用到UPDATE语句来实现的,例如:把图书信息id为1的图书数量改为100,其sql语句是:update bo ...
- Ubuntu Server 17.04安装GNOME指令
短短几行指令,从安装到打开: apt-get install gnome-shell apt-get install xinit xshell 开启 关闭: Ctrl+Alt+F1 Ctrl+A ...
- mybatis(三)
上面2章写了mybatis的基本操作,今天就写写mybatis的动态代理吧. 动态代理有4个基本原则: 1.userMapper.xml里面的namespace="cn.my.dao.Use ...
- Postman高级应用——流程控制、调试、公共函数、外部数据文件
postman客户端下载地址:https://www.getpostman.com/apps 目录 流程控制 调试 公共函数 外部数据文件 流程控制 流程控制简言之就是设置接口的执行顺序,流程控制只有 ...
- java枚举类(enum) 基础知识讲解
枚举类是在java 5后新增的,可以用于封装常量,并且还可以为常量的使用提供一些方法. 定义枚举类的语法: public enum EnumName{ 成员1(A,B...),成员2(A,B...), ...
- hdu1356&hdu1944 博弈论的SG值(王道)
S-NimProblem DescriptionArthur and his sister Caroll have been playing a game called Nim for some ti ...
- 张高兴的 Windows 10 IoT 开发笔记:使用 Lightning 中的软件 PWM 驱动 RGB LED
感觉又帮 Windows 10 IoT 开荒了,所以呢,正儿八经的写篇博客吧.其实大概半年前就想写的,那时候想做个基于 Windows 10 IoT 的小车,但树莓派原生不支持 PWM 啊.百度也搜不 ...
- Web的架构与html5基础知识
图1:完整的Web应用构架 图2:html5的基本结构 head 可添加在头部标签元素有→→title meta style link base script noscript meta 几个重要属性 ...