- 博客(365)
- 资源 (14)
- 收藏
- 关注
原创 React 常用高阶组件使用
高阶组件(HOC)在 React 中提供了一种灵活的方式来复用逻辑并增强组件功能,提升代码复用性和可维护性。:显示加载状态。:捕获渲染错误。withAuth:实现权限控制。withTheme:提供主题样式。:获取窗口尺寸。withRouter:访问路由信息。connect:连接 Redux 状态和 actions。
2025-01-08 18:16:31
368
原创 子模块、Fork、NPM 包与脚手架概述
子模块:适合复杂项目间的代码共享、需要严格版本管理且希望保持独立性的场景。● Fork:适合个性化修改开源代码。
2024-12-03 15:28:50
611
原创 二次封装最佳实践与策略
在封装时通过 model 配置双向绑定,保持原生体验,简化父组件逻辑,提升组件易用性。通过封装暴露组件内部方法(如获取 Cascader 级联选择器组件选中节点),简化父组件调用逻辑,提高开发效率。例如将表单组件设计为通用内容组件,而弹窗或抽屉设计为载体组件,增强复用性,确保灵活性。将特定业务场景或与后台交互的通用逻辑(如动态加载表格数据)封装到组件,减少代码重复,增强复用性。通过父组件控制数据流,子组件展示组件或功能单元。确保组件的 props 数据不直接被修改,变更时通过事件通知父组件更新。
2024-12-03 11:05:52
614
原创 基于 Vite 封装工具库实践
本项目封装了一个时间函数工具库,使用 Moment.js 实现时间格式化。由于 Moment.js 体积较大,打包时排除了该库。最终,通过 Vite 封装该工具库,并打包发布到 Verdaccio 私有包管理平台,供公司内部项目使用。
2024-12-02 15:26:29
457
原创 搭建规范化的 npm 包
根据开发环境区分不同的配置,设置对应的 npm script,最终输出不同规范的产物:umd、umd.min、cjs、esm、iife(global)。初始化后,.husky 目录会生成,并包含 pre-commit 钩子。在 commit-msg 文件中添加添加命令: npx --no-install commitlint --edit $1。在 npm 包工具库 中设置 lint-staged、husky 和 commitlint,可自动化代码检查和提交规范,保证代码质量和规范性。
2024-12-02 11:23:41
917
原创 微前端架构 qiankun
背景:随着业务功能的扩展,原有开发模式已无法满足需求。上线后出现问题时,排查过程变得异常复杂,新开发人员也难以迅速理解现有代码。同时,系统间界面风格和交互差异较大,导致跨系统办理业务时工作量增加。因此,引入微前端架构,以支持团队协作、实现独立部署,并提升开发效率。
2024-11-30 22:09:02
1030
原创 Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
LRU(Least Recently Used,最近最少使用)是通过记录缓存项的访问顺序来决定淘汰的策略:当缓存满时,移除最久未被使用的项。
2024-11-23 19:55:02
630
原创 $nextTick 实现原理
Vue 使用 nextTick 来确保数据更新后的 DOM 操作在更新完成后执行。其核心逻辑是将回调放到微任务或宏任务队列中,确保回调在 DOM 更新完成后执行。flushCallbacks 函数会在 timerFunc 被触发时执行,清空原数组 callbacks 并执行所有回调函数。nextTick 将传入的回调 cb 存入 callbacks 队列,并确保 flushCallbacks 仅被触发一次。Vue.js 的 nextTick 会将回调函数放到合适的队列中执行。
2024-11-06 21:55:01
520
原创 VueRouter 导航故障问题
在 Vue 的开发中,当出现当前页跳当前页的情况时,可能会导致导航故障。例如,在、一个一级路由叫 “搜索 search”,搜索电脑会到 “search list” 路由上,当再次搜索手机时,会发现路径没有变只是参数变了,这就是当前页跳当前页。此时如果点击按钮跳转到首页,可能会跳转不过去并出现报错。导航故障的问题在 Vue2 和 Vue3 中的路由处理方式不同。
2024-11-06 20:16:16
309
原创 JavaScript 通过 URL 获取 MIME类型
getMIMETypeFromExtension函数接受一个文件扩展名作为参数,并返回对应的MIME类型。如果找不到匹配的MIME类型,它返回’application/octet-stream’作为默认值,这通常用于未知类型的二进制数据。在浏览器中,如果您需要动态地根据URL获取MIME类型,您可以使用fetch API 和 Response.headers.get 方法来获取服务器返回的MIME类型。在JavaScript中,您可以使用URL对象和MediaType来获取URL中的MIME类型。
2024-03-13 11:39:57
1176
原创 Ant-design-vue Table 列表 columns 将作为导出功能入参
引入了 processColumn 函数,用于处理单个列对象。如果列对象具有子列(children),则递归调用 handleExportColumnsData 处理子列,并将处理后的子列添加到结果对象的 children 属性中,从而实现处理多层级嵌套的数据结构。getEnumMap 的第一个入参 type 支持字符串映射 store 中的属性,也可以直接传入枚举值数组,然后使用 reduce 将数组转换为对象,这里 key 和 value 是枚举值数组中的 key、value 字段名。
2023-10-27 11:33:46
640
原创 JS 多字段拼接为字符串,并处理掉 null 的情况
首先使用 map 方法将每个字符串的值提取到一个新数组中,然后使用 filter 方法过滤掉未定义的值,最后使用 join 方法将这些非空的值。上述代码片段中,使用 formatField 用来格式化字段,combineFields 用来组合所有字段,且使用 map 和 join 方法更简洁地组合字段,减少了多次字符串拼接操作。根据多个字段,动态拼接显示 label 字符串,由于字段的值存在 null 的情况,我们又将如何将 null 从字符串中去除呢?
2023-10-27 11:02:16
646
原创 日常代码优化实现过程
in 循环来遍历 object 对象的属性,并使用 filter 函数来检查 data 数组中的元素,看它们的 key 属性的值是否包含在 list 数组中。将状态值和对应的消息被提取到了单独的配置对象,函数 handleCheckStatus 接受这些配置对象作为参数,使得验证逻辑与具体的状态值解耦,提高了代码的灵活性和可维护性,并且错误消息的显示逻辑被抽象为了一个独立的函数showWarningMessage,这样可以方便地进行统一的消息显示管理,也增加了代码的可维护性。
2023-10-23 17:15:21
286
原创 JavaScript 将树形结构转换一维数组(递归)
将树形结构转换为一维数组是一个常见的任务,通常使用递归或迭代的方法来完成。flattenTree 函数递归地遍历树的每个节点,并将节点添加到结果数组中。如果节点具有子节点,它会继续遍历子节点。最终,你将得到一个包含树中所有节点的一维数组。getOneArr 使用了递归方法,它接受一个包含树形结构数据的数组 data,并将其转换为一维数组。将数据结构从多维树状结构变成一维数组,然后删除了原始数据中的子节点,最后输出一个一维数组,其中包含了所有节点的数据,同时删除了子节点属性,使其成为一个扁平的结构。
2023-10-20 11:30:12
2595
原创 vue2-org-tree 树型结构的使用
使用 labelClassName API 给 label 上的 class,从而实现定义 label 样式。// 定义 label 样式},我们可以看到常量 colorObj,其对象中的 key 值是定价类型,value 值是所对应的 class 名称。
2023-10-18 16:33:53
1486
原创 ant-design-vue table 同时勾选或者取消勾选某字段值相同的数据
使用 rowKey 将其绑定为某个字段(这里指的是我们该字段相同的值同时勾选或者取消勾选的字段),这里的确可以实现样式上的同时勾选,但是 selectedRowKeys 和 selectedRows 都只有一项数据,勾选后统计勾选的数据信息汇总就存在问题了,因此我们如何实现该功能呢?Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性:表格行 key 的取值,既可以是字符串,也可以是一个函数,它在 rowSelection 选择功能的配置中尤为重要。
2023-09-06 16:39:00
1425
原创 JavaScript 中根据相同 key 对应的值,将一维数组转换为二维数据
实现思路:遍历 input 数组,使用 obj 对象存储以 code 为 key,遍历项为 value,同时向结果集 result 中添加该数据,如果 obj[code] 已经存在了,直接遍历 result,找到相同的 code,添加 name 到 list 中即可。从 input 和 output 两个数组中可以看出,使用 code 进行分组,将 code 值相同的 name 放入到 list 数组中。上述中我们注意利用了对象 obj 键的唯一性,当然我们也可以使用 Map 来实现。
2023-09-06 11:01:17
514
原创 JavaScript 中根据 key 合并不同的两个数组
将 source 和 target 两个数组合并成为 output 数组。我们可以看到 source 和 target 两个数组是通过 id 对应的值进行合并的,这里使用遍历 target 数组,遍历的每一项都与 source 使用 find 方法去找到对应 source 数据。由于考虑到 source 和 target 数组中可能存在相同的 key, 所以我们使用回调函数将结果返回,默认直接将 source 数据和遍历的 target 项一起返回。
2023-09-05 17:36:42
362
原创 axios 请求和响应拦截器
通过响应拦截器我们用来处理响应异常的接口进行拦截提示,返回对象中会返回一个 succeed 字段来表示接口处理正常还是异常情况,当然也有可能直接返回文件流,因此这里使用的 ‘succeed’ in res 的写法来表示 res 中是否存在 succeed 的 key 来代替 res.succeed。在请求或响应被 then 或者 catch 处理前拦截他们,拦截分为请求拦截和响应拦截。使用 axios.create() 使用自定义配置创建一个 axios 实例。
2023-09-05 11:51:30
1061
原创 Ant-design-vue AutoComplete 自动补全组件的使用
AutoComplete 是一个输入框自动完成功能,在输入时提个建议或者辅助提示。
2023-08-15 17:03:05
2577
1
原创 Table 汇总 handleTableTotal 方法处理
使用 JavaScript 中的 reduce() 方法,对数组中每个元素执行一个 reduce 函数后,将其结果汇总返回值,比如:数值求和、数值中元素出现的次数、数组去重等等。在 JavaScript 计算过程中,因为计算机底层二进制存储的原因导致结果出现精度问题,而 number-precision 第三库就是解决这个精度问题的。针对汇总数据,统一使用 TableTotal 组件中的样式显示。reduce() 方法还可以将数组转换为对象。针对汇总数据,使用函数返回数组格式。
2023-08-15 15:47:13
193
转载 JavaScript 生成唯一标识
Math.random()方法可以生成一个随机数,因为它返回0到1之间的伪随机数,所以我们可以将其与当前的时间戳相乘,生成一个不太可能重复的唯一ID。通过当前时间戳和生成机器码合一起生成的唯一序列号,可以避免生成的唯一序列号重复的问题。获取时间戳后加上随机截取的字母,采用数字加字母的形式,获取唯一标识。
2023-08-14 17:29:04
1276
原创 JavaScript 中 toFixed 如何满足四舍五入
JavaScript 自带的 toFixed 方法有时候会出现计算不准确的问题,往往与我们预期的四舍五入有出入,因此我们考虑重构 toFixed 方法。
2023-08-14 17:11:48
1053
原创 Tab 标签页下拉菜单相关操作逻辑处理
右击 Tab 标签页显示下拉菜单项,例如:刷新当前页、关闭当前页、关闭左侧、关闭右侧、关闭其他、关闭所有等操作。
2022-11-18 11:44:53
1118
原创 Dropdown 下拉菜单实现标签页的相关操作
Dropdown 组件是向下弹窗列表。点击或移入触电,会出现一个下拉菜单,可以在列表中进行选择,并执行相应的命令。
2022-11-18 10:26:55
1686
转载 Vue3 实现背景水印功能
在 web 的世界里,对于图片文档等增加水印处理是十分有必要的。水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加。通过 canvas 创建一张含有水印信息的背景图片,通过 hooks 函数插入到页面中。
2022-11-10 17:51:56
1502
转载 git 创建新分支后上传报错 [rejected] test -> test (non-fast-forward) 解决方法
原因分析是远程库和本地文件存在差异,因为本地 test 是 develop 分支进行修改,所以直接强制推送。
2022-11-01 20:00:53
952
原创 基于 element,阅读 ScrollBar 滚动组件源码
即当 wrap 滚动的时候,thumb 应该向下滚动的距离正好是 transform: translateY(wrap.scrolltop / wrap.clientheight )。thumb 滚动条拖拽处理逻辑:在拖拽 thumb 的过程中,动态的计算 thumb 顶部(左侧)到 track 顶部(左侧)的距离占 track 本身高度(宽度)的百分比,然后利用这个百分比动态改变 wrap.scrolltop 的值,从而触发页面滚动以及滚动条位置的重新计算,实现滚动效果。// 滚动到指定位置。
2022-11-01 19:59:38
843
原创 虚拟滚动(Virtual Scrolling)实现
针对大数据列表一般不会一次性加载,会采用上拉加载或者分页的方式展示。如果 10W 条数据,列表对应着 10W 个 DOM 节点,性能方面体验可能会不太好,因此引入虚拟滚动来优化。虚拟滚动:要渲染完整列表对应的高度是通过 [虚拟计算] 的,并不是文档中存在对应的 DON 节点数。只要 [虚拟列表高度] > [列表可视区高度] 时,就会产生滚动条即可发生滚动操作。在滚动操作时,保证 [实际渲染的列表] 一直存在 [列表可视区] 中,并且动态切换需要渲染的列表数据。
2022-11-01 19:56:58
3404
原创 ant-design-vue 库 Loading 组件封装
ant-design-vue 库中 Spin :用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。
2022-09-20 18:07:13
4360
原创 Vue 注册组件,抽离 withInstall 方法
在组件中,我们通常需要使用 Vue.component 去注册组件后才能使用。最后,我们引入 withInstall 方法,组件注册方法变得更简洁了。
2022-08-11 11:49:57
3700
转载 运行项目时,出现 Syntax Error: TypeError: token.type.endsWith is not a function 的解决方案
问题描述当为项目代码拉取分支后执行npm install下载依赖包,然后执行npm run serve发现项目运行失败,提示信息为SyntaxError: TypeError: token.type.endsWith is not a function。解决方案将 babel-eslint 版本为10.1.0,把版本降为8.2.2,即重新安装指定版本的依赖。npm install babel-eslint@8.2.2 --save...
2022-03-16 23:35:57
8329
1
转载 git 合并分支时,出现“Please enter a commit message to explain why this merge is necessary”如何退出
git 合并分支时,出现 Please enter a commit message to explain why this merge is necessary 问题解决方案:按i键,进入插入(insert)描述操作,可以选择不输入按Esc键,结束插入描述操作按:wq,表示保存并结束本次操作enter 键即可结束本次错误信息...
2022-03-16 23:31:07
4287
转载 npm install 报错 --ignore-scripts
如果npm install报错,单独安装这个包,加上参数:–ignore-scriptsnpm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! deasync@0.1.21 install: `node ./build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the deasync@0.1.21 install script.npm ERR! This is probably not a
2022-02-24 11:40:30
4341
1
原创 Node 相关 API
Node 的 path.resolve 方法import { resolve } from 'path'function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir)}安装依赖yarn add @types/node --devresolve 方法path.resolve([…paths])里的每个参数都类似在当前目录执行一个 cd 操作,从左到右执行,返回的是最后的当前目录。path.
2022-02-22 17:36:11
504
原创 理解 Vue 中的 provide 和 inject
父子组件通过 props 和 emits 来通信。即:父元素通过 props 把数据传递给子元素,子元素通过 emits 通知父元素内部的变化,还可以通过 defineExpose API 的方式暴露给父元素方法,让父元素调用。作用:Vue 还提供了 provide 和 inject API 实现祖先元素和后代元素的通信。使用方法:使用 provide 函数向所有子元素提供数据,子元素内部通过 inject 函数注入使用。使用场景:组件设计内部交互的逻辑,对应子组件提供什么数据,对父组件提供什么方法,
2022-01-28 10:40:32
1131
原创 Vue3 setup 函数中的语法糖
setupsetup 函数结束两个参数:props 和 context 一个普通 javascript 对象,暴露了其他可能在 setup 中的值。export default { setup (props, context) { const visible = toRef(props, 'visible') console.log(visible.value) const { attrs, slots, emit, expose } = context }}at
2022-01-27 10:54:55
2218
原创 JavaScript 中空值判断的常用用法
对项目中的有些空值判断进行容错处理,例如三目运算、|、&、if else 等,下面有几个处理空值的方法:!用 ! 做类型判断,通常用来与变量求布尔值,除了 null、undefined、0、NaN 和空字符串为 true 之外,其余都为 false。// 都为 true!null!undefined!''// 都为false!100!'hello'!!!! 用来做类型判断,对第一次 ! 操作后的类型进行取反,可以简化 null、undefined和空字符串的判断逻辑。va
2022-01-26 14:13:51
2742
echarts legend 排列问题
2020-05-14
echarts 路径图
2020-05-14
echarts 地图类型热力图
2020-05-14
echarts 柱状图渐变色背景
2020-05-14
echarts 设置地图外边框、地图背景渐变以及在地图上打点.js
2020-05-13
axios 常用配置以及请求方法封装
2019-10-13
基于 echarts 第三方库制作地图信息
2019-10-05
基于element-ui 使用 upload 预览图片 (含删除功能)
2019-08-23
vue 封装的 echarts 组件
2019-03-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人