JavaScript:require 和 import

文章目录

  • require()
    • 起源:
    • 语法:
    • 使用场景:
    • 加载时机:
    • 示例
  • import
    • 起源
    • 语法
    • 使用场景
    • 加载时机
    • 异步加载
    • 示例

require 和 import 是 JavaScript 中用于模块导入的不同语法,它们遵循不同的模块规范

require()

起源:

require() 出现在 CommonJS 规范中,这是 Node.js 环境最早采用的模块化方案,也适用于其他遵循 CommonJS 的环境。

语法:

同步加载模块,通常与 module.exports 或 exports 一起使用。

使用场景:

Node.js 中,通过 require(moduleName) 来加载模块,返回模块导出的对象或值。

加载时机:

运行时加载,即在执行到 require 语句时才加载模块并执行模块代码。

示例

const myModule = require('./myModule.js');

import

起源

import 关键字来源于 ECMAScript 6(ES6/ES2015)的模块规范,是现代浏览器和越来越多的JavaScript环境(包括Node.js v14及以上版本开启实验性支持,v16及以上版本稳定支持)原生支持的模块导入方式。

语法

静态加载模块,可以导入特定的命名导出,也可以导入默认导出。

使用场景

在支持ES6模块的环境中,
通过 import { member } from ‘modulePath’ import defaultExport from ‘modulePath’ 导入模块。

加载时机

编译时加载,即在编译阶段就能识别模块间的依赖关系,有利于静态分析和优化。

异步加载

import() 表达式可以用于动态导入,返回一个 Promise,用于异步加载模块。

示例

// 导入默认导出
import myModule from './myModule.js';// 导入命名导出
import { myFunction, myVariable } from './myModule.js';// 动态导入
import('./myModule.js').then((myModule) => {// 使用myModule
});

注意:
在JavaScript的ES6模块导入语句中,两种写法:

//省略扩展名
import server from "../utils/server";
//包含扩展名
import server from "../utils/server.js";

上面两种写法,在大多数情况下,效果是相同的,因为现代打包工具(如Webpack、Rollup、Parcel等)会解析路径并查找对应的模块文件。默认情况下,它们会假设 .js、.mjs 或 .jsx 扩展名。

然而,如果你的项目配置或所使用的构建工具启用了模块解析的某些特定模式(比如Node.js的ESM模块导入默认会查找.js扩展名),那么省略扩展名也是可行的。在某些框架或环境中,还可以导入其他类型的模块,如.ts(TypeScript)、.vue(Vue单文件组件)等,这时就需要指定扩展名以正确解析模块。

总的来说,在现代前端开发环境中,通常推荐省略.js扩展名以简化代码,但在某些情况下,尤其是需要导入非默认扩展名的模块时,必须显式写出扩展名。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/720071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 的备份方式

MySQL 的备份方式 1. 逻辑备份 逻辑备份是指将数据库中的数据导出为可读的 SQL 语句,通过这些语句可以还原数据库的结构和数据。 使用 mysqldump 工具进行逻辑备份 - **命令示例:**mysqldump -u [username] -p [database_name] > backup_file.sql- …

文档书写规范

1.文档名称:时间-发生地-文档内容高度概括 2.内容定性很重要,可以根据现象来阐述问题,少加主管判断容易出错 3.一个大标题就是一页开头 4.每个标题最好统一字数:四字方便记忆(专业感) 5.设置页数&#…

Spring中的数据校验---JSR303

介绍–什么是JSR303 JSR 303是Java中的一项规范,用于定义在Java应用程序中执行数据校验的元数据模型和API。JSR 303的官方名称是"Bean Validation",它提供了一种在Java对象级别上执行验证的方式,通常用于确保输入数据的完整性和准…

飞链云共创伙伴亮相温州大学,全国首个AIGC大学俱乐部成立!

在这个充满创新活力的时代,我们见证了一个又一个里程碑式的事件。3月3日,温州大学AIGC俱乐部的成立仪式盛大举行,这标志着全国首个AIGC大学俱乐部的诞生。更让人激动的是,飞链云AI共创伙伴——应流(广州)科…

PFA晶圆夹在半导体芯片制造中的应用

随着半导体技术的不断进步,晶圆制造作为集成电路产业的核心环节,对生产过程的精密性和洁净度要求日益提高。在众多晶圆制造工具中,PFA(全氟烷氧基)晶圆夹以其独特的材质和性能,在近年来逐渐受到业界的广泛关…

【Datawhale组队学习:Sora原理与技术实战】AIGC技术基础知识

AIGC是什么 AIGC全称叫做AI generated content,AlGC (Al-Generated Content,人工智能生产内容),是利用AlI自动生产内容的生产方式。 在传统的内容创作领域中,PGC(Professionally-generated Content,专业生…

Qt | 停靠窗口QDockWidget

QDockWidget 是 Qt 框架中的一个窗口小部件,它提供了可停靠的窗口区域,在应用程序主窗口的边缘或浮动在主窗口上层。QDockWidget 继承自 QWidget,并且可以包含其他的窗口小部件作为其内容。 QDockWidget 的主要特点如下: 支持停靠和浮动:QDockWidget 可以停靠在主窗口的…

Untiy 使用AVProVideo插件获取视频的长度

AVPro Video是Unity中一个非常流行的视频插件,可在Unity项目中实现高性能的视频播放功能,功能强大且易用。 如图所示,如果我要获取该视频的长度,方法是很简单的。 1、创建一个测试脚本: using RenderHeads.Media.AVP…

vue3+uniapp在微信小程序实现一个2048小游戏

一、效果展示 二、代码 <template><view class"page"><view class"top"><view class"score">得分:{{total}}</view><view class"time">用时:{{allTime}}s</view></view><view cl…

vue单向数据流介绍

Vue.js 的单向数据流是其核心设计原则之一&#xff0c;也是 Vue 响应式系统的基础。在 Vue.js 中&#xff0c;数据流主要是单向的&#xff0c;从父组件流向子组件。这种设计有助于保持组件之间的清晰通信&#xff0c;减少不必要的复杂性和潜在的错误。 以下是 Vue 单向数据流的…

力扣 单词搜索

判断当前单元格(r,c)的字符与字符串待匹配字符word[idx]是否匹配 如果不匹配&#xff0c;直接回退到上一个单元格与字符 如果匹配&#xff0c;搜索相邻单元格与下一个待匹配字符word[idx1] class Solution { public:int dx[5]{0,0,1,-1};int dy[5]{1,-1,0,0};int flag0;bool d…

Https SSL证书 本地化OCSP地址是什么

OCSP地址即SSL证书中的OCSP验签服务器 最近在做的一个项目上线&#xff0c;前线反馈某些地区访问网站显示白屏&#xff0c;直接影响当地用户使用。公司系统是使用公司自研专用的浏览器登录的&#xff0c;是基于早期谷歌浏览器的开源组件开发的&#xff0c;常出现谷歌访问正常而…

DataWorks(ODPS)性能优化技巧指南

使用阿里云DataWorks进行数据处理的时候&#xff0c;有时候会遇到一个sql或pyodps&#xff08;本质上还是转化为sql&#xff09;执行很长的情况&#xff0c;这个时候有必要对代码进行性能优化。 一、打开ODPS运行评估报告 一个sql脚本执行完毕后&#xff0c;在运维中心的周期…

94. 7张图掌握后端服务重构技巧

文章目录 导言一、逻辑模块重构二、存储模块重构三、逻辑与存储模块联合重构总结 原文地址&#xff1a;7张架构图掌握后端服务重构技巧 导言 随着项目发展&#xff0c;现有模块不再符合需求&#xff0c;重构后端服务必要性拉满。&#x1f468;‍&#x1f4bb; 重构过程中&am…

linux下程序启动即推出的原因定位分析过程

现象&#xff1a; 安装 todesk 的 deb包并配置 daemon 后&#xff0c;todesk无法运行.查看 程序 status 提示&#xff1a;Process: 168846 ExecStart/opt/todesk/bin/ToDesk_Service (codekilled, signalILL) 结论&#xff1a; 引发当前 todesk 启动即退出的原因是当前 CPU指…

873. 最长的斐波那契子序列的长度【leetcode】/动态规划

873. 最长的斐波那契子序列的长度 如果序列 X_1, X_2, …, X_n 满足下列条件&#xff0c;就说它是 斐波那契式 的&#xff1a; n > 3对于所有 i 2 < n&#xff0c;都有 X_i X_{i1} X_{i2} 给定一个严格递增的正整数数组形成序列 arr &#xff0c;找到 arr 中最长的…

大模型通用基础知识解析

大模型的训练和微调 大模型的训练分两个阶段&#xff1a;预训练(Pretrained)和微调(Fine tuning)。因此大模型训练和微调不完全是一个意思&#xff0c;训练包含了微调。 模型预训练&#xff1a;通过在大量无标注数据上进行训练&#xff0c;从而学习到语言的一般规律和知识&am…

代码训练营第52天|● 300.最长递增子序列 ● 674. 最长连续递增序列 ● 718. 最长重复子数组

文档讲解&#xff1a;代码随想录 (programmercarl.com) 视频讲解&#xff1a;代码随想录的个人空间-代码随想录个人主页-哔哩哔哩视频 (bilibili.com) LeetCode 300.最长递增子序列 题目链接&#xff1a;300. 最长递增子序列 - 力扣&#xff08;LeetCode&#xff09; 解题代码…

蓝桥杯练习系统(算法训练)ALGO-992 士兵杀敌(二)

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 南将军手下有N个士兵&#xff0c;分别编号1到N&#xff0c;这些士兵的杀敌数都是已知的。   小工是南将军手下的军师&…

数据中心在高性能计算(HPC)中的作用

高性能计算&#xff08;HPC&#xff09;已成为解决复杂问题、推动科学研究、人工智能和其他各种应用领域的关键工具。要确保高性能计算系统的高效运行&#xff0c;需要专门的基础设施和支持。数据中心在满足高密度计算、管理散热和提供强大带宽方面起着关键作用。本文探讨了数据…