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

前端模块化

news 来源：原创 2025/6/8 2:27:12

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
1.概述
- 1.1什么是模块化
- 1.2为什么要使用模块化
2.有哪些模块化规范
3.CommonJS
- 3.1导入
- - 3.1.1正常导入
  - 3.1.2解构导入
- 3.2导出
- - 3.2.1exports导出
  - 3.2.2module.exports导出
- 3.3扩展
4.ECMAScript
- 4.1导入
- - 4.1.1全体导入
  - 4.1.2命名导入
  - 4.1.3默认导入
  - 4.1.4无接收导入
- 4.2导出
- - 4.2.1分别导出
  - 4.2.2统一导出
  - 4.2.3默认导出
- 4.3ES6规范在浏览器端和服务器端的使用
- - 4.3.1浏览器端
  - 4.3.2服务器端
总结

前言

前端模块化是学习node以及学习vue,react等框架必须掌握的内容，本文章将介绍前端模块化的几种标准。

1.概述

1.1什么是模块化

原本庞大的单份js文件按照一定规则拆分成多份
每个拆分的文件都是一个模块，各模块间相互隔离
模块可以自行决定将自己内部的属性和方法暴露出去

1.2为什么要使用模块化

没使用模块化前可能存在以下问题：

全局污染（命名冲突）：当一个页面中引入了两个或以上js文件，并且这些文件有冲突（有同名的属性、方法），那么就会导致其中一些方法或属性失效（后引入的覆盖先引入的）。
依赖混乱：在不使用模块化的情况下，我们在使用三方的包时，需要先引入该三方包依赖的其它包，甚至还要进一步引入依赖包的依赖包。并且这些依赖包还必须在使用它的包之前引入。这导致我们想要使用一个三方包不得不关联引入很多其他的依赖，并且还必须注意引入的顺序。

比如：如果我们要使用BootStrap就必须关联引入JQuery和tether,并且顺序都得在Bootstrap之前
在这里插入图片描述

数据安全：所有的数据都放在一个作用域中，可能被其他模块误修改。以及其他一些安全问题。

2.有哪些模块化规范

发展至今，有很多可用的模块化规范，但主流的有两种：

commonJS:nodeJS的默认规范，服务器端应用广泛（用node写的服务器）
ECMAScript:现行的框架使用的规范（vue,react）,浏览器端应用广泛

3.CommonJS

3.1导入

3.1.1正常导入

格式：
const 变量= require(‘文件路径’);
补充：如果要导入的文件并没有导出任何东西，那么我们会得到一个空对象。
在这里插入图片描述

于是可用看出，commonjs本质上是创建出一个空对象，然后将模块中导出的元素丢进去，再传递给导入方使用。

3.1.2解构导入

既然说我们导入的是一个对象，那么我们可以使用赋值解构，来在导入时直接将属性提取出来。
格式：
const {变量1,变量2……}=require(‘文件路径’);

解构对象时会把对象中的属性和方法，赋值给同名的变量.
但是也可以在接收时重新起别名
在这里插入图片描述

3.2导出

上面我们说commonJS是提前创建出一个空对象然后往里面装东西来完成模块操作。那么我们要进行导出操作，就是要得到这个对象，然后把要导出的东西放进去。
如何获取这个对象？CommonJS中提供了以下变量来指向该对象：

exports
module.exports
this

3.2.1exports导出

格式:
exports.自定义变量名=要导出的属性或方法
在这里插入图片描述

3.2.2module.exports导出

格式：
module.exports={
自定义变量名:要导出的属性或方法
}

补充：当自定义变量名和要导出的属性或方法名相同时，可以省略:以及以后内容。详情看下图
在这里插入图片描述

3.3扩展

在CommonJS规范中，模块中我们自定义的代码，会被封装到另一个函数中，该函数中提供了exports等变量，所以我们才可以使用这些变量进行导出。

4.ECMAScript

4.1导入

4.1.1全体导入

格式：
import * as 别名 from ‘文件路径’

4.1.2命名导入

格式：
import {变量名1，变量名2……} from ‘文件路径’
也可以为获取的属性起别名：
import{变量名1 as 别名1,变量名2 as 别名2} from ‘文件路径’

注意：只有在分别导出和统一导出时能够使用命名导入。

4.1.3默认导入

格式：
import 自定义名称 from ‘文件路径’

注意：在使用默认导出时才可以使用默认导入，并且名称可以自定义

4.1.4无接收导入

有时一些js模块中可能不会提供变量和函数，而是为了执行一些方法，那么我们只要直接用import导入执行即可，并不需要变量接收

在这里插入图片描述

4.2导出

4.2.1分别导出

直接在属性或方法前添加export修饰即可。
在这里插入图片描述

4.2.2统一导出

格式：
export {属性或方法名1,属性或方法名2}
在这里插入图片描述

注意：这里导出虽然使用了{}，但其并不代表一个对象。

4.2.3默认导出

格式：
export default 值

注意：这种导出方式，本质是导出一个键值对，键是"default",值就是后面跟的东西，可以是常量、变量、方法。如果要批量导出也可以使用数组和对象

4.3ES6规范在浏览器端和服务器端的使用

4.3.1浏览器端

虽然我们已经可以完成不同js模块间的导入和导出，那如何应用到页面中呢？我们使用以前在html中引入js文件的方式试试，发现有问题：
在这里插入图片描述

可以看出，引入普通js文件的方式，是不能用来引入ES6规范下的js文件的。
我们需要更改type类型为module:
在这里插入图片描述

4.3.2服务器端

虽然我们说node运行的js文件中默认使用commonJS规范，但是ES6也是可以用在服务器端的。
首先，直接使用node运行ES6的文件是会出问题的，我们直接用node运行代码如下：
在这里插入图片描述

我们有以下方法可以用node运行ES6规范的代码：

将所有使用ES6标准的代码文件后缀改为mjs
在package.sjon配置文件中添加配置项"type" : “module”

在这里插入图片描述

总结

本文章介绍了前端模块化的几种标准，以及各自的导入和导出方式。

前端模块化

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言1.概述1.1什么是模块化1.2为什么要使用模块化 2.有哪些模块化规范3.CommonJS3.1导入3.1.1正常导入3.1.2解构导入 3.2导出3.2.1exports导出3.2.2module.exports导…...

编程日记 2025/6/3 8:20:45

在VMware虚拟机上设置Ubuntu与主机共享文件夹

‌在VMware虚拟机上设置Ubuntu与主机共享文件夹的步骤如下‌： ‌主机共享文件夹的设置‌：首先，在主机上选择一个磁盘分区创建一个文件夹，并设置其共享属性。右键点击该文件夹，选择“属性”，然后在“共享”选…...

编程日记 2025/6/2 18:23:31

无线信道常识（符号与多径、窄带与宽带）

符号长度与时延扩展符号长度： 符号长度是指一个符号（即一个信息单元）在传输过程中所占用的时间。符号长度通常与系统的带宽和调制方式有关。例如，在GSM系统中，符号长度大约为 5μs。时延扩展： 时延扩展是…...

编程日记 2025/6/4 6:55:30

人工智能 (AI) 模型的数据泄露问题

目录 1. 数据泄露:2. 模型泄露:3. 社会工程学攻击:参考文献:其他资源: 人工智能 (AI) 模型的数据泄露问题指的是模型训练过程中，训练数据的信息被泄露到模型输出中，导致模型对未见过的数据产生偏差或错误预测。这种泄露可能来自多个方面，包括…...

编程日记 2025/5/30 17:01:25

uniapp Vue3 语法实现浏览器中音频录制、停止、保存、播放、转码、实时音频输出

一、引言在现代 Web 应用开发中，音频处理功能变得越来越重要。本文将详细介绍如何使用 uniapp 结合 Vue3 语法在浏览器环境中实现音频录制、停止、保存、播放、转码以及实时音频输出等一系列功能。通过深入剖析代码结构和功能实现细节，帮助读者全面理解和掌握相关技术，以便…...

编程日记 2025/6/3 3:41:19

OSPF的基本配置

基本原理图 1. 要求： R1-3为区域0，R3-R4为区域1；其中r3的环回也在区域0。R1,R2也各有一个环回 R1-R3 R3为DR设备，没有BDR R4环回地址以固定，其他所有网段使用192.168.1.0/24进行合理的分配 R4环回不能宣告&#xff0…...

编程日记 2025/6/1 4:07:48

【Flutter_Web】Flutter编译Web第二篇（webview篇）：flutter_inappwebview如何改造方法，变成web之后数据如何交互

前言欢迎来到第二篇文章，这也是第二个难题，就是原有的移动端本身一些页面H5的形式去呈现（webview），例如某些需要动态更换内容的页面，某些活动页面、支付页面，不仅仅做页面呈现，还包…...

编程日记 2025/6/2 6:33:33

【游戏中orika完成一个Entity的复制及其Entity异步落地的实现】 1.ctrl+shift+a是飞书下的截图 2.落地实现

一、orika工具使用 1)工具类 package com.xinyue.game.utils;import ma.glasnost.orika.MapperFactory; import ma.glasnost.orika.impl.DefaultMapperFactory;/*** author 王广帅* since 2022/2/8 22:37*/ public class XyBeanCopyUtil {private static MapperFactory mappe…...

编程日记 2025/6/2 1:57:44

全局JDK环境和ES自带的JDK混用导致的ES集群创建失败

es配置安全集群es使用的自带的jdk环境，如果服务器全局在有jdk的配置。会导致秘钥解析出问题。各种问题异常密钥解析异常。错误日志1： [2024-12-20T17:10:44,700][WARN ][o.e.c.c.ClusterFormationFailureHelper] [es-node1] master not discovered yet…...

编程日记 2025/6/1 20:46:14

vmime.net_4.dll详解：它是什么，有何用途？

在.NET开发环境中，DLL（Dynamic Link Library，动态链接库）文件扮演着至关重要的角色。它们封装了代码和资源，使得多个应用程序可以共享这些功能，从而提高开发效率和代码复用性。本文将详细介绍vmime.net_4.d…...

编程日记 2025/6/3 16:50:35

K8s 节点 NotReady 后 Pod的变化

NotReady 后 Pod的变化当Kubernetes（K8s）节点进入NotReady状态时，该节点将无法接收新的Pod调度，这可能会影响服务的可用性。以下是节点变为NotReady后，其上Pod状态可能发生的一些情况和细节： Pod状态变为…...

编程日记 2025/6/2 0:01:58

使用 esrally race 测试 Elasticsearch 性能：实践指南

在 Elasticsearch 性能优化和容量规划中，使用 esrally 进行基准测试是官方推荐的方式。通过 esrally race 命令，您可以针对不同的数据集与挑战类型，对 Elasticsearch 集群进行精确的性能评估。本文将简要介绍常用的数据集与挑战类型&#xff…...

编程日记 2025/6/3 13:11:41

对象、函数、原型之间的关系

在 JavaScript 中，对象、函数和原型是三者紧密联系的核心概念。它们共同构成了 JavaScript 中面向对象编程的基石，并通过原型链实现了继承与代码复用。本文将从对象、函数、原型的基础概念到它们之间的关系进行详细的讲解，帮助你理解 Java…...

编程日记 2025/5/28 19:55:00

Showrunner AI技术浅析（二）：大型语言模型

1. GPT-3模型架构详解 GPT-3是基于Transformer架构的预训练语言模型，由OpenAI开发。其核心思想是通过自注意力机制（Self-Attention）处理输入序列，并生成自然语言文本。 1.1 Transformer架构基础 Transformer架构由Vaswani等人在…...

编程日记 2025/6/4 2:43:15

Web安全攻防入门教程——hvv行动详解

Web安全攻防入门教程 Web安全攻防是指在Web应用程序的开发、部署和运行过程中，保护Web应用免受攻击和恶意行为的技术与策略。这个领域不仅涉及防御措施的实现，还包括通过渗透测试、漏洞挖掘和模拟攻击来识别潜在的安全问题。本教程将带你入门Web安全攻防…...

编程日记 2025/6/3 13:26:11

买卖股票的最佳时机 - 合集

************* C 买卖股票问题合集 ************* Since I have finished some stocks problems. I wanna make a list of the stocks to figure out the similarities. Here is the storks topucs list, from easy to hard: 121. 买卖股票的最佳时机 - 力扣（L…...

编程日记 2025/6/1 3:57:57

gitlab window如何设置ssh

在GitLab中设置SSH需要以下步骤： 在GitLab账户中，导航到“用户设置”下的“SSH密钥”部分。生成SSH密钥对（如果你还没有的话）。在Windows上，你可以使用ssh-keygen命令来生成密钥。在命令提示符或PowerShell中运行以…...

编程日记 2025/5/29 6:09:49

go配置文件

https://github.com/spf13/viper viper golang中常用的配置文件工具为viper库，是一个第三方库。viper功能： 解析JSON、TOML、YAML、HCL等格式的配置文件。监听配置文件的变化(WatchConfig)，不需要重启程序就可以读到最新的值。...

编程日记 2025/6/4 1:58:10

深度学习之超分辨率算法——SRGAN

更新版本实现了生成对抗网络在超分辨率上的使用更新了损失函数，增加先验函数 SRresnet实现 import torch import torchvision from torch import nnclass ConvBlock(nn.Module):def __init__(self, kernel_size3, stride1, n_inchannels64):super(ConvBlock…...

编程日记 2025/6/4 16:30:57

GIT命令使用手册（详细实用版）

一、git常用操作参考第一次提交完整步骤： 1.git init; 2.git add . 3.git commit -m "初始化" 4.git remote add origin https://github.com/githubusername/demo.git 5.git pull origin master 6.git push -u origin master（使用-u选项可以将…...

编程日记 2025/5/30 13:51:33

数据分析实战—IMDB电影数据分析

1.实战内容 1.加载数据到movies_df，输出前5行，输出movies_df.info(),movies_df.describe() # （1）加载数据集，输出前5行 #导入库 import pandas as pd import numpy as np import matplotlib import matplotlib.pyplo…...

编程日记 2025/6/2 18:00:12

【SQL/MySQL 如何使用三种触发器】SQL语句实例演示

触发器介绍 – 触发器是与表有关的数据库对象，指在insert/update/delete之前(BEFORE)或之后(AFTER)，触发并执行触发器中定义的SQL语句集合。 – 使用别名OLD和NEW来引用触发器中发生变化的记录内容，这与其他的数据库是相似的。现在触发器还只…...

编程日记 2025/5/30 3:12:02

社区团购管理系统（源码+数据库）

355.基于SpringBoot的社区团购管理系统，系统包含两种角色：管理员、用户,系统分为前台和后台两大模块，主要功能如下二、项目技术编程语言：Java 数据库：MySQL 项目管理工具：Maven 前端技术：Vue …...

编程日记 2025/6/3 23:36:03

时钟分频模块

实现时钟的二分频，四分频 1.时钟分频模块： module clk_div(input clk, //50Mhzinput rst_n,input [15:0] lcd_id,output reg lcd_pclk);reg clk_25m; reg clk_12_5m; reg …...

编程日记 2025/6/3 1:32:03

linux ipmitool配置机器的BMC（服务器管理后台）

前置：mgnt口和网卡1连接入内网，并分配静态ip 1. 安装 ipmitool Debian/Ubuntu: sudo apt-get update sudo apt-get install ipmitool CentOS/RHEL: sudo yum install ipmitool2. 配置 BMC 的 IP 地址 #打印当前ipmi 地址配置信息。 ipmitool lan p…...

编程日记 2025/6/2 19:21:34

【Springboot知识】Redis基础-springboot集成redis相关配置

文章目录 1. 添加依赖2. 配置Redis连接3. 配置RedisTemplate（可选）4. 使用RedisTemplate或StringRedisTemplate5. 测试和验证集群配置在application.properties中配置在application.yml中配置主从配置1. 配置Redis服务器使用配置文件使用命令行 2. 配置…...

编程日记 2025/6/4 6:49:59

【数据结构】八大排序

目录一、直接插入排序二、希尔排序三、选择排序四、堆排序五、冒泡排序六、快速排序七、归并排序八、计数排序稳定性结论稳定性：排序后相同元素之间的相对顺序是否保持不变。一、直接插入排序基本思想：通过构建有序序列&#xff…...

编程日记 2025/6/2 21:11:05

mmdetection：图片推理以及将预测标签转换为YOLO格式标签

本文记录了使用 mmdetection 进行图片推理，并将推理结果坐标格式转换为yolo格式保存在txt中的代码。文章目录一、图片推理二、批量处理一、图片推理一个图片推理的demo。 import os import mmcv from mmdet.apis import init_detector, inference_detector fr…...

编程日记 2025/5/31 10:33:56

CV-OCR经典论文解读|An Empirical Study of Scaling Law for OCR/OCR 缩放定律的实证研究

论文标题 An Empirical Study of Scaling Law for OCR OCR 缩放定律的实证研究论文链接： An Empirical Study of Scaling Law for OCR论文下载论文作者 Miao Rang, Zhenni Bi, Chuanjian Liu, Yunhe Wang, Kai Han 内容简介本论文在光学字符识别&#xf…...

编程日记 2025/6/3 0:06:47

从混沌到秩序：Python的依赖管理工具分析

Python 的依赖管理工具一直没有标准化，原因主要包括： 历史发展的随意性：Python发展早期对于依赖管理的重视程度不足，缺乏从一开始就进行统一规划和设计的意识社区的分散性：Python社区庞大且分散，众多开发…...

编程日记 2025/6/2 14:11:45

【系统】Windows11更新解决办法，一键暂停

最近的windows更新整的我是措不及防，干啥都要关注一下更新的问题，有的时候还关不掉，我的强迫症就来了，非得关了你不可！ 经过了九九八十一难的研究之后，终于找到了一个算是比较靠谱的暂停更新的方法&#x…...

编程日记 2025/6/4 7:18:08

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书一、下载影刀： https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…...

编程日记 2025/5/31 6:34:39

【原生js案例】前端封装ajax请求及node连接 MySQL获取真实数据

上篇文章，我们封装了ajax方法来请求后端数据，这篇文章将介绍如何使用 Node.js 来连接 MySQL，并对数据库进行操作。实现效果代码实现后端接口处理 const express require("express"); const connection require("../da…...

编程日记 2025/6/3 4:59:26

Ubuntu将深度学习环境配置移植到新电脑

这里默认新电脑已经安装好了conda、CUDA这些，可以直接创建新的虚拟环境。参考链接： https://blog.csdn.net/Chujun123528/article/details/143788565https://blog.csdn.net/qq_41779275/article/details/122868946https://blog.csdn.net/YajunLin/art…...

编程日记 2025/6/2 23:26:17

vue基础作业实验十

vue基础作业实验十实验要求案例要点：代码以及思考style部分Vue.js 部分Vue 实例部分这段代码是一个基于 Vue.js 的静态页面，功能包括商品品牌的添加、删除和搜索。实验要求一、实验的基本内容 （1）Vue模板语法。 &#xff08…...

编程日记 2025/6/4 6:02:21

冒泡排序（JAVA）

package com.guangyunl.f_array;import java.util.Random; import java.util.Scanner;// 数组的冒泡排序 // 冒泡排序法是采用数组中相邻元素进行比较换位 public class Demo02Bubble {public static void main(String[] args) {Demo02Bubble demo02Bubble new Demo02Bubble()…...

编程日记 2025/6/1 5:55:16

如何测量分辨率

一、什么是分辨率？ 分辨率指的是分清物体细节的能力。分辨率是一个成像系统还原空间频率的能力。一些人只是简单的用分辨率去描述极限分辨率，但是相机在在不同的对比度的情况下还原低，中和高频率的能力，也可以显示全面综合的信息。…...

编程日记 2025/6/1 15:46:46

【Mysql索引优化】索引优化的最佳实现

文章目录【Mysql优化】索引优化的最佳实现1. 全值匹配：索引的最佳使用方式2. 最左前缀法则3. 尽量使用覆盖索引：优化查询性能。减少 select \* 语句4. 范围查询优化5. 不在索引列上做任何操作（计算、函数、（自动or手动&#xff0…...

编程日记 2025/6/3 1:48:39

centos使用mkisofs构建无人值守镜像（附官方学习文档）

安装mkisofs yum install -y mkisofs 挂载镜像并确认并拷贝文件(/mnt 为我们的工作目录) 1.3 准备自动应答文件(保存为 ins.ks) 修改系统引导实际上就是添加inst.ks 这个引导参数传递应答文件传统模式引导 UEFI模式引导打包镜像通用选项 -v：启用详细模式&a…...

编程日记 2025/6/3 0:21:51

Python获取当前系统中可用的串口设备

import serial.tools.list_portsdef checkDevice(self):port_data []for port in serial.tools.list_ports.comports():port_data.append(port.description)if port_data:for devInfo in port_data:self.toolLogPrinting(可用设备 devInfo)RET Trueelse:self.toolLogPrinti…...

编程日记 2025/6/1 1:00:21