什么是DOM?
概念 DOM(Document Object Model , 文档对象模型) ； 简单来说，浏览器会将整个网页看成一棵节点树；而Js语言需要通过一种动态的技术去操作这棵树，这种技术就是DOM 一张网页的树性结构 例如下面这张代码的网页 <!DOCTYPE html> <html lang="en"> ...
pnpm 管理依赖包是如何节省磁盘空间的？
npm 存在的问题 我们经常使用 npm 来管理 node 项目中的包，从 package.json 中读取配置将依赖下载到本地，以保障项目的正常运行。 当项目数量多时，这样的包管理方式会非常的占用电脑内存。由于每个项目都有属于自己的依赖，每个项目都需要安装，即使 npm 会对依赖进行缓存，但是每个 ...
一个简易的SubScribe类
SubScribe即发布订阅模式，在工作中有着广泛的应用，比如跨组件通信，微前端系统中跨子应用通信等等。 以下是一个简易的实现： 订阅 初始化时可限制类型 发布 限制类型是为了让订阅者和发布者知道预制了哪些类型，避免使用了一些对方不知道的类型。 type Subscriber<T> = (param ...
Webpack.devServer 配置项如何使用？附devServer完整示例
前言: 我们在平常本地开发时，可能经常需要与后端进行联调，或者调用一些api，但是由于浏览器跨域的限制、开发与生产环境的差异、http与https等问题经常让联调的过程不够顺畅。所以本文介绍一下webpack的devServer中的proxy配置项。接下来让我们先看一下这个配置项的基本使用： 基本使 ...
JavaScript BOM对象
一、window对象 顾名思义window是窗口的意思，也就是浏览器的窗口，所有浏览器都支持window对象，因此所有的JavaScript全局对象，函数，变量都是window对象的成员 全局变量是window对象的属性 全局函数是window对象的方法 子对象： 属性： 方法： 二、locatio ...
JavaScript事件
JavaScript事件 键盘事件：keypress键盘事件，keyup抬起，keydown按下 文档：load加载 表单：focus获得焦点，blur失去焦点，submit提交事件，change改变事件 其他：scroll滚动事件，select start选择事件 1. event事件对象常见的属 ...
JavaScript事件
一、 JavaScript事件 在前端中，页面的每次交互和特效都是一个事件，其中任何一个html元素都是一个事件源，一个很事件源可以添加多个事件。 二、 事件中的event对象 只要发生一个事件就会产生一个event事件，event代表事件的状态 1、event事件常见的属性和状态 2、阻止默认事件 ...
nodejs 实现MQTT协议的服务器端和客户端的双向交互
一、项目背景 公司和第三方合作开发一个传感器项目，想要通过电脑或者手机去控制项目现场的传感器控制情况。现在的最大问题在于，现场的边缘终端设备接入的公网方式是无线接入，无法获取固定IP，所以常规的HTTP协议通信就没法做，现在打算使用MQTT来实现云平台和边缘终端（传感器）之间的双向通信。 二、术语定 ...
offscreenCanvas+worker+IndexedDB实现无感大量图片缓存
一个有必要实现的需求 因为项目中需要使用canvasTexture(一个threejs3d引擎中的材质类型)，绘制大量的图片，每次使用都会请求大量的oss图片资源，虽然重复请求会有磁盘缓存但毕竟这个磁盘缓存时效过短， 这里需要了解一下知识才能正常阅读。 Transferable objects ht ...
js内置对象
Js 标准内置对象 Object Object 是 JavaScript 的一种数据类型。它用于存储各种键值集合和更复杂的实体。可以通过 Object() 构造函数或者使用对象字面量的方式创建对象。 Object.assign() Object.assign() 静态方法将一个或者多个源对象中所有可 ...
JS判断点是否在线段上
本文利用向量的点积和叉积来判断点是否在线段上。 基础知识补充 从零开始的高中数学——向量、向量的点积、带你一次搞懂点积（内积）、叉积（外积）、Unity游戏开发——向量运算（点乘和叉乘 说明 点积可以用来判断两个向量的夹角，如果这个夹角是0或者180度，说明这个点在直线上； 叉积可以用来判断一个点到 ...
一个常见的 JavaScript 解构陷阱
在日常的 JavaScript 编码中，我们经常使用解构语法来提取对象中的属性。假设我们有一个名为 fetchResult 的对象，代表从接口返回的数据，其中包含一个字段名为 data。 const fetchResult = { data: null }; 在提取 data 字段时，为了避免接口未 ...
【万字长文】前端性能优化实践
从一个假死页面引发的思考： 作为前端开发，除了要攻克页面难点，也要有更深的自我目标，性能优化是自我提升中很重要的一环； 在前端开发中，会偶遇到页面假死的现象， 是因为当js有大量计算时，会造成 UI 阻塞，出现界面卡顿、掉帧等情况，严重时会出现页面卡死的情况； ...
原生JS实现视频截图
本文介绍使用canvas的drawImage进行视频截图，并用toDataURL和toBlob转化为图片地址的方法，且重点介绍了将bold信息转化为图片地址的方法。 ...
浏览器事件循环Event Loop
事件循环不是浏览器独有的，从字面上看，“循环”可以简单地认为就是重复，比如for循环，就是重复地执行for循环体中的语句，所以事件循环，可以理解为重复地处理事件，那么下一个问题是，处理的是什么事件，事件的相关信息从哪里获取。 ...
VSCode ESLint规则警告屏蔽方法
举例：要屏蔽“Missing trailing comma”或“comma-dangle”警告，你可以使用ESLint的配置选项来设置规则。下面是一些方法，你可以根据自己的需求选择其中一种(这里只是举例，其他警告处理方法相同) 方法1：在代码中添加注释来禁用规则 在你希望屏蔽警告的代码行的上方添加如 ...
JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历
一、创建Date对象 var dateObj=new Date(); var now = Date.now() 当前时间 二、Date方法 1、将日期转为字符串 toLocaleString() toLocaleDateString() toLocaleTimeString() 2、获取年、月、日、 ...
JavaScript复习——04 事件
事件对象 事件对象是由浏览器在外面触发事件的时候创建的，这个对象封装了各种事件相关的各种信息 例如： 鼠标的位置 键盘的按键 浏览器创建事件对象后，会将事件对象作为响应参数传递 在DOM类型中有多种不同类型的事件对象，但是他们都一个祖先Event event.clientX：获取鼠标的X轴坐标 ev ...
Data对象
概念 日期类型使用自 UTC（Coordinated Universal Time，国际协调时间）1970 年 1 月 1 日午夜（零时）开始经过的毫秒数来保存日期。Date 类型保存的日期能够精确到 1970 年 1 月 1 日之前或之后的 285616 年。 创建Date对象 var dateO ...
原型污染
使用不可信的数据，通过调用不安全的递归函数来暴露默认原型 原型污染：基础 什么是原型污染？ 原型污染是一种针对JavaScript运行时的注入攻击。通过原型污染，攻击者可以控制对象属性的默认值，从而篡改应用程序的逻辑并可能导致服务被拒绝，甚至在某些极端情况下远程执行代码。 现在，你是不是满脑子充满了 ...