require 与 import 两种引入模块方式到底有什么区别?
关于JavaScript 的模块化规范,可以移步至: 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」
下面进入正题
require 与 import 两种引入模块方式,到底有什么区别呢?
大致可以分为以下几个方面:
一、写法上
-
require/exports的用法:const path = require('path') exports.path = path module.exports = path -
import/export的用法:import path from 'path' import {default as path} from 'path' import * as path from 'path' import { dirname } from 'path' import { dirname as dir } from 'path' import path, {dirname} from 'path'export default path export const path export function dirname export {dirname} export * from 'path'
二、执行顺序
-
require:不具有提升效果,到底加载哪一个模块,只有运行时才知道。const path = './' + fileName; const myModual = require(path); -
import:具有提升效果,会提升到整个模块的头部,首先执行。// import 的执行早于foo的调用。本质就是 import 命令是编译阶段执行的,在代码运行之前。foo();import { foo } from 'my_module';
三、输入值的区别
-
require输入的变量,基本类型数据是赋值,引用类型为浅拷贝,可修改。 -
import输入的变量都是只读的,如果输入 a 是一个对象,允许改写对象属性。// a.js let obj = {foo() {console.log('obj...foo');} } export {obj }// b.js import { obj } from '/a.js'// 非法操作 obj = {}; // Syntax Error : 'a' is read-only; // Uncaught TypeError: Assignment to constant variable.// 合法操作 obj.foo = 'hello';
四、是否可以使用表达式或变量
-
require:可以使用表达式和变量let a = require('./a.js') a.add()let b = require('./b.js') b.getSum() -
import:静态执行,不能使用表达式和变量,因为这些都是只有在运行时才能得到结果的语法结构。// 报错 import { 'f' + 'oo' } from 'my_module';// 报错 let module = 'my_module'; import { foo } from module;// 报错 if (x === 1) {import { foo } from 'module1'; } else {import { foo } from 'module2'; }
总结
require/exports 和 import/export 本质上的区别,实际上也就是 CommonJS 规范与 ES Module 的区别。
- 浏览器在不做任何处理时,默认是不支持
import和require; babel会将 ES6 模块规范转化成 CommonJS 规范;webpack、gulp以及其他构建工具会对 CommonJS 进行处理,使之支持浏览器环境
它们有三个重大差异。- CommonJS 模块输出的是一个值的拷贝,ES Module 输出的是值的引用。
- CommonJS 模块是运行时加载,ES Module 是编译时输出接口。
导致该差异是因为 CommonJS 加载的是一个对象(即
module.exports属性),该对象只有在脚本运行完才会生成。而 ES Module 不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。 - CommonJS 模块的
require()是同步加载模块,ES Module 的import命令是异步加载,有一个独立的模块依赖的解析阶段。
关于 CommonJS 规范与 ES Module 的区别,大家可以移步至: 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」 进行阅读。
相关文章:
require 与 import 两种引入模块方式到底有什么区别?
关于JavaScript 的模块化规范,可以移步至: 【JavaScript高级】模块化规范「一文让你彻底搞懂前端模块化规范 & 区别」 下面进入正题 require 与 import 两种引入模块方式,到底有什么区别呢? 大致可以分为以下几个方面&#…...
软考信息系统监理师备考建议
用好备考方法,两三个月就可以过的。信息系统监理师备考最好以教材和历年真题为主,教学视频模拟题为辅。考试介绍与复习建议:考试设置的科目包括:(1)信息系统工程监理基础知识,考试时间150分钟&a…...
第八届蓝桥杯省赛——4承压计算(二维数组,嵌套循环)
题目:X星球的高科技实验室中整齐地堆放着某批珍贵金属原料。每块金属原料的外形、尺寸完全一致,但重量不同。金属材料被严格地堆放成金字塔形。7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 8 8 4 1 7 9 6 1 4 5 4 5 6 5 5 6 9 5 6 5 5 4 7 9 3 5 5 1 7 5 7 9 7 4…...
【ECNU】3645. 莫干山奇遇(C++)
目录 题目 输入格式 输出格式 样例 提示 思路 代码 题目 单点时限: 2.0 sec 内存限制: 512 MB 出题人当然是希望出的题目有关 oxx,于是想方设法给题目配上一些有关 oxx 的背景故事,使得它看起来不那么无趣。但有的时候却无法引入合适的小姐姐&…...
为什么需要学习shell、shell的作用
课程基于B站于超课程笔记 03 Shebang的正确玩法_哔哩哔哩_bilibili P1 shell的作用 P2 shell执行命令的流程 P3 Shebang的正确玩法 什么是shell及组成 shell概念 shelll组成 Shebang概念 /bin/sh /bin/bash一样,都是指向一个bash解释器 [rootlocalhost ~]#…...
pgsql-Create_ALTER_GRANT_REVOKE命令语法
pgsql-Create_ALTER_GRANT_REVOKE命令语法 资料 语法约定 CREATE ROLE ALTER ROLE GRANT授权 REVOKE回收授权 权限类型说明 语法约定 下面的约定被用于命令的大纲:方括弧([和])表示可选的部分(在 Tcl 命令里,使…...
【linux】:进程概念
文章目录 冯诺依曼体系结构一:操作系统二: 进程总结冯诺依曼体系结构 我们常见的计算机,如笔记本。我们不常见的计算机,如服务器,大部分都遵守冯诺依曼体系。 冯诺依曼体系如下图: 那么输入设备有哪些呢?…...
创建对象的方式和对属性的操作
javaScript支持多种编程范式,包括函数式编程和面向对象编程,javaScript的对象被设计成一组属性的无序集合,由key和value组成。 创建对象的两种方式 早期使用创建对象方式最多的是使用Object类,使用new关键字来创建一个对象&…...
GO时间相关操作说明
文章目录 GO时间相关操作时间转换成字符串字符串转换成时间时间戳和时间操作时间比较操作时间增加和减少操作休眠操作time.AfterFunc操作time.NewTicker操作GO时间相关操作 GO语言在使用时间转换的时候会用到2006-01-02 15:04:05 这是固定参数写法,类似java语言中的yyyy-M…...
选择和分支结构
选择和分支结构选择和分支结构一、复习问答二、选择结构2.1 基础选择结构2.2 if-else结构2.3 多重if结构2.4 嵌套if结构三、分支结构四、局部变量选择和分支结构 一、复习问答 1、Java中基本数据类型 2、类型的转换的两种情形 3、数据类型提升的规则 二、选择结构 2.1 基础选…...
Elasticsearch总结笔记
文章目录简介类型增删改查操作索引原理简介 底层使用的lucene引擎,lucene引擎直接使用相对复杂,有一定的学习成本,同样是使用Java编写,Elasticsearch使用的rest风格的进行交互,而数据呢则是以JSON的方式进行传输。学习…...
Ubuntu 安装指定版本 Mysql,并设置远程连接(以安装mysql 5.5 为例)
目录 一、安装Mysql 1、卸载Mysql(可跳过) 2、安装mysql 软件源 3、安装mysql 5.5 4、验证测试 二、设置远程登录 1、允许使用root账号远程连接 2、Mysql 允许远程登录 一、安装Mysql 1、卸载Mysql(可跳过) 如果之前安装…...
NumPy:Python中的强大数学工具
NumPy:Python中的强大数学工具 文章目录NumPy:Python中的强大数学工具一、NumPy简介二、创建数组三、数组尺寸四、数组运算五、数组切片六、数组连接七、数据存取八、数组形态变换九、数组排序与搜索十、矩阵与线性代数运算一、NumPy简介 当谈到数据科学…...
Hbase资源隔离操作指南
1.检查集群的环境配置 1.1 HBase版本号确认> 5.11.0 引入rsgroup的Patch: [HBASE-6721] RegionServer Group based Assignment - ASF JIRA RegionServer Group based Assignment 社区支持版本:2.0.0 引入rsgroup的CDH版本 5.11.0 https://www.…...
TPS2012B泰克Tektronix隔离通道示波器
简 述: 复杂环境中开发和测试你的设计,进行浮动或差 分测量;100MHz,2通道 主要特点和优点 100 MHz和200 MHz带宽 高达2 GS/s的实时采样率 2条或4条全面隔离和浮动通道,外加隔离外部触 发 在安装两块电池时可以连续…...
9.4 PIM-DM
实验目的 熟悉PIM-DM的应用场景掌握PIM-DM的配置方法 实验拓扑 实验拓扑如图9-28所示: 图9-28:PIM-DM 实验步骤 (1)IP地址的配置 MCS1的配置如图9-29所示: 图9-29:配置MCS1的IP地址 R1的配置 <Huawe…...
程序员推荐的良心网站合集!
今天来给大家推荐几个程序员必看的国外良心网站合集。 IBM developer 技术性很强的博客网站,网站自带真实示例代码和架构解决方案,大家可以在上面找到适合自己的语言方向开始学习交流。 https://developer.ibm.com/ infoq 技术论坛社区,内…...
信息安全概论之《密码编码学与网络安全----原理与实践(第八版)》
前言:在信息安全概论课程的学习中,参考了《密码编码学与网络安全----原理与实践(第八版)》一书。以下内容为以课件为主要参考,课本内容与网络资源为辅助参考,学习该课程后作出的总结。 一、信息安全概述 1…...
跬智信息全新推出云原生数据底座玄武,助力国产化数据服务再次升级
2月28日,跬智信息(Kyligence)宣布全新推出国产化云原生数据底座开源项目玄武(XUANWU),以助力企业加速数据平台上云,并实现国产化升级。玄武(XUANWU)是在容器化技术上形成…...
【离线数仓-9-数据仓库开发DWS层设计要点-DWS层汇总表以及数据装载】
离线数仓-9-数据仓库开发DWS层设计要点-DWS层汇总表以及数据装载离线数仓-9-数据仓库开发DWS层设计要点-DWS层汇总表以及数据装载一、交易域用户商品粒度订单最近1日/N日汇总表1.交易域用户商品粒度订单最近1日汇总表2.交易域用户商品粒度订单最近N日汇总表二、交易域优惠券粒度…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
让AI看见世界:MCP协议与服务器的工作原理
让AI看见世界:MCP协议与服务器的工作原理 MCP(Model Context Protocol)是一种创新的通信协议,旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天,MCP正成为连接AI与现实世界的重要桥梁。…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理
引言 Bitmap(位图)是Android应用内存占用的“头号杀手”。一张1080P(1920x1080)的图片以ARGB_8888格式加载时,内存占用高达8MB(192010804字节)。据统计,超过60%的应用OOM崩溃与Bitm…...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
