- 博客(119)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【设计模式】六大原则之依赖倒置原则（Dependency Inversion Principle，DIP）
依赖倒置原则，DIP是编程开发中的一个重要原则，具体指抽象不应该依赖于具体类，具体类应当依赖于抽象。换言之，要针对接口编程，而不是针对实现编程，旨在降低模块间的耦合度，提高系统的可维护性和稳定性。高层次的模块不应该依赖于低层次的模块，他们都应该依赖于抽象。抽象不应该依赖于具体，具体应该依赖于抽象。
2024-08-14 15:07:26
949
原创 【TS】Typescript中接口(Interfaces)与类(class)的用法详解
使用接口（Interface）来定义对象的类型。使用接口（Interface）对行为进行抽象，而具体如何行动需要由类（class）去实现（implements）。// 使用接口（Interface）来定义对象的类型age: 25赋值的时候，变量的形状必须和接口的形状保持一致// 使用接口（Interface）对行为进行抽象alert() {alert() {类（Class）：定义了一件事物的抽象特点，包含它的属性和方法。
2024-08-14 11:06:39
909
原创 【JS】详解浏览器的5 种Observer: Mutation、Intersection、Performance、Resize、Reporting
监听用户的交互行为，我们会用 addEventListener 来监听 click、mousedown、keydown、input 等事件，但对于元素的变化、performance 的记录、浏览器干预行为这些不是用户交互的事件就要用 XxxObserver 的 api 了。IntersectionObserver：监听元素可见性变化，常用来做元素显示的数据采集、图片的懒加载MutationObserver：监听元素属性和子节点变化，比如可以用来做去不掉的水印。
2024-08-13 16:25:42
891
原创 【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!
reduce() 方法对数组中的每个元素执行一次提供的回调函数，且该函数为升序执行，并将其结果汇总为单个返回值。
2024-06-05 17:36:42
2404
原创 【uni-app】uniapp页面与组件生命周期介绍
uniapp应用开发过程中经常会在不同的时机触发一些事件，这篇文章主要是总结一下uniapp常用的一些生命周期钩子。不同的环境运行可能有差异,下图为微信小程序执行图示。
2024-06-04 10:31:13
1386
原创 【Vue3】vue3快速实现响应式数据恢复初始值。浅拷贝与深拷贝的应用。
有一个经常遇到的场景就是，一个表单最后一列有个编辑按钮，点击编辑按钮之后打开表单弹窗，修改其中的数据，但是如果此弹窗再作为新增弹窗打开的时候，弹窗数据会缓存上次编辑的数据。在 Vue 3 中，由于引入了新的响应式系统，重置数据到初始值的方法与 Vue 2 不同。当你使用 reactive 创建响应式对象时，一个常见做法是保留初始数据的引用，以便在需要时恢复数据。
2024-06-03 16:05:53
2318
原创 【uniapp】uniapp返回上一页，并实现刷新界面数据
在uniapp中，经常会有返回上一页的情况，官方提供有 uni.navigateBack 这个api来实现效果，但是此方法返回到上一页之后页面并不会自动刷新（不会触发上一页的onLoad()方法）。
2024-04-18 09:35:46
4140
原创 【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能，拍照闪光灯实现
## 一、需求前提特殊场景中，需要拍照的同时打开闪光灯，（例如黑暗场景下的设备维护巡检功能）。起初我是用的`uviewui`中的`u-upload`组件自带的拍照功能，但是这个不支持拍照时打开闪光灯，也不支持从通知栏中打开闪光灯。## 二、解决方案采用组合形式解决：1. 使用uniapp官方内置组件中的 [媒体组件：camera](https://uniapp.dcloud.net.cn/component/camera.html) 实现闪光灯拍照，`uni.createCameraConte
2024-03-08 15:44:58
1538
原创 【Vue2】vue2中自定义组件实现双向绑定的写法，v-model在自定义组件中的实现
封装一些小组件的时候常常会用到双向数据绑定，下面简单总结一下用法
2024-03-08 15:13:29
1633
原创 【uniapp】uni-app开发手持PDA上的激光扫码程序，uniapp主动触发pda激光扫码（附完整代码）
工业级智能手机（PDA），PDA设备是Android9系统，带有激光扫码灯，现在要使用uniapp开发安卓程序，并实现在PDA设备上的激光扫码程序。// 在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时。// init传入一个回调函数做参数，在扫描时候会将数据传入此方法里，然后处理此方法的自定义业务逻辑。// onLoad 是在页面加载时触发，用于页面的初始化操作，只执行一次。激光扫码效果见如下视频。
2024-03-01 10:18:59
4247
18
原创 【vscode】windows11在vscode终端控制台中打印console.log()出现中文乱码问题解决
在前端开发过程中使用vscode编写node.js，需要在控制台中打印一些中文信息，但是一直出现中文乱码问题，英文和数字都显示正常。在网上试了很多设置的办法，最终找到windos11设置中解决。，name大概率就是因windows中文版系统cmd编码默认为GBK，而vscode默认新建文件的编码为UTF-8所以会出现中文乱码情况。首先打开控制台，输入命令。，如果你的输出内容没有。
2024-02-04 10:10:25
1900
1
原创 【Iot】什么是串口？什么是串口通信？串口通信(串口通讯)原理，常见的串口通信方式有哪些？
串行接口简称串口，也称串行通信接口或串行通讯接口（通常指COM接口），是采用串行通信方式的扩展接口。串口可以将接收来自CPU的并行数据字符转换为连续的串行数据流发送出去，同时可将接收的串行数据流转换为并行的数据字符供给CPU的器件。一般完成这种功能的电路，我们称为串行接口电路。串口通信（Serial Communications）是串口按位（bit）发送和接收字节的通信方式，它是嵌入式物联网领域中常用的通讯方式。典型的串口通信使用3根线完成，分别是发送、接收、地线。由于串口通信是异步的，所以端口能够在
2024-02-03 17:23:55
7829
1
原创 【Electron】electron-builder打包过程中报错： A connection attempt failed—connected host has failed to respond
npm run build 打包报错信息如下：Get “https://github.com/electronXXXX”: dial tcp XXXX: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connecte
2024-01-24 15:16:48
1396
原创 设置windos电脑开机自动启动chrome浏览器，并且打开指定网页
注意，这是一个简单的批处理脚本，它只会在命令行窗口中执行。这是一个Windows批处理脚本，主要用于启动Chrome浏览器并设置一些特定的参数。的意思是在改变当前目录之前，如果目录不是硬盘的根目录或者U盘的根目录，就先退出，这样可以保证安全。是批处理中的一个变量，表示%0（即批处理文件自身）的完全路径（包含目录信息）。：启动Chrome浏览器并打开指定的URL，同时设置一些特定的参数。：设置命令行窗口的标题为"Chrome"。的值为0，表示浏览器窗口在屏幕的左上角。的值为0，表示浏览器窗口在屏幕的左上角。
2023-09-06 17:38:42
3442
原创 【Vue】使用elementPlus的table时,实现自定义tooltip效果，单行显示，超出则显示省略号，鼠标移入后，当文字数量大于20则换行自定义展示的tooltip
使用elementPlus的table时，实现自定义show-overflow-tooltip效果，文字在table中单行显示，超出宽度则显示省略号，鼠标移入后，当文字为30个字以内的时候单行显示tooltip，超出30个字则显示可以换行自定义展示的tooltip。
2023-08-15 14:52:25
5070
2
原创 【Vue3】Vue3中的组合式API是什么？hook是什么？什么是“组合式函数”？项目中如何使用自定义 hook 函数？
组合式API(Composition API)是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。
2023-07-22 10:36:35
1219
1
原创 【权限控制】ACL、RBAC、ABAC三大权限管理模型，到底怎么选?
系统规模：对于小型系统，ACL 可能是足够简单的解决方案。而对于大型系统，RBAC 或 ABAC 可能更适合。复杂性：RBAC 和 ABAC 提供了更高级别的权限管理功能，但也带来了更多的复杂性。根据系统需求和管理员的技能来评估是否需要更复杂的模型。灵活性：如果需要灵活性和动态的权限管理，ABAC 是更好的选择。RBAC 提供了一种适度的灵活性，而 ACL 则较为静态。
2023-07-03 17:43:43
3710
原创 【JS】vis.js使用之vis-timeline使用攻略，vis-timeline在vue3中实现时间轴、甘特图
`vis-timeline`时间轴是一个交互式可视化图表，用于实时可视化时间数据。数据项可以只与某个时间点关联，也可以有开始和结束日期（即一个时间范围）。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的，支持从毫秒到年的尺度。vis-time时间轴使用常规`HTML DOM`呈现时间轴和放在时间轴上的项目，这样的好处就是可以使用自定义css样式进行灵活定制。
2023-04-18 09:28:06
8090
3
原创 【CSS】SVG实战入门，svg画曲线，svg简单动画上手入门
- `` 根元素以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间，- `version` 属性可定义所使用的 SVG 版本，- `` 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示， - `` 元素允许咱们为图像定义完整的描述信息，- ``标签 用来创建一个矩形，通过 `fill` 属性 把背景颜色设为黄色。- ``标签 用来创建一个圆。
2023-03-14 16:57:28
4038
原创 【JS】jsx/tsx是什么？为什么 Vue3 的组件库都在使用 jsx/tsx？如何在Vue3中使用 jsx/tsx？
前几天得到一个疑问，为什么 React 要用 JSX 语法，这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离，这样设计的优越性到底在哪里？
2023-03-10 11:41:00
3142
7
原创 【TS】TypeScript泛型 T 的用法详解
泛型，从字面上理解，泛型就是一般的，广泛的的意思。TypeScript中泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型的一种特性。泛型中的T就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型传入，它可以原封不动地输出。，这些成员可以是：函数参数、函数返回值、类的实例成员、类的方法等。
2023-03-09 17:03:22
3191
2
原创 【JS】Blob对象使用：前端实现流文件下载
前端由于安全方面的因素，不能直接对文件进行写操作。但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为objectURL,借用a标签的download属性，进行文件下载。
2023-02-27 16:47:19
2821
原创 【Vue】浅谈vue2、vue3响应式原理，vue中数组的响应式，响应式常见问题分析
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。vue2使用Object.defineProperty实现响应式。vue3使用Proxy实现响应式。
2023-02-16 16:37:46
2173
1
原创 【Iot】阿里云物联网平台入门之什么是消息解析、什么是Topic、JavaScript脚本示例解析
即通过脚本（可以是js、php、python），将消息数据在设备自定义格式和JSON格式之间转换。Topic是消息发布（Pub）者和订阅（Sub）者之间的传输中介。物联网平台中，服务端和设备端通过Topic来实现消息通信。Topic是针对设备的概念，Topic类是针对产品的概念。产品的Topic类会自动映射到产品下的所有设备中，生成用于消息通信的具体设备Topic。Topic类：产品维度的Topic，是同一产品下不同设备的Topic集合。一个ProductKey下有多个Topic类。
2023-01-16 10:41:41
2885
原创 【CSS】flex布局用法解析，快速上手flex布局，flex:1是什么意思？肯定看的懂好吧？
flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。（常用此项）wrap-reverse：换行，第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap// 主轴水平向右，并且元素自动换行。
2022-12-24 17:13:19
5209
原创 【Three.js】Three.js快速上手教程
`three.js`是`JavaScript`编写的`WebGL`第三方库。提供了非常多的3D显示功能，是一个常见的`web 3D`库。
2022-12-19 17:24:47
6823
5
原创 【JS】前端js实现树形结构：递归拼接树形结构与使用filter函数，不使用递归实现树形结构, O(n)解法
前端树形结构一般用于网页的地理位置输入框，地理位置级联选择，人员的部门选择等。常见的做法是使用递归实现树形结构，还有的使用filter函数可直接实现树形结构。
2022-12-13 14:27:06
3288
1
原创 【TS】TypeScript声明文件（.d.ts）的使用
当我们在TS文件中需要引入外部库时，编译时是无法判断传入参数的类型的，所以我们需要在引入前加入一个声明文件来帮助ts判断类型。当然现在大部分库都自带有自己的声明文件，一般在@types目录下。
2022-12-13 08:51:26
3875
原创 【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
`WebSocket` 是一种基于`TCP`的**全双工**通信协议，它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在**两个方向**上传递，而无需中断连接也无需额外的 `HTTP` 请求。- 使用场景：对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。最典型的场景就是聊天室。
2022-11-21 17:27:38
1681
1
原创 【Web通信】短轮询与长轮询(Long Polling)是什么？
早期的很多网站为具备数据推送能力，所在用的技术基本都是HTTP轮询。**轮询**是由由客户端每隔一段时间（如每隔5s）向服务器发出HTTP请求，服务端接收到请求后向客户端返回最新的数据。客户端的轮询方式一般为==短轮询==或==长轮询==。
2022-11-03 11:54:33
1179
原创 【权限控制】PC端与小程序权限设计浅析---RBAC基于角色的访问控制（Role-Based Access Control）
RBAC权限模型：RBAC，即基于角色的访问控制（Role-Based Access Control），是优秀的权限控制模型，主要通过角色和权限建立管理，再赋予用户不同的角色，来实现权限控制的目标。
2022-10-24 10:46:07
1169
原创 【Vue】vue3.2中使用pdf.js踩坑：Cannot read from private field---pdf.js使用详解
本人项目中使用的是`vue3.2`+`vite`+`ts`，现在打算使用pdf.js库来加载预览pdf文件，下面是我的一些踩坑记录！真的太难受了！！！
2022-10-17 17:14:47
3407
9
原创 【Nginx】https兼容http后，post请求返回405、301，显示接口方法不允许
强制把`http`请求跳转到`https`,结果发现App有部分的功能不能使用.因为App一共设置了4种请求方式，分别是`GET`、`POST`、`DELETE`和`OPTIONS`方式，设置301跳转后所有的请求方法都变成了`GET`方式，导致一些功能无法正常使用。
2022-10-17 10:15:18
2405
原创 【JS】前端常见加密算法MD5、AES、RSA介绍，Vue3中使用jsencrypt使用rsa加密示例
哈希散列算法、对称加密算法和非对称加密算法。vue3中使用
2022-09-30 15:48:09
4085
原创 【Vue3】 vite获取.env文件中配置的环境变量
// 根据当前工作目录中的 `mode` 加载 .env 文件// 第二个参数：process.cwd()表示返回运行当前脚本的工作目录的路径（current work directory）// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。const env = loadEnv(mode.mode, process.cwd(), '');
2022-09-19 11:07:04
11278
5
原创 【JS】js正则匹配字符串是否为指定的某几个字符结尾
在做省市区级联选择的时候遇到，有的情况需要点击非最底层但是又要求可以选中，就需要 前端来增加判断。这里可以使用正则来判断label的值是否以某个字符结尾
2022-09-16 14:21:30
3233
原创 【vue】vue3中状态管理Pinia（Vuex5）使用快速上手
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了名字Pinia。关于vuex的介绍可以查看我之前的文章。
2022-09-14 11:41:54
986
原创 【Vue3】vue3中组合式Api的setup写法快速入门上手起步
使用setup语法糖和setup函数对比，使用语法糖的代码整洁了好多，不会有那么多的对象嵌套。也不用做什么额外的return，代码也简化了不少。
2022-08-15 16:42:25
3173
原创 【JS】javascript判断数据类型的四种方法：Object.prototype.toString.call()、typeof、instanceof、constructor
1. 使用Object.prototype.toString.call() ---推荐方法2. 使用typeof3. 使用instanceof4. 使用constructor
2022-07-30 15:35:35
1534
javascript红宝书阅读路线图！没错，就是那个最厚的红色大book
2024-08-14
electron-builder打包过程中报错所需的文件
2024-01-24
开发-性能优化方法论（蚂蚁集团高级java工程师）
2023-02-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人