- 博客(241)
- 资源 (2)
- 收藏
- 关注
原创 JSONP的原理和实现
只支持 GET 请求,不支持其他 HTTP 方法,如 POST、PUT 等。存在安全隐患,容易受到 CSRF 攻击。需要服务端和客户端配合,不够灵活。
2024-06-21 00:21:30
422
原创 TS中获取函数的参数类型、函数的返回值类型、构造函数的参数类型
背景:通常在业务中我们需要封装一些公共函数或者引入第三方库的函数、类,在TS语法环境下,如何在调用函数处给定义的变量进行类型定义?是需要全局定义变量类型亦或是各自定义?当然都不需要,我们可以通过ts中给出的关键词来获取相关参数。
2024-06-20 23:44:15
508
原创 Hash路由、History路由原理及优缺点
使用History路由注意点:为了解决History路由在旧版浏览器上的兼容性问题,前端框架通常会提供降级方案,比如在不支持History API的浏览器上自动切换到Hash路由。History路由是基于HTML5提供的History API实现的前端路由方式。主要基于浏览器提供的。
2024-06-13 19:01:44
443
原创 Vite项目构建chrome extension,实现多入口
本项目使用Vite5 + Vue3进行构建。要使用vite工程构建浏览器插件,无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包(生成多个html文件)。
2024-05-31 17:43:24
896
原创 React 函数式组件性能优化相关技术点
lazy传的参数是一个返回 Promise 或另一个 thenable(具有 then 方法的类 Promise 对象)的函数。还可以给memo函数传入第二个参数,该参数是一个函数,且接收两个参数:组件的旧props和新props。使用 可以在其加载时显示一个正在加载的提示。函数用于实现组件的动态导入,可以将组件的定义推迟到需要渲染时再进行加载,从而优化应用的初始加载性能。会对组件的props进行浅比较(判断新的prop和旧的prop引用是否相等),从而决定在其父组件重新渲染时该组件是否重新渲染。
2024-05-20 20:51:39
986
原创 MongoDB Realm数据库在Node中的使用
本示例的演示是在Electron主线程中编写,由于浏览器环境的限制,realm依赖无法在Web端构建。当然如果需要在web端使用数据库存储,可以安装realm-web依赖。
2024-03-04 15:48:52
281
原创 开发桌面端应用,使用electron-vite构建项目真的是一绝!
技术栈:electron v28.2.1、react v18.2.0构建工具:electron-vite v2.0.0项目打包:electron-builder v24.9.1本教程为项目工程的搭建,相关技术的知识请各自学习。Vite在当下绝对是非常卓越的前端构建工具,很多项目将其与Electron进行结合,开发桌面应用。但是如果单独配置vite进行桌面应用的开发,配置相当繁琐、复杂,甚至需要安装第三方库来解决一些常见问题,例如需安装nodemon来使electron应用热更新;
2024-02-02 17:21:55
1521
原创 实现元素进入界面的平滑效果
解决关键性问题,当滚动条滚动到界面中间时,刷新界面后,不论是往上滚还是往下滚,再次进入界面的元素都会执行动画。当然我们所需要的是往下滚动时下面的元素进入界面需要加载动画,而上方的元素进入界面不需要动画。});});// 判断节点是否在视口内if(!${DISTANCEpx)`,opacity: 0},opacity: 1], {})})结尾:上面的示例是在html文件中完成的,当然你也可以在Vue和React中实现,在Vue中,你可以自定义指令,通过获取到的el。
2024-01-28 20:17:58
409
原创 Vue3中ElementPlus组件二次封装,实现原组件属性、插槽、事件监听、方法的透传
本文以el-input组件为例,其它组件类似用法。
2024-01-27 15:14:42
4119
3
原创 解决Canvas画图清晰度问题
先吹下水:远程桌面的连接我们是通过Websocket连接后,后端不断返回远程端的界面二进制数据流,我接收到之后转为图像,画到Canvas中,然后对canvas进行一系列的事件监听,传递消息给服务端,从而实现远程桌面的连接操作。在完成开发之后,发现了一个问题,后端返回的图片信息是比较清晰的,当我在前端渲染的时候,将窗口放在扩展屏上时,图像显示正常,但将窗口移入到电脑屏时就出现了模糊现象。物理像素的大小即是在内存中的实际大小,CSS像素的大小即是设置的样式大小。将窗口移入扩展屏前后。
2024-01-06 22:30:41
1236
原创 实现网页跟随系统主题切换
这个API可以帮助我们解决这个问题。它和css中的媒体查询一样的用法,只是这个是在JS中使用。实现亮/暗主题的切换,那如何让其跟随系统自动切换呢?如何实现网页跟随系统主题切换?想必大家都是用过媒体查询。
2024-01-06 14:09:13
694
原创 Electron中调用dll
截止目前Electron的官方稳定版本已经更新到了28.1.1。我在创建Electron项目时用的28.0.0版本,后面在项目中有用到调用dll方法的需求,大致的实现就是将后端给的dll文件引入到项目中,安装ffi-napi依赖,然后进行使用。但是在ElectronV21+的时候,官方引入了V8内存隔离区,当再使用ffi-napi这个库的时候就会报错,用尽了一切办法,都未果(如果读者有解决办法可私聊)。最终还是将Electron版本降到了20.3.8。当然ffi-napi。
2024-01-05 17:25:17
1772
2
原创 Webpack5 常用优化总结
本文主要总结经常用到的一些等内容的方法。具体的实现可参考webpack官网查看相关示例。注:如果读者还未接触过webpack,请先了解webpack的基本使用。
2024-01-05 11:51:25
1632
原创 Electron V28主进程与渲染进程互相通信总结
本文示例采用Electron+Vue3+TS编写,请读者理顺思路,自行带入自己的项目。注: 读本文前请先搞懂什么是主进程,什么是渲染进程。在Electron中有着和模块,以及创建窗口对象上的。很显然ipcMain和窗口对象上的webContents是在主进程中使用的,ipcRenderer和contextBridge(用于向渲染进程暴露API)是在预加载脚本中使用的。请看下方示例,关键讲解写在代码注释中。主进程中发送消息,是使用new 窗口时的对象上的webContents发送消息。例如:main.j
2023-12-14 15:56:41
614
原创 Error: Cannot find module ‘@npmcli/config‘ 最新解决办法
看了网上许多这个问题的小伙伴,都是降级node版本来解决的。但是降级并不是我想要的结果。真正的解决办法就是更新nvm,将你的nvm升级到最新版本,然后卸载掉npm报错的node版本,重新安装即可使用。
2023-12-05 14:55:28
3259
1
原创 Vue3中搜索表单的二次封装
经过前两步的封装之后,在使用的SearchForm组件时,简直是爽的不要不要的。{label: '项目名称', prop: 'name', type: 'input'},{label: '项目编码', prop: 'code', type: 'input'},{label: '项目描述', prop: 'desc', type: 'select', list: [{label: '未开始', value: 1}, {label: '已开始', value: 2}]},
2023-08-23 15:30:31
1691
1
原创 分享在Vue项目中对protobufjs的使用
研究了几天protobufjs,最开始总是被如何引入proto文件所困扰,总是报错,如果只是在html中引入proto文件,那么只需要引入protobuf对象,然后再把html运行在容器中即可。但是要在vue项目中使用,可没有这么容易了。因为vue没办法处理proto文件,需要引入loader对其处理。
2023-06-05 15:05:40
895
原创 面试官:请你描述一下React的Diff算法
当更新列表时,React 会根据 key 来快速定位元素,从而减少不必要的 DOM 操作,提高更新性能。总的来说,React diff 算法是 React 的核心算法之一,它通过有效地比较 Virtual DOM 树的差异来提高渲染性能,同时还可以避免不必要的重新渲染,提高应用程序的性能和用户体验。React diff 算法的基本思想是将 Virtual DOM 树上的节点按照深度优先的顺序进行比较,比较的过程中可以使用三个指针来跟踪原始树、新树和上一次更新时的树,从而找到需要更新的节点。
2023-04-12 16:02:25
768
原创 用简短的话来描述React Fiber架构
在 React Fiber 中,每一帧都被认为是一个时间片(time slice),React Fiber 将渲染任务拆分成一系列的小任务,并将这些小任务分配给不同的时间片进行处理。在传统的 React 渲染模型中,React 会从根组件开始,一直递归渲染整个组件树,直到完成所有的渲染操作。React Fiber 架构的主要目标是实现增量式渲染,使得在渲染大型组件树时,React 可以将渲染过程拆分成多个较小的步骤,每一步骤都可以被打断或者中止,从而可以让应用程序更加灵敏和响应。
2023-04-12 15:37:04
181
原创 PubSub原理解析并简单实现其源码
该方法接受两个参数:主题和订阅器对象。首先检查该主题是否有任何订阅器对象。否则,找到该订阅器对象在数组中的索引,然后使用splice方法从数组中删除该订阅器对象。否则,对该主题的所有订阅器对象进行遍历,依次调用每个订阅器对象的方法,并传递消息作为参数。如果该主题还没有任何订阅器对象,则需要先创建一个空数组,然后将订阅器对象添加到数组中。该实现中,PubSub对象包含三个方法:subscribe、publish、unsubscribe,以及一个名为subscribers的对象,它保存了所有订阅器对象的信息。
2023-03-01 15:04:01
357
原创 前端大文件分块上传及计算大文件MD5值
本文主要讲解文件的MD5值计算及上传逻辑。大致思路:在选择文件获取到文件之后,首先是对文件进行MD5值的计算,然后拿着这个MD5值对查询后端接口此文件是否存在。查询结果分为三种情况,一是不存在,二是已存在,三是部分存在。不存在时对文件分块,然后一块一块上传;已存在时直接使用已存储的文件,即秒传;部分存在时后端会返回不存在的文件块的位置,然后上传对应不存在的块。
2023-02-22 16:26:18
2985
2
原创 前端数据请求Loading方案
在写业务的时候,你现在是否还再请求调用处一遍遍写showLoading、hideLoading?即使自己对不同组件库的Loading进行二次封装,方便你调用,但这也不是很好的一种解决办法。无论是ElementUI的Loading还是Antd中的,你使用前都必须要先进行导入,这时候你可能会二次封装,将封装后的对象绑定在全局上。这是很常用的一种方法,直到前两天 突发奇想,为什么Loading不能统一写在一个地方,而不需要我们一遍遍的在请求调用处写showLoading、hideLoading呢。
2022-11-26 12:39:55
1707
原创 Vue3 中结合 ElementPlus 实现弹窗的封装
Vue3自定义弹窗,知识点包含vue3的emit使用,自定义ref,子组件内容方法向外暴露。
2022-09-30 11:40:16
3740
2
原创 electron-vue初始化项目到打包运行
Electron-vue就是基于vue来构造electron应用程序的样板代码。electron-vue充分利用vue-cli作为脚手架工具,加上拥有vue-loader的webpack、electron-packager或是electron-builder,以及一些最常用的插件,如vue-router、vuex、axios等等。...
2022-07-19 10:31:55
698
原创 ElementUI 表单自定义正则表达式校验文本框
结合element的表单规则方式,需在data的返回中写form和formRules,这里写的自定义规则是要结合formRules,示例如下:在data函数中写自定义规则的方法,在rules中进行使用
2022-06-16 17:05:03
573
原创 Flutter 异步操作
在Flutter中,借助 FutureBuilder 组件和 StreamBuilder 组件,可以非常方便地完成异步操作。一、FutureBuilder在讲解FutureBuilder之前,你首先要知道Future是什么,了解了这个,后面再了解该组件就轻松许多。在不同的编程语言中会有不同的名词来定义,在Dart语言中 选择使用Future类型配合async、await关键字来实现异步支持。Future 表示一个现在不确定,但以后应该可以确定的值。这个值可以是任意类型,如 Future<int
2022-05-16 23:31:58
1098
原创 黑客与画家——片段一
想要把握住这个时代,就必须理解计算机。理解计算机的关键,则是要理解计算机背后的人。表面上这是一个机器的时代,但是实际上机器的设计者决定了我们的时代。程序员的审美决定了你看到的软件界面,程序员的爱好决定了你有什么样的软件可以使用。我们的时代是程序员主导的时代,而伟大的程序员就是黑客。黑客的正确理解到底是什么?为了把这个问题说清楚,有必要从源头上讲起。1964年,第一台电子计算机ENIAC在美国诞生,从此世界上一些最聪明、最有创造力的人开始进入这个行业,在他们身上逐渐地形成了一种独特的技术文化。在这种文化的发
2022-05-02 23:41:27
494
原创 Flutter 无状态类、有状态类、State、生命周期
Flutter中的生命周期类似于Vue、React中的生命周期一样,有初始化、状态更新、停用、销毁等。在React中,组件分为函数式组件和类式组件,它们的区别就是一个无状态、一个有状态。那么在Flutter中亦是如此,它有两种类,一种是无状态类,一种是有状态类。其生命周期的使用就是有状态类的特定用法。无状态类无状态类内部有build方法,在表面上看 每次数据更新都会执行build方法。但实际上,在组件树中,当每次数据发生变更时,无状态类都会重新执行组件LessComponent对象。class Le
2022-04-30 15:33:21
1454
原创 Vue 权限指令的使用,不同情况下的权限控制分析
在日常的开发过程中,我们除了使用Vue已有的指令之外,还需自定义指令,需要对DOM节点进一步操作。在后台系统中,最常用的就是权限指令。权限控制的原理就是在系统当前界面初始化时,判断某些DOM节点有没有权限,没有则移除此DOM。...
2022-04-29 23:17:57
1544
3
原创 Vue知识点总结
实现:Vue是MVVM框架,双向数据绑定,当ViewModel对Model进行更新时,通过数据绑定更新到View。虚拟DOM是一个映射真实DOM的JS对象,提供了响应式和组件化的视图组件。一、Vue初始化过程,双向数据绑定原理vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,dep.addsub来收集订阅的依赖,watcher监听数据的变化,在数据变动时发布消息给订阅者,触发相应的监听回调。监听器Obse
2022-02-01 23:03:52
785
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人