当前位置： 首页 > news >正文

JavaScript模块化

news 文章来源：https://blog.csdn.net/weixin_42707397/article/details/140824901 2025/2/7 10:36:17

JavaScript模块化

  • 一、CommonJS规范
    • 1、在node环境下的模块化
      • 导入、导出
    • 2、浏览器环境下使用模块化
      • browserify编译js
  • 二、ES6模块化规范
    • 1、在浏览器端的定义和使用
    • 2、在node环境下简单使用
      • 方式一：
      • 方式二：
    • 3、导出数据
    • 4、导入数据
    • 5、数据引用问题

一、CommonJS规范

1、在node环境下的模块化

导入、导出

导入：require，例如：const axios = require('axios'); 或者解构导入const {axios,postgres:pg}=require('./_axios_postgres.js')

导出：exports，例如：exports.axios = {"axios":axios,"pg":pg}或者对象整体导出：module.exports = { axios,pg }

在这里插入图片描述

2、浏览器环境下使用模块化

默认是不支持require的，所以需要编译一下才能在html中引入模块化js

browserify编译js

在这里插入图片描述

二、ES6模块化规范

1、在浏览器端的定义和使用

导出代码

export const my_axios = { "a": 1, b: "2" }
export function getAxios() {return my_axios
}

导入代码

import * as es6 from "./27、es6模块化-导出.js"
console.log("xxx", es6.getAxios());

html测试代码，type="module"一定要加上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script type="module" src="./27、es6模块化-导入.js"></script>
<body></body>
</html>

控制台打印结果
在这里插入图片描述

2、在node环境下简单使用

方式一：

（1）修改上面导入导出文件为mjs文件

在这里插入图片描述

（2）执行结果

在这里插入图片描述

方式二：

在上面导入导出的js文件下新建package.json，加上内容type如下

{"type": "module"
}

运行结果
在这里插入图片描述

3、导出数据

（1）、分别导出。将导出的对象前面分别加上export

export const my_axios = { "a": 1, b: "2" }
export function getAxios() {return my_axios
}

（2）、统一导出。使用export {}

const postgres1 = "pg1"
const postgres2 = "pg2"
export {postgres1,postgres2}

（3）、默认导出。export default {}

const postgres3 = "pg3"
export default { postgres3}
或者
export default postgres3

4、导入数据

（1）、导入全部。

import * as es6 from "./27、es6模块化-导出.js"

（2）、命名导入。只针对分别导出和统一导出

import { my_axios as axios, getAxios } from "./28、es6模块化-导出.js"

（3）、默认导入。只针对默认导出

import xxx(随便起，获取到的是默认导出的所有对象) from "./28、es6模块化-导出.mjs"

（4）、通用导入。混合使用

import xxx(随便起，获取到的是默认导出的所有对象), { my_axios, getAxios } from "./28、es6模块化-导出.mjs"

（5）、动态导入。点击按钮后导入某个js

<body><button id="btn">导入</button>
</body>
<script>const btn = document.getElementById("btn")btn.onclick = async () => {const result = await import("./27、es6模块化-导出.js")console.log("result", result);}
</script>

在这里插入图片描述
（6）、import可以不接收任何数据。
比如每次启动项目都要在控制台打印一次当前版本号，
先创建version.js，内容写上console.log("v_1.1.2")，然后在访问开始页面直接使用import "./version.js"即可。

5、数据引用问题

思考一：
在这里插入图片描述
思考二：相当于复制了一份
在这里插入图片描述
思考三：
在这里插入图片描述

相关文章：

JavaScript模块化

JavaScript模块化 一、CommonJS规范1、在node环境下的模块化导入、导出 2、浏览器环境下使用模块化browserify编译js 二、ES6模块化规范1、在浏览器端的定义和使用2、在node环境下简单使用方式一&#xff1a;方式二&#xff1a; 3、导出数据4、导入数据5、数据引用问题 一、Com…...

编程日记 2024/8/3 23:24:25

文件包含漏洞Tomato靶机渗透_详解

一、导入靶机 将下载好的靶机拖入到VMware中&#xff0c;填写靶机机名称(随便起一个)和路径 虚拟机设置里修改网络状态为NAT模式 二、信息收集 1、主机发现 用御剑扫描工具扫描虚拟机的NAT网段&#xff0c;发现靶机的IP是192.168.204.141 2、端口扫描 用御剑端口扫描扫描全…...

编程日记 2024/8/3 23:23:24

湖北汽车工业学院-高等数学考纲

湖北汽车工业学院2024年普通专升本考试的《高等数学》考试大纲已经公布。考试形式为闭卷笔试&#xff0c;满分100分&#xff0c;考试时间为90分钟。考试内容主要包括以下几个部分&#xff1a; 1. **函数、极限、连续**&#xff1a; 涉及函数概念、表示法、有界性、周期性、奇偶…...

编程日记 2024/8/3 23:22:22

Linux：Xshell相关配置及前期准备

一、Linux的环境安装 1、裸机安装或者是双系统 2、虚拟机的安装 3、云服务器&#xff08;推荐&#xff09;——>安装简单&#xff0c;维护成本低&#xff0c;学习效果好&#xff0c;仿真性高&#xff08;可多人一起用一个云服务器&#xff09; 1.1 购买云服务器 使用云服…...

编程日记 2024/8/3 23:21:21

模型 正态分布（通俗解读）

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。随机世界的规律&#xff0c;大自然里的钟形曲线。 1 正态分布的应用 1.1 质量管理之六西格玛 六西格玛是一种旨在通过识别和消除缺陷原因来提高制造过程或业务流程质量的管理策略。我们先来了解下六…...

编程日记 2024/8/3 23:19:19

安装了Vue-pdf后，打包文件多出了worker.js和worker.js.gz

解决方式&#xff1a; 修改node_modules/worker-loader/dist/index文件 将 const filename _loaderUtils2.default.interpolateName(this, options.name || 中的 js/[hash].worker.js,更改为 static/js/[hash].worker.js...

编程日记 2024/8/3 23:18:18

使用excel生成国际化多语言js文件的脚本

1、创建一个空文件夹 2、终端 cnpm install xlsx3、在文件夹创建一个index.js // 导入 Node.js 内置的 fs 模块 const fs = require(fs); // 导入 xlsx 模块，用于处理 Excel 文件 const XLSX = require(xlsx);// 读取 Excel 文件 function readExcelFile(filePath) {const …...

编程日记 2024/8/3 23:15:13

【蝉联】摩斯再次获得“中国隐私计算市场份额第一”

蝉联第一 8月2日&#xff0c;全球领先的IT市场研究和咨询公司IDC发布了《中国隐私计算平台厂商市场份额&#xff0c;2023》报告。蚂蚁集团凭借商用隐私计算平台摩斯&#xff08;MORSE&#xff09;&#xff0c;以 35.3%的市场份额蝉联第一。 2023年&#xff0c;中国隐私计算平台…...

编程日记 2024/8/3 23:12:10

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决 解决方案&#xff1a; 将windows 修改为utf-8编码格式 解决步骤如下&#xff1a; 1. 进入控制台 2. 点击区域 4. 点击管理 4.勾选UTF-8 5.重启系统即可...

编程日记 2024/8/3 23:11:08

mv：自动对焦代码

try:# The camera will now focus on whatever is in front of it.sensor.ioctl(sensor.IOCTL_TRIGGER_AUTO_FOCUS) except:raise (Exception("Auto focus is not supported by your sensor/board combination."))...

编程日记 2024/8/3 23:06:01

【C++】数组案例 五只小猪称体重

题目&#xff1a;给出物质小猪体重&#xff0c;找出最大的体重的值并打印 思路&#xff1a;利用菽粟写入五只小猪的体重&#xff0c;让每一个元素都赋值给一个整型变量并每赋值一次就于下一个数组中的元素比&#xff0c;若是大就继续赋值给这个变量&#xff0c;若是小则不赋值…...

编程日记 2024/8/3 23:04:59

Bug 解决 | 后端项目无法正常启动，或依赖服务连接失败

目录 1、版本问题 2、依赖项问题 明明拷贝的代码&#xff0c;为什么别人行&#xff0c;我启动就报错&#xff1f; 这篇文章我就理一下最最常见的项目启动报错的两种原因&#xff01; 1、版本问题 比如明明项目的 Java 版本是 8&#xff0c;你非得拿 5 跑&#xff1f;那不是…...

编程日记 2024/8/3 23:03:58

Linux: network: mlx5_core crash；dos

https://bugzilla.redhat.com/show_bug.cgi?idCVE-2024-41090 https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux.git/commit/?id8be915fc5ff9a5e296f6538be12ea75a1a93bdea https://www.openwall.com/lists/oss-security/2024/07/24/4 是tap的驱动向下传递的包…...

编程日记 2024/8/3 23:02:57

用手机剪辑视频素材从哪里找？用手机视频素材库分享

视频编辑是一门充满创意的艺术&#xff0c;无论是制作短片、广告还是个人Vlog&#xff0c;都离不开高质量的视频素材。如果自己拍摄的素材不能完全满足创作需求&#xff0c;或者需要更多样化的内容来丰富视频&#xff0c;那么优质的视频素材来源至关重要。下面推荐几个提供高品…...

编程日记 2024/8/3 23:01:55

DataStream API使用Sink及自定义Sink

目录 Data Sinks 案例 自定义Sink Human实体类 自定义RichSinkFunction MySQL Sink使用 测试 Data Sinks 数据接收器（Data sinks）消费数据流并将它们转发到文件、套接字、外部系统或打印它们。Flink带有各种内置输出格式，这些格式被封装在数据流的算子后面： …...

编程日记 2024/8/3 22:59:51

C++标准模板（STL）- 类型支持 （类型属性，检查类型是否拥有强结构相等性，std::has_strong_structural_equality）

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…...

编程日记 2024/8/3 22:58:50

《中国数据库前世今生》观影——2000年代/数据库分型及国产数据库开端

引出 《中国数据库前世今生》观影——2000年代/数据库分型及国产数据库开端 第3集&#xff1a;2000年代/数据库分型及国产数据库开端 y2k问题 千年虫&#xff0c;又叫做“计算机2000年问题”“电脑千禧年千年虫问题”或“千年危机”。缩写为“Y2K]”。是指在某些使用了计算机…...

编程日记 2024/8/3 22:57:49

图的同态Graph Homomorphism与同构Graph Isomorphism

图的同态Graph Homomorphism 图的同态&#xff08;Graph Homomorphism&#xff09;是图论中的一个重要概念&#xff0c;用于描述图之间的一种映射关系。图的同态描述了一个图如何通过映射保留其边的结构。 ### 图的同态定义 设有两个图 \( G (V_G, E_G) \) 和 \( H (V_H, …...

编程日记 2024/8/3 22:55:47

使用 Python 对雷达卫星 sar 图像进行降噪的三种方法

合成孔径雷达 （SAR） 图像广泛应用于各种领域（航空航天、军事、气象等）。问题是这种图像在其原始格式中受到噪点的影响。虽然这些图像通常也是沉重的文件，但从科学的角度来看，有效地对其进行去噪的任务似乎既具有挑战性，又在现实世界中非常有用。 卫星图像有两大类： 光学…...

编程日记 2024/8/3 22:54:45

C# Unity 面向对象补全计划 之 初识继承方法与多态

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列旨在通过补全学习之后&#xff0c;给出任意类图都能实现并做到逻辑上严丝合缝 1.继承方法 C# & Unity 面向对象补全计划 之 继承&#xff08;字段与属性&…...

编程日记 2024/8/3 22:53:43

突破PyCharm索引瓶颈：提升文件索引速度的策略

突破PyCharm索引瓶颈&#xff1a;提升文件索引速度的策略 PyCharm作为Python开发者的首选IDE&#xff0c;以其强大的功能和灵活的配置而广受好评。然而&#xff0c;当处理大型项目或复杂文件结构时&#xff0c;文件索引慢的问题可能会显著降低开发效率。本文将提供一系列优化技…...

编程日记 2024/8/3 22:52:41

体素相关的快速计算

“体素”通常是指在三维空间中具有固定尺寸和位置的小立方体单元。 体素的优点包括&#xff1a; 易于处理和计算&#xff1a;在计算机图形学和三维建模中&#xff0c;体素的结构相对简单&#xff0c;计算和操作较为方便。能精确表示物体的内部结构&#xff1a;对于一些需要了…...

编程日记 2024/8/3 22:51:40

Python 爬虫项目实战（二）：爬取微博热搜榜

前言 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;也称为网页蜘蛛&#xff08;Web Spider&#xff09;或网页机器人&#xff08;Web Bot&#xff09;&#xff0c;是一种按照既定规则自动浏览网络并提取信息的程序。爬虫的主要用途包括数据采集、网络索引、内容抓…...

编程日记 2024/8/3 22:50:39

文件解析漏洞复现

一、IIS 6.X 1.在网站目录创建文件夹名为xxx.asp/xxx.asa 文件夹&#xff0c;里面的任意文件都会被当作asp文件执行 创建1.asp 访问 2.ooo.asp.jpg会被当做asp文件执行 创建一个ooo.asp;.jpg 访问 二、IIS 7.X 上传1.jpg文件在网址后/.php可以成功执行 写一个1.jpg文件内容…...

编程日记 2024/8/3 22:48:38

git push报错 pre-receive hook declined

今天使用git提交的代码的时候&#xff0c;不然报错 pre-receive hook declined提交不上去&#xff0c;昨天还好好的。 经过检查发现&#xff0c;原来对应的分支被leader设置成受保护分支了&#xff0c;导致代码提交不上去。 然后在git管理平台取消分支保护&#xff0c;或者将我…...

编程日记 2024/8/3 22:45:32

打造个性化代码审查工具：在Perl中实现自定义审查的艺术

打造个性化代码审查工具&#xff1a;在Perl中实现自定义审查的艺术 代码审查是软件开发过程中的关键环节&#xff0c;它有助于提高代码质量和发现潜在缺陷。Perl作为一种灵活的编程语言&#xff0c;提供了丰富的特性&#xff0c;使得在Perl中实现自定义的代码审查工具成为可能…...

编程日记 2024/8/3 22:44:31

RabbitMq架构原理剖析及应用

文章目录 RabbitMQ 架构组件1. **Broker** (Broker Server)2. **Exchange**3. **Queue**4. **Producer** (消息生产者)5. **Consumer** (消息消费者)6. **Virtual Hosts** (虚拟主机) 工作流程内部原理1. **队列管理**2. **集群**3. **持久化与内存**4. **性能优化** 高级特性1…...

编程日记 2024/8/3 22:43:29

c# 对接第三方接口实现签名

官网文档要求如下&#xff1a; Sign算法说明 举例&#xff1a;假设请求参数键值对如下 appkey : test2-xx page_no : 0 end_time : 2016-08-01 13:00:00 start_time : 2016-08-01 12:00:00 page_size : 40 sid : test2 timestamp : 1470042310 第一步 对数所有请求参数按照…...

编程日记 2024/8/3 22:40:27

数学建模评价类模型—层次分析法（无数据情况下）

目录 前言 一、评价类问题概述 二、AHP建模流程 1、过程描述 2、层次分析法—Matlab代码 三、权重计算 1、算术平均法 2、几何平均法 3、特征值法 目录 文章目录 前言 一、评价类问题概述 二、AHP建模流程 1、过程描述 2、层次分析法—Matlab代码 三、权重计算 算术平均法 前言…...

编程日记 2024/8/3 22:37:23

模拟实现strcat(字符串追加)

1.我们要知道stcat的作用是什么&#xff0c;字符串追加。 2.我们进行模仿&#xff0c;我们先将arr1不断&#xff0c;直到“\0”,我们加在后面。 //模拟实现strcat(字符串追加) char* my_strcat(char* arr1, const char* arr2) {assert(arr1 && arr2);char ret arr1;…...

编程日记 2024/8/3 22:36:22

网站建设流程信息/网络推广100种方法

使用..表示上一层目录&#xff0c;使用.表示当前目录。文件夹或文件前面有.&#xff0c;则表示是掩藏文件 Home&#xff0c;分为root的Home和一般用户的home Bin目录里存放了常用的执行档&#xff0c;例如date、cal等。Bin和usr/bin的内容大致相同。预设情况下Usr/local/bin是空…...

编程日记 2025/2/7 10:27:39

php 网站开发的来源/软文写作的基本要求

概述 本文为 WebSocket 协议的第七章&#xff0c;本文翻译的主要内容为 WebSocket 连接关闭相关内容。 关闭连接&#xff08;协议正文&#xff09; 7.1 定义 7.1.1 关闭 WebSocket 连接 要关闭 WebSocket 连接&#xff0c;终端需要关闭底层的 TCP 连接。终端需要使用一个方法来…...

编程日记 2025/2/7 9:17:28

wordpress大学教程/百度软件下载安装

JDBC&#xff08;Java DataBase Connectivity&#xff09; 称为&#xff1a;java访问数据库的解决方案&#xff0c;希望以相同的方式访问不同的数据库 目的&#xff1a;以实现与具体数据库无关的java操作。JDBC定义了一整套的标准接口&#xff0c;即访问数据库通用的API&#x…...

编程日记 2025/2/7 8:59:07

人民日报客户端跟人民日报的区别/前端seo主要优化哪些

您可插入连续的数字、显式值或重置在 SERIAL、BIGSERIAL 或 SERIAL8 列中值的显式值&#xff1a; 要插入连续的串行值 为 INSERT 语句中的串行列指定零&#xff08;0&#xff09;。在此情况下&#xff0c;数据库服务器指定下一最高值。 要插入显式值 首先验证在表中没有重复…...

编程日记 2025/2/7 8:46:59

dw怎么用div css做网站6/百度指数属于行业趋势及人群

企业级(299$)的开发者账号不能上传到App Store&#xff0c;通过一些分发平台比如说firm、蒲公英等又有一些下载限制&#xff0c;如果我们放到"自己"服务器来进行下载会是一种很好的选择&#xff0c;也是苹果推荐的方式。以无线方式安装企业内部应用(苹果官方文档)实现…...

编程日记 2025/2/7 5:13:11

怎么自己制作个网站/水果店推广营销方案

文章目录MLpython稀疏矩阵的存储和表示CSR格式CSR格式&#x1f388;NNZCoordinate list (COO)Compressed sparse row (CSR, CRS or Yale format)&#x1f388;三个数组根据ROW_INDEX划分数组V或COL_INDEX数组名称demos in scipyegeg冗余分析Yale sparse matrixCSR编码效益分析&…...

编程日记 2025/2/7 4:02:28