- 博客(46)
- 收藏
- 关注
RSS订阅原创 一篇文章介绍前端mitt
mitt是一个非常轻量级且易于使用的事件总线库，适合在需要组件通信场景中使用。它的api设计简洁，学习成本低，且不依赖于任何第三方库，非常适合在小型项目或性能敏感的应用中使用。
2025-02-24 14:09:59
277
原创 一篇文章理解常用的前端设计模式
设计模式是针对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，每种设计模式都有每种语言中的具体实现方式。学习设计模式更多是理解各个模式的内在思想和解决的问题，代码实现则是对加深理解的辅助。
2025-02-21 10:25:13
755
原创 一篇文章介绍W3C标准
W3C 标准是 Web 技术的基石，涵盖了 HTML、CSS、JavaScript、Web API 等多个领域。遵循 W3C 标准可以确保 Web 应用的兼容性、可访问性和长期发展。
2025-02-17 08:49:09
784
原创 一篇文章理解前端的请求头和响应头含义
作为一名前端开发必不可少的就是会和请求接口打交道，那么也应该理解请求头和响应头的含义，方便分析和快速定位问题及时解决。通过这篇文章主要介绍比较常用的请求头和响应头，希望能对大家有所帮助。请求头和响应头就是HTTP协议的组成部分，请求头和响应头用于在客户端（浏览器）和服务器之间传递额外的属性，这些属性内容用于控制HTTP请求和响应的行为。请求头是客户端传给服务端的，响应头是服务端传给客户端的。
2024-12-20 11:19:02
710
原创 一篇文章理解前端的设计模式
作为前端开发，如果是想要提升自己能力和技术水平，不能只是简单的重复造轮子，必须要深刻理解体会前端的设计模式，有助于自身能力的提升。所谓前端的设计模式就是一种可以在多处地方重复使用的代码方案设计，只是不同的设计模式所应用的场景也有所不同。
2024-11-21 09:40:41
843
原创 一篇文章理解前端中的 File 和 Blob
在js中，Blob（Binary Large Object）对象用于表示不可变的原始二进制数据，主要用于存储文件、图片、视频和音频等各种类型数据。Blob提供一种高效方式操作数据文件，不需要将数据都加载到内存中，有利于处理二进制数据或大型文件。可以使用new Blob()构造函数创建一个 Blob 对象：是一个包含将被放入 Blob 对象中的数据的数组，可以是字符串、数组缓冲区（ArrayBuffer）、TypedArray、Blob 对象等。
2024-11-01 14:56:14
2117
原创 JS中空合并运算符 ?? 的使用
空合并运算符??是一个逻辑运算符，当其左侧操作数为 null 或 undefined 时，它返回其右侧操作数，否则返回其左侧操作数??
2024-04-02 08:48:29
406
原创 javascript中的structuredClone()克隆方法
是 JavaScript 的方法之一，用于深拷贝一个对象。它的语法是，其中obj是要拷贝的对象。方法将会创建一个与原始对象完全相同但是独立的副本。
2024-03-06 11:52:05
631
原创 在Vue中如何构建复杂表单？
创建一个复杂的表单，该表单可以使用一些Vue特性(如v-for和v-model)逐步增强。本文的主要目标是简化构建复杂表单的过程，同时保持可读性和可重用性，并减少开发时间。
2024-02-02 16:44:04
1646
原创 理解“无意义的”JavaScript特性
浮点数有其众所周知的缺陷，但它的优点大于缺点，它是世界各地的标准。从这个意义上说，当所有现代系统在不同架构中都给我们相同的0.30000000000000004结果时，这实际上是一种解脱。这可能不是你期望的结果，但这是一个你可以预测的结果。
2024-02-02 11:11:40
598
原创 URI编码和解码
三种方法都不会对 ASCII 字母、数字和规定的特殊 ASCII 标点符号进行编码，其余都替换为十六进制转义序列.对字符串全部进行转义编码，ECMAScript v3 反对使用该方法，对URL编码勿使用此方法。encodeURIComponent，该方法解析URI更具体更全。，如果URI中含分隔符如?，组合的url才不会被#等特殊字符截断。进行url跳转时可以整体使用。
2024-01-02 15:41:17
633
原创 Vue中避免内存泄漏
Vue 让开发响应式应用程序变得特别容易，但是仍然要警惕内存泄漏问题，这些内存泄露问题会发生在使用Vue之外的其他DOM操作的三方库时，请确保在不使用的情况下及时清理，保证用户的更好体验
2023-10-24 11:01:33
698
原创 一篇文章理解什么是JS Bridge
这些 “格式” 就统称为 JS Bridge，例如微信JS-SDK。javascript 网页开发中进行一些api调用。URL Scheme (适用于所有情况)注册全局API (不适用于异步的情况)JS无法直接调用native API。需要通过一些特定的 “格式” 来调用。JSBridge 进行一些封装。Native 提供一些执行能力。JS Bridge解释。
2023-03-23 15:00:21
407
原创 一篇文章介绍nodejs如何开启多进程，进程如何通讯
开启子进程 child_process.fork 和 cluster.fork 进行通讯。开启子进程 child_process.fork 和 cluster.fork 进行通讯。从cpu和服务器考虑，是为了更好的利用电脑的一些性能和硬件或者服务器的资源。js的执行是单线程的，没有进行多线程的api，只是能开启多进程。进程：资源调度的单位，进行内存和资源分配。使用 send 和 on 进行通讯。使用 send 和 on 进行通讯。线程：线程中计算的单位。
2023-03-23 14:01:23
1160
原创 一篇文章解释Ajax Fetch Axios 三者区别
Ajax(Asynchronous Javascript and XML):一种技术统称。内部可用XMLHttpRequest 和 Fetch来实现。Fetch语法更加简洁、易用、支持Promise。最常用的网络请求库lib(随着Vue火爆起来)。和XMLHttpRequest一个级别。：三者都用于网络请求，但是不同的纬度。浏览器原生API，用于网络请求。Fetch:一个具体的API。Fetch：一个原生API。Axios：一个第三方库。Ajax：一种技术统称。Axios: 第三方库。
2023-03-22 16:11:31
137
原创 一篇文章理解ES6中的Symbol
对象的Symbol.replace属性，指向一个方法，当该对象被String.prototype.replace方法调用时，会返回该方法的返回值。对象的Symbol.search属性，指向一个方法，当该对象被String.prototype.search方法调用时，会返回该方法的返回值。对象的Symbol.split属性，指向一个方法，当该对象被String.prototype.split方法调用时，会返回该方法的返回值。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
2023-02-09 13:45:34
2368
原创 一篇文章理解ES6中的Set方法
delete(val)：删除某个值，返回布尔值，表示是否删除成功。has(val)：返回布尔值，表示参数是否为当前set的成员。Set 本身是一个构造函数，用来生成Set数据结构。它类似于数组，但是里面的成员是唯一的不重复。add(val)：添加某个值，返回Set本身。entries()：返回set成员的数组结构。Set可以接收数组作为参数，用来初始化。clear()：清空，没有返回值。表示set集合中有多少个元素。values()：返回键值对。for ... of ：循环。keys()：返回键值对。
2023-02-09 11:12:23
2426
原创 一篇文章介绍使用PeerJS实现实时在线消息发送
PeerJS开源项目简化了WebrRTC的开发过程，对底层的细节做了封装，直接调用API即可。可以实现一端通过知道另一端的ID进行连接，ID可以自行设置也可以服务器随机分配，并且建立。发起者请求连接，接收者接收连接后，发送者上传一个png图片，接收者也能正常收到。，指的是一类指定元素类型的数组，而不是array的数组类型。功能实现的js功能包，提供丰富的、易用的并且可以配置的。连接到指定的远程peer并返回数据连接。
2023-02-09 10:10:16
7265
原创 一篇文章介绍URL.createObjectURL、Blob实现保存文件
创建一个非跨域的数据源，然后在页面写入a标签支持下载。表示二进制类型的大对象，通常是影像、声音或多媒体文件0。，通知浏览器不再继续引用这个文件。获取要保存的文件的一个。
2023-02-08 22:41:36
4633
原创 一篇文章介绍FileReader图片本地预览
FileReader是一种异步读取文件机制。将读取到的文件编码成DataURL。文件读取成功时触发的回调函数。FileReader介绍。
2023-02-08 21:49:39
2226
原创 一篇文章介绍File、Blob、FormData、文件分片上传
这里只是一个简单的分片上传，实际工作中，分片上传很复杂，每个片段需要加id，需要判断上传的片段是否有id，通过该例子加深印象。blob 对象可以通过.slice() 得到一个新的blob对象。第一个参数是一个字符串数组，可以理解为文件的内容。File对象可以看作一种特殊的Blob对象。File对象的初始化（new File）File 继承了所有Blob的属性。FormData 为序列化表单。第二个参数是文件名字符串。文件分片上传代码实现。
2023-02-08 20:52:43
2559
原创 一篇文章理解WebRTC原理
是一个支持网页浏览器进行实时语音对话或者视频对话的技术，是谷歌旗下的一项开源技术，无需任何插件，该技术还支持Android和ios端，范围广泛。电脑之间，大多数是在自己独立的局域网内，需要 NAT（Network Address Translation，网络地址转换），因此不能直接通信。技术已经在很多行业场景中使用，但是还是有些人还没有接触或者不了解该技术，该技术有很多独有的概念，有些概念是依赖。：浏览器能力，包括不限于音视频编码格式，带宽，流控策略等；2.什么是WebRTC。2.创建发送数据实例。
2023-02-08 16:14:14
2455
原创 一篇文章介绍JSZip预览压缩包中的文件
通过上面的案例代码，可以举一反三进行预览显示视频和音频等其他类型文件，可以仔细了解JSZip官网中的api。关键部分：async('text') 实现对文本内容的解析。举一反三，如果压缩包里面的内容是文本信息呢，应该怎么显示？准备好一个压缩包，格式为zip，存放两张png图片。结果会在浏览器页面中显示压缩包里的图片内容。相关jszip的api 方法 可以查询。代开浏览器页面点击按钮上传压缩包。准备一个文本压缩包如下。
2023-02-07 11:11:57
3272
原创 一篇文章介绍十六进制-判断文件类型
但是如果把该文件名后缀改成.mp3格式再进行上传，可以发现得到的文件类型是 audio/mpeg，但是我们都知道这个元件里的内容应该是image/png类型的，所以说这个上传文件判断文件的类型并不是很靠谱，可以通过修改文件的后缀欺骗校验。再准备一个图片文件left.png 导入进EditPlus进行解析，通过对比上一个文件解析的结果，只关注第一行解析结果，那就是两个文件的前8个字节是一样的，这也证实了同样类型的文件开头前几个字节是相同的。TGA - 未压缩前 （5 字节）：00 00 02 00 00。
2023-02-07 09:57:06
3326
原创 一篇文章介绍前端导入Excel文件解析为Json
点击浏览器页面中的选择文件按钮上传该Excel文件，在控制器中查看输出结果。准备需要导入的EXCEL文件。
2023-02-06 19:51:09
2939
原创 一篇文章介绍前端PDF导出方案以及乱码问题解决
打开导出的pdf文件可以发现原先应显示的文字 “欢迎使用jsPDF技术下载导出pdf文件”，结果显示成乱码。打开下载的pdf文件显示为正确的中文字体，大家可以根据个人的需求在网上下载不同的字体文件.ttf。选择文件夹，把下载好的字体文件上传。表单中的其他内容不需要更改。打开jsPDF-master中的fontconverter.html页面。创建一个新的font.js ，将复制的font内容粘贴到font.js中。在主程序中引入解决乱码部分，最新的代码如下。这个依赖，所以需要先下载依赖。
2023-02-06 16:47:01
4202
1
原创 一篇文章介绍前端PDF导出方案、html2canvas+jsPDF、导出canvas柱状图为PDF
在前端浏览器所有操作中也不存在需要消耗大量CPU计算的场景，可以短时间内完成组装生成PDF。方案，如果在搜索引擎搜索类似“ECharts导出PDF的字样”，大部分都是采用这一方案。导出速度快：所有操作都在前端浏览器发生，不涉及与服务器之间的操作。1.将用于绘制图表的原始数据或用于获取这些数据的参数发送给后端。若追求PDF导出文档质量，则可采用后端截图+后端排版的方案，如。若追求PDF导出速度，则采用前端截图+前端排版的方案，如。这样的专业排版工具实现高质量的文档排版，呈现精致的报表。
2023-02-06 15:35:14
4252
原创 一篇文章理解JS中几种常用循环方法及原理
原因：从性能上考虑，for in会遍历整个原型链，这个可能不是你想要的结果，你可能只希望遍历这个对象本身的属性，从性能上来说Object.keys()会更优先。与forEach不同的是，map循环方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。find()方法用于查找数组中符合条件的第一个元素，如果没有符合条件的元素，则返回undefined。注意： every() 不会对空数组进行检测，every() 不会改变原始数组。能使用forEach做到的，map()都可以做到，反过来一样。
2023-02-06 11:52:23
2510
原创 一篇文章理解虚拟滚动原理
虚拟滚动其实就是综合数据分页和无限滚动的方法，在有限的视口中只渲染我们所能看到的数据，超出视口之外的数据就不进行渲染，可以通过计算可视范围内的但单元格，保证每一次滚动渲染的DOM元素都是可以控制的，不会担心像数据分页一样一次性渲染过多，也不会发生像无限滚动方案那样会存在数据堆积，是一种很好的解决办法。如图所示，当我们进行滚动时，可视区域大小不变，渲染的元素数量也是可以控制的，合理的减少了不必要的DOM渲染，提高浏览器的性能。具体的浏览器原理在这篇文章不做过多的介绍，有兴趣的话可以去看我的另一篇文章。
2023-02-03 14:54:57
7544
原创 一篇文章理解WebSocket原理
websocket协议本质上是一个基于tcp的协议，它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的，属于应用层，基于TCP协议，并且复用HTTP握手通道，是一个。WebSocket在建立握手是，数据是通过HTTP传输的，但是建立了连接后，传输则不需要HTTP协议。
2023-02-02 16:12:00
2530
原创 一篇文章理解Promise原理
解析：上面代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，p2执行完catch方法后，也会变成fulfilled，导致Promise.all()方法参数里面的两个实例都会fulfilled，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。thenable对象指的是一个具有then方法的对象，Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。
2023-02-02 14:14:41
2594
原创 一篇文章理解JS中同步任务和异步任务以及宏任务与微任务的原理和执行机制
如果javascript 按照真正的单线程执行的话，如果在遇到任务繁多的情况下，那么执行效率会降低，执行的时间也会更长，或者在解析到中间代码过程中遇到了错误的代码，那么就会停止在这一步影响后面代码的执行，这是非常不好的用户体验。从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中。Javascript 是。从微任务队列中取出微任务到主线程中，输出3、 4，微任务队列为空，然后检查宏任务队列。
2023-02-01 20:59:25
3428
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人