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

前端进阶之——模块化

news 2026/2/8 17:31:40

在做项目的时候越来越发现模块化的重要性，做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率，接下来整理一下模块化相关知识吧。

模块化开发的优点

封装方法、提高代码的复用性、可维护性和可读性
隔离作用域，避免污染全局作用域
避免变量冲突

模块化开发的各种方法

立即执行函数（IIFE）

立即执行函数来创建模块，将私有成员放在函数作用域以内，不暴露在外部。将公共的方法返回。

var module = (function() {var privateVar = 'Private Variable';function privateMethod() {console.log('This is a private method');}function publicMethod() {console.log('This is a public method');}return {publicMethod: publicMethod};
})();module.publicMethod(); // Output: This is a public method

CommonJS：

node中自带的，同步使用require导入模块，module.exports或exports导出模块，适用于服务器端。

// math.js
function add(a, b) {return a + b;
}function subtract(a, b) {return a - b;
}module.exports = {add,subtract
};// app.js
const math = require('./math');
console.log(math.add(2, 3)); // Output: 5
console.log(math.subtract(5, 2)); // Output: 3

AMD（Asynchronous Module Definition）

使用define定义模块，异步加载模块，适用于浏览器、按需加载模块

// math.js
define([], function() {function add(a, b) {return a + b;}function subtract(a, b) {return a - b;}return {add,subtract};
});// app.js
require(['math'], function(math) {console.log(math.add(2, 3)); // Output: 5console.log(math.subtract(5, 2)); // Output: 3
});

CMD

使用define定义模块，异步加载模块，适用于浏览器、就近依赖

define(function(require, exports) {// 对外提供name属性exports.name = 'myModule';// 对外提供hello方法exports.hello = function() {console.log('Hello myModule');};
});

<!DOCTYPE html>
<html><head><script type="text/javascript" src="sea.js"></script><script type="text/javascript">//加载一个模块，在加载完成时，执行回调seajs.use('myModule', function(a) {console.log(a.name);a.hello();});</script></head><body></body>
</html>

ES6模块

使用 import 导入模块，使用 export 导出模块，浏览器与服务器通用

// math.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}// app.js
import { add, subtract } from './math';console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3

异步加载JS有哪些方法

1 设置<script>属性async = 'async'

脚本将异步加载并立即执行，不会阻塞页面的解析和渲染、加载完成后，将在页面任何位置执行

<script src='script.js' async="async"><script>

2 动态创建script DOM:

使用JS动态创建<script>元素，通过设置src属性指定脚本的URL，

var script = document.creatElement('script');
script.src = 'script.js';
document.head.appendChild(script)

3 defer属性

<script src="script.js" defer></script>

4 XmlHttpRequest脚本注入

利用对象加载脚本内容，将其注入到页面当中，使用eval（）函数执行脚本。

var xhr = new XMLHttpRequest();
xhr.open('GET','script.js',true);
xhr.onreadystatechange = function(){if(xhr.readyState === 4 && xhr.status === 200){eval(xhr.responseText);}
};
xhr.send();

5 异步加载库LABjs

LABjs是一个异步加载JS的库，可以控制JS的加载顺序，可用它来的API定义和加载依赖关系。

 
$LAB.script('A.js').wait().script('B.js')

6 模块加载器 Sea.js

用于web端模块化开发的加载器，可以异步加载和管理模块，加载完成后执行回调函数。

seajs.use(['module1','module2'],function(module1,module2){console.log('Hello')
});

7 Dederred Scripts(延迟脚本)：

defer属性可以将脚本延迟到文档解析之后再执行，并且会按照他们在文档中出现的顺序执行，但在DOMContentLoaded事件触发之前执行。

<script src="script.js" defer></script>

8 Dynamic Import(动态导入)：

import()可以异步加载JS模块，并返回一个Promise对象，链式调用

import('module.js').then(module => {// 执行模块加载完成后的逻辑}).catch(error => {// 处理加载失败的情况});

9 Web Workers（Web工作者）

Web Workers运行在后台的JS脚本，可以耗时操作而不会阻塞主线程。
可以异步加载和执行JS脚本，提高页面的响应性

var worker = new Worker('worker.js');
worker.onmessage = function(event) {// 处理从 Worker 返回的消息
};
worker.postMessage('start');

参考文章

前端进阶之旅

第25题谈谈模块化的发展历程以及各自的特_请定义一个文件模块mymodule.js,定义一个name变量及一个sayhello的方法,暴露_crazy的蓝色梦想的博客-CSDN博客

前端进阶之——模块化

在做项目的时候越来越发现模块化的重要性，做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率，接下来整理一下模块化相关知识吧。模块化开发的优点封装方法、提高代码的复用性、可维护性和可读性隔离作用域，避免污染全…...

编程日记 2023/9/2 22:02:22

Python爬虫抓取表情包制作个性化聊天机器人

在现代社交媒体和即时通讯应用中，使用表情包已经成为一种流行的沟通方。本文将介绍如何利用Python编写一个简单而有趣的聊天机器人，并通过爬虫技术来抓取各类表情包，使其具备个性化特点。　　1.确定需求与功能　　-定义聊天机器人需要实现哪…...

编程日记 2023/9/2 22:01:20

使用pip命令安装库，装到其他环境中的问题。

问题描述：我们在pycharm中创建了新的虚拟环境，但是在其终端使用Pip命令安装库时，发现库却安装到了其他conda创建的环境中。图示安装gym库，刚开始安装到了其他地方，第二次正确安装。原因分析：安装库时&…...

编程日记 2023/9/2 22:00:18

如何使用CSS实现一个带有动画效果的进度条？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ HTML 结构：⭐ CSS 样式：⭐ 写在最后 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界记得点击上方或者右侧链接订阅本专栏哦几何带你启航前端之旅欢迎来到前端入门之旅！这个专栏是为那…...

编程日记 2023/9/2 21:59:17

uni-app 报错 navigateTo:fail page “/pages/.../...“ is not found

这个错误的意思是：识别不到该页面错误可能一：没有在 pages.json【微信小程序是 app.json】中定义该页面的路径如： pages.json "pages": [{"path": "pages/index/index" }, {"path": "pag…...

编程日记 2023/9/2 21:58:16

【unity插件】使用BehaviorDesigner插件制作BOSS的AI行为树

文章目录前言素材插件一、基础使用二、敌人物理攻击三、敌人面向玩家四、敌人法术攻击五、随机进行攻击六、敌人不同的阶段推荐学习视频源码完结前言 Behavior Designer是一个行为树插件，是一款为了让策划，程序员，美术人员方便使用的可视化…...

编程日记 2023/9/2 21:57:15

概念解析 | 量子机器学习：将量子力学与人工智能的奇妙融合

注1：本文系“概念解析”系列之一，致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是：量子机器学习。量子机器学习：将量子力学与人工智能的奇妙融合量子增强机器学习：量子经典混合卷积神经网络量子机器学习是量子计算和机器学习的结合，它利用量子力学的特…...

编程日记 2023/9/2 21:56:14

【Cortex-M3权威指南】学习笔记4 - 异常

目录实现 CM3流水线CM3 详细框图CM3 总线接口总线连接模板异常异常类型优先级定义优先级组向量表中断输入于挂起NMI中断挂起 Fault 类异常总线 faults存储器管理 faults用法 faults SVC 与 PendSV 实现 CM3 流水线 CM3 处理器使用 3 级流水线，分别是：…...

编程日记 2023/9/2 21:55:12

RISC-V(2)——特权级及特权指令集

目录 1. 特权级 2. 控制和状态寄存器（CSR） 2.1 分类 2.2 分析 1. 特权级一个 RISC-V 硬件线程（hart）是运行在某个特权级上的，这个特权级被编码到一个或者多个 CSR（control and status register&a…...

编程日记 2023/9/2 21:54:11

Linux——常用命令大汇总（带你快速入门Linux）

纵有疾风起，人生不言弃。本文篇幅较长，如有错误请不吝赐教，感谢支持。 💬文章目录一.终端和shell命令解析器终端和shell命令解析器概述终端提示符的格式常用快捷键二.Linux命令格式帮助文档：man 三.目录基础知识Wind…...

编程日记 2023/9/2 21:53:10

记录使用 git 克隆仓库报错：Warning: Permanently added‘github.com’ to the .....（ssh ）

解决方法： 1. 新建空文件夹->右键->点击 Git Bash Here2. 输入 cd C：3. 输入 cat ~/.ssh/id_rsa.pub4. 输入 ssh-keygen重复回车，生成一个矩形，则说明公钥已经生成了。重复步骤3，生成publickey，右键…...

编程日记 2023/9/2 21:52:09

kafka---- zookeeper集群搭建

1.准备工作: ##准备3个节点，要求配置好主机名称，服务器之间系统时间保持一致 ##注意/etc/hostname 和/etc/hosts 配置主机名称(在这个里我准备Prac-zk-133, Prac-zk-134 , Prac-zk-135二节点) vim /etc/hosts #保证可以通过主机名互通添加格式为IP 主…...

编程日记 2023/9/2 21:51:08

linux安装firefox

1.下载对应包 https://www.mozilla.org/en-US/firefox/all/#product-desktop-release 2. 挂载桌面链接(如果/usr/bin/firefox下有的话,先删除) ln -s /opt/firefox/firefox /usr/bin/firefox 3.执行以下命令，即可启动Firefox客户端： firefox...

编程日记 2023/9/2 21:50:07

MySQL 基础语句一、DDL 数据库定义语言 1.1CREATE 创建 1.1.1 创建数据库语法结构 CREATE DATABASE database_name;示例 CREATE DATABASE demo;1.1.2 创建表语法结构 CREATE TABLE 表名 (列1 数据类型,列2 数据类型,... );示例 CREATE TABLE new_user (id INT PRIMARY KE…...

编程日记 2023/9/2 21:49:06

【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮

编程日记 2023/9/2 21:48:05

9.2 【C语言】使用结构体数组

一个结构体变量中可以存放一组有关联的数据（如一个学生的学号、姓名、成绩等数据），如果有10个学生需要参加运算，显然应该用数组，这就是结构体数组。 9.2.1 定义结构体数组例9.3 有三个候选人，每个选民只…...

编程日记 2023/9/2 21:47:04

leetcode原题：最小值、最大数字

题目1：最小值给定两个整数数组a和b，计算具有最小差绝对值的一对数值（每个数组中取一个值），并返回该对数值的差示例： 输入：{1, 3, 15, 11, 2}, {23, 127, 235, 19, 8} 输出：3&…...

编程日记 2023/9/2 21:46:02

Prompt2Model: Generating Deployable Models from Natural Language Instructions

本文是LLM系列文章，针对《 Prompt2Model: Generating Deployable Models from Natural Language Instructions》的翻译。 Prompt2Model：从自然语言指令生成可部署模型摘要1 引言2 Prompt2Model框架3 参考实现4 实验设置5 实验结果6 讨论与结论不足道德…...

编程日记 2023/9/2 21:45:01

前端埋点 sendBeacon 替代方式

看英文文档真的很重要 sendBeacon 限制比较多, 容易跨域, 跨域时候还必须指定请求头, 不能使用通配符来解决跨域文档地址文档里面说 fetch 其实可以代替 sendBeacon 原文: Note: For use cases that need the ability to send requests with methods other than POST, or …...

编程日记 2023/9/2 21:44:00

面试官问我MySQL和MariaDB的联系和区别，这我能不知道？

🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验，历任核心研发工程师…...

编程日记 2023/9/2 21:42:58

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 （结构体大小计算及位段详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

无法与IP建立连接，未能下载VSCode服务器

如题，在远程连接服务器的时候突然遇到了这个提示。查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

编程新知 2026/1/24 13:05:24

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...

编程新知 2025/11/30 11:30:47

聊一聊接口测试的意义有哪些？

目录一、隔离性 & 早期测试二、保障系统集成质量三、验证业务逻辑的核心层四、提升测试效率与覆盖度五、系统稳定性的守护者六、驱动团队协作与契约管理七、性能与扩展性的前置评估八、持续交付的核心支撑接口测试的意义可以从四个维度展开，首…...

编程新知 2025/10/14 6:46:13