(区别、详解、使用)module.exports与exports,export与export default,import 与require
目录
导出简介(里面有小细节请仔细阅读)
module.exports与exports
1.该js文件要导出的值即为test
2.该js文件要导出的值即为test1和test2
3. 注意这里我是先给module.exports.test2赋值,然后给module.exports赋值,因此{test1}覆盖了原来的test2,因此module.exports中只有test1
4. 该js文件要导出的值即为test2
5. 注意这里(注意点),module.exports ={test1};改变了module.exports指向的引用,exports还指向之前的module.exports引用,因此无论exports.test2 = test2;在哪里执行都不能改变该js文件索要暴露的值。所以如果要改变module.exports指向的引用,就不要使用exports
export与export default
1.根据输出可知:export default test1;等价于exports.default = test1; export {test2};等价于exports.test2 = test2;
(坑)export {}这个语法比较特殊,{}花括号中,必须是提前定义好的
(1)正确
(2)错误
2.可见:要想使用export或者export defalut 就不能改变module.exports指向的引用
(坑)上面第七行代码进行了,执行module的指向更改,后续如果引入的话,就只会引入module.exports最新的一次指向
导入简介
require
import
(注意)如果同时存在自定义的和default那么impor的时候需要注意
export defalut 就是默认输出的值,在使用import时,要想使用这个默认的值就需要只获取一个值(不加大括号,变量名随便写)
require和import区别
区别1:模块加载的时间
区别2:模块的本质
区别3:严格模式
ES6 模块之中,顶层的 this 指向 undefined ,即不应该在顶层代码使用 this
导出简介(里面有小细节请仔细阅读)
变量的导出涉及到四个关键字module.exports与exports,export与export default,
其中module.exports与exports是符合CommonJS模块规范的。
export与export default是es6用来导出模块的。
module.exports与exports
- module是一个对象,代指的整个js文件,而他的exports属性就是该js文件对外暴露的对象,只要是module.exports的属性内的值都能被访问到(包括字符串,数字,对象,函数)。
- exports指向了module.exports就相当于在js文件开头添加了这样一段代码
var exports = module.exports;
总之我们只要记住一点:module.exports指向的东西,就是我们要导出的东西
1.该js文件要导出的值即为test
const test=1;module.exports ={test};console.log(module.exports)
2.该js文件要导出的值即为test1和test2
const test1="test1";
const test2= "test2";
module.exports ={test1};
module.exports.test2 =test2;
console.log(module.exports)
3. 注意这里我是先给module.exports.test2赋值,然后给module.exports赋值,因此{test1}覆盖了原来的test2,因此module.exports中只有test1
const test1="s";const test2= "ss";const test3="sss";module.exports.test2 =test2;module.exports ={test1};console.log(module.exports)
4. 该js文件要导出的值即为test2
const test1="s";const test2= "ss";const test3="sss";exports.test2 = test2;console.log(module.exports)
5. 注意这里(注意点),module.exports ={test1};改变了module.exports指向的引用,exports还指向之前的module.exports引用,因此无论exports.test2 = test2;在哪里执行都不能改变该js文件索要暴露的值。所以如果要改变module.exports指向的引用,就不要使用exports
export与export default
- 这两个是es6的语法,在小程序中也是可以使用的
- export与export default都是用来导出变量的,并且他们两个作用与exports相同,只是语法不同
- 二者同样是给module.exports赋值,export可以赋多个值,export default只能赋一个值(只能使用一次).
- export后面跟的是声明或者语句,export default后面跟的是表达式
1.根据输出可知:export default test1;等价于exports.default = test1; export {test2};等价于exports.test2 = test2;
const test1="s";const test2= "ss";const test3="sss";export default test1;export {test2};export const test4="ssss";console.log(module.exports)
(坑)export {}这个语法比较特殊,{}花括号中,必须是提前定义好的
(1)正确
const test1 = "test1";
export {test1//这种可以
};
console.log(module.exports)
(2)错误
export {test1:1
};
console.log(module.exports)
2.可见:要想使用export或者export defalut 就不能改变module.exports指向的引用
const test1="s";const test2= "ss";const test3="sss";const test4="ssss";export default test1;export {test2};module.exports ={test3};//这里进行了指向更改export {test4};console.log(module.exports)
(坑)上面第七行代码进行了,执行module的指向更改,后续如果引入的话,就只会引入module.exports最新的一次指向
导入简介
我们知道了如何导出变量,那肯定还得知道如何导入
使用require 与import来导入
require 是是符合CommonJS模块规范的。import是es6用来导出模块的。
require 可以在js文件中的任意位置使用,import只能在文件开头使用
require
require比较好理解,他可以直接获取module.exports的对象,进而使用其中的属性和方法
//test.js中
const test1="s";
const test2= "ss";
const test3="sss";
const test4="ssss";
export default test1;
export {test2};
exports.test3=test3;
module.exports.test4=test4;
//引用的文件中
var test = require("../../utils/test.js");
console.log(test)
import
import是直接获取module.exports对象的属性和方法
(注意)如果同时存在自定义的和default那么impor的时候需要注意
方法1、方法2、方法3都在下面的代码里面
//test.js中const test1="s";const test2= "ss";const test3="sss";const test4="ssss";export default test1;//导出默认export {test2};exports.test3=test3;module.exports.test4=test4;//引用的文件中,import在文件开头//情况1(用法)import {test2,test3,test4} from "../../utils/test.js"//这种情况下对test2 test3 test4进行单独导出//情况2(用法)import test0 from "../../utils/test.js"//这种情况下只对module.exports中的default的值单独导出并且赋值给test0//情况3(用法)import * as all from "../../utils/test.js"//这种情况下将module.exports的所有值都付给all
export defalut 就是默认输出的值,在使用import时,要想使用这个默认的值就需要只获取一个值(不加大括号,变量名随便写)
//test.js中const test1="s";export default test1;//引用的文件中,import在文件开头import SuiBianXie from "../../utils/test.js"console.log(SuiBianXie)
require和import区别
区别1:模块加载的时间
require:运行时加载
import:编译时加载(效率更高)【由于是编译时加载,所以import命令会提升到整个模块的头部】
区别2:模块的本质
require:模块就是对象,输入时必须查找对象属性
import:ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入(这也导致了没法引用 ES6 模块本身,因为它不是对象)。由于 ES6 模块是编译时加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。
区别3:严格模式
CommonJs模块和ES6模块的区别:
(1)CommonJs模块默认采用非严格模式
(2)ES6 的模块自动采用严格模式,不管你有没有在模块头部加上 “use strict”;
(3)CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用
ES6 模块之中,顶层的 this 指向 undefined ,即不应该在顶层代码使用 this
(区别、详解、使用)module.exports与exports,export与export default,import 与require相关推荐
- Jar/War/Ear等包的作用与区别详解
Jar/War/Ear等包的作用与区别详解 以客户角度来看,jar文件就是一种封装格式,用户不需要知道jar包中有多少个.class格式的文件及每个文件中的功能与作用,也可以得到相应的访问的结果.ja ...
- pytorch教程之nn.Module类详解——使用Module类来自定义网络层
前言:前面介绍了如何自定义一个模型--通过继承nn.Module类来实现,在__init__构造函数中申明各个层的定义,在forward中实现层之间的连接关系,实际上就是前向传播的过程. 事实上,在p ...
- [ASP.NET]ASP.NET中的Inherits、CodeFile、CodeBehind的区别详解及OWIN及IDENTITY
篇一 : ASP.NET中的Inherits.CodeFile.CodeBehind的区别详解 Inherits.CodeFile.CodeBehind 在 ASP.NET 中使用代码隐藏方法来设计W ...
- HashTable和HashMap的区别详解
HashTable和HashMap的区别详解 一.HashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-value对,其内部通过单链表解决冲突问题,容量不足(超过了阀值)时,同 ...
- java mod %区别_Java中 % 与Math.floorMod() 区别详解
%为取余(rem),Math.floorMod()为取模(mod) 取余取模有什么区别呢? 对于整型数a,b来说,取模运算或者取余运算的方法都是: 1.求 整数商: c = a/b; 2.计算模或者余 ...
- 关于numpy中eye和identity的区别详解
https://www.jb51.net/article/175386.htm np.identity(n, dtype=None) np.eye(N, M=None, k=0, dtype=< ...
- php为什么需要配置路由器,laravel 配置路由 api和web定义的路由的区别详解
1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...
- python协程详解_对Python协程之异步同步的区别详解
一下代码通过协程.多线程.多进程的方式,运行代码展示异步与同步的区别. import gevent import threading import multiprocessing # 这里展示同步和异 ...
- Java中print、printf、println的区别 详解
Java中print.printf.println的区别详解 printf主要是继承了C语言的printf的一些特性,可以进行格式化输出 print就是一般的标准输出,但是不换行 println和pr ...
- axios请求接口http_使用axios请求接口,几种content-type的区别详解
axios的使用 安装(一般使用框架的话, 脚手架都集成了) $ npm install axios 请求示例 // POST axios.post('/user', { firstName: 'Fr ...
最新文章
- mlc tlc slc qlc_看了这么多固态硬盘科普,终于真正搞明白TLC闪存和SLC缓存
- java多递归调用_java – 递归调用方法
- 虚拟机使用的是此版本 VMware Workstation 不支持的硬件版本。 模块“Upgrade”启动失败。 未能启动虚拟机(修改.vmx文件virtualHW.version = “xx“字段)
- 【开发环境专题一】Maven环境搭建
- Java虚拟机--------JVM常见参数
- 透明加密tde_如何在SQL Server中配置透明数据加密(TDE)
- 【晨读】热爱 ▪ 英语 @ 热爱 ▪ 晨读
- php 字符串加,php字符串如何增加
- ndarray负值统一置0,正数不变
- iec611313标准下载_IEC 61730-1-2016
- 笔记本电脑怎么找计算机硬盘,如何给笔记本电脑硬盘分区
- 哈希值是什么? 哈希概念
- 中继器制作联动下拉列表
- 【格式转换】将JPEG图片批量处理为jpg格式
- 微信支付服务商模式(电商收付通)实现分账操作
- RGB与16进制值互相转换
- EV3文件打不开,闪退怎么办(完美解决,无弹窗,无警告)
- 电脑开机进不了系统卡在加载界面怎么办?
- 从微软官网下载VS2015(2016年8月25日)
- 《漂浮城堡历险记》的云端之旅
热门文章
- [项目管理入门系列] 师傅领进门-------项目运作的一般流程(二)
- matlab 16位图转8位,8 位和 16 位图像
- 中国红风格我和我的祖国PPT模板
- 台式机如何内外网同时上(笔记本同理,笔记本可以连WiFi)
- 岭回归(Ridge)和Lasso 回归(笔记)
- 手机端密码键盘(weiKeyBoard.js)
- SQL 之 HAVING
- 机器人摘果子看图写话_小猴摘果子看图写话二年级
- Google高级搜索指令
- 【数字图像处理】六.MFC空间几何变换之图像平移、镜像、旋转、缩放具体解释...