![](https://img-blog.csdnimg.cn/direct/186b09d81a4f4634ba1d50fec866e284.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发
文章平均质量分 76
记录和分享前端开发经验
白雾茫茫丶
专注软件开发技术和生活工作经验分享
展开
-
TS 小技巧: 使用元组生成联合类型
这篇文章介绍了使用TypeScript开发时,如何根据一个数组的值得到一个联合类型。作者介绍了一个开发小技巧:使用元组生成联合类型。文章中给出了具体的开发场景和示例代码,以及实现的步骤。通过将数组转成元组类型,然后将元组类型转成联合类型,可以实现类型检查。原创 2024-06-04 13:58:24 · 336 阅读 · 0 评论 -
HTML - 资源提示符
这篇文章介绍了HTML中的一些优化技术,包括async、defer、preload、prefetch和moudle等标签的使用方法和作用。其中,async和defer标签可以异步加载脚本资源,不会阻止DOM解析,但执行时机不同;preload标签可以预加载指定资源,但不会立即执行;prefetch标签告诉浏览器,未来可能会用到某个资源,浏览器会在空闲时下载;moudle标签可以用于兼容不同浏览器。原创 2024-06-03 16:00:44 · 552 阅读 · 0 评论 -
箭头函数的意义和函数的二义性
这篇文章介绍了箭头函数的特点以及与普通函数的区别。它指出了箭头函数没有this、arguments对象和prototype原型的特点,因此不能作为构造函数使用。文章还解释了函数的二义性问题,即函数可以有多种调用方式,这在JS设计上存在缺陷。最后,文章指出箭头函数不再依赖面向对象的概念,因此没有this和原型的概念。原创 2024-05-29 13:48:00 · 663 阅读 · 1 评论 -
对象解构与迭代器的猫腻?
这篇文章介绍了变量的解构赋值技巧在前端开发中的常用性,包括对象解构和数组解构。文章中给出了一些代码示例,解释了可迭代对象的概念以及如何使用迭代协议来实现数组解构。此外,文章还介绍了生成器的概念并提供了代码示例。作者建议对这些概念不熟悉的读者可以查阅ES6的文档来更好地理解。原创 2024-05-28 17:41:17 · 680 阅读 · 0 评论 -
基于 React + Nest 全栈开发的后台系统
这篇文章介绍了一个基于React+Nest全栈开发的后台系统XmwAdmin。项目包括前端和后端技术栈,线上预览地址和登录信息。作者推荐使用pnpm包管理工具和特定的环境依赖。文章提供了项目的运行和编译代码,以及各个功能模块的介绍。还包括演示图和项目活动以及总结部分。数据库下载链接也提供了,该项目已完成后台的核心功能。原创 2024-05-27 16:42:52 · 1026 阅读 · 0 评论 -
JavaScript 中的二进制散列值和权限设计
这篇文章介绍了JavaScript中使用位运算符进行权限控制的方法。文章首先介绍了JavaScript中的进制类型,包括十进制、二进制、十六进制和八进制。然后解释了位运算符的概念和常用的按位与、按位或、按位异或和按位非操作符。接下来讨论了位运算符在传统权限系统中的应用场景,并给出了一个基于二进制变量表示权限的示例。最后,文章提到了位运算符方案的局限性,例如每个权限码必须是唯一且只有一位为1的限制。但总的来说,在中小型业务中可以使用这种方式进行权限控制。原创 2024-05-23 15:30:32 · 468 阅读 · 0 评论 -
TS 中的类型验算,高级通用 API 实现
这篇文章介绍了一些常用的类型通用API封装,包括TS内置类型和关键字的使用,以及TS compiler内部实现的类型。文章截取了一些常用的类型定义和API示例,如Partial、Required、Readonly、NonNullable、Parameters等。还介绍了一些常用的TS关键字,如extends、infer、keyof、typeof、in等。此外,文章还提供了一些实现示例,如Optional API、GetOptional API和UnionToIntersection API。该文章会不断更新原创 2024-05-22 15:06:51 · 622 阅读 · 0 评论 -
JS 分片任务的高阶函数封装
这篇文章介绍了解决渲染大量元素导致页面卡顿的问题。作者通过展示代码示例和解释,介绍了使用分片任务和高阶函数来优化代码的方法。文章中还提到了requestIdleCallback API的使用、浏览器的渲染原理等相关知识。通过阅读本文,读者可以学习到如何使用高阶函数封装分片任务来提高页面性能,并了解一些与渲染优化相关的知识。原创 2024-04-22 15:58:00 · 701 阅读 · 0 评论 -
React - 实现一个基于 Antd 的数值范围组件
这篇文章介绍了一个数据采集流程中的输入数值范围的控件的开发过程。文章中分别介绍了需求原型、使用场景、实现思路、代码结构、使用方式、参数说明、效果预览和注意事项等内容。其中,实现思路主要包括组件的共用性和拓展性,只能输入数字,以及最小值和最大值的调换位置等功能。文章还提供了相关代码示例和参数说明,并强调该组件是根据公司具体业务需求开发的,可根据实际情况进行拓展。原创 2024-04-19 13:42:42 · 870 阅读 · 0 评论 -
使用 object-fit 属性完美过渡图片
这篇文章介绍了CSS属性object-fit的用法。object-fit属性用于指定元素的内容如何适应指定容器的高度和宽度。该属性一般适用于img和video标签,可以进行剪切、缩放或拉伸操作。文章中展示了通过object-fit属性来统一设置多张图片的样式,保持原始比例并改变显示位置的示例,以及使用object-position属性实现简单的过渡效果。原创 2024-04-18 15:01:41 · 680 阅读 · 1 评论 -
Vercel: 开发者免费的网站托管平台
这篇文章介绍了Vercel的简介、具备的优势以及白嫖党的福利。Vercel是一个云平台,用于构建、部署和扩展无服务器应用程序和静态网站。它支持多种框架和语言,具有快速部署、自动化部署、高度可扩展、全球部署、高度安全、可靠性高、简单易用等优点。使用Vercel无需购买服务器,只需要购买一个域名就可以部署网站服务,而且是免费的,永不过期。文章还提到了作者推荐使用Vercel,并表示后续会介绍Vercel的两种部署方式:Github部署和本地部署。原创 2024-04-10 09:18:25 · 1081 阅读 · 1 评论 -
Vue3 + Vite 构建组件库发布到 npm
这篇文章介绍了如何使用Vite构建组件库,并将其发布到npm上。文章包括搭建项目、调整目录结构、组件开发、整合并导出组件、编写package.json文件、vite打包配置、本地模拟、发布到npm、安装验证等步骤。文章还提供了一个基于Vue3+Element-plus封装的Table组件的示例,演示了如何运行和使用发布的组件。原创 2024-04-09 10:06:48 · 2446 阅读 · 0 评论 -
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。原创 2024-04-08 13:59:15 · 702 阅读 · 0 评论 -
Nuxt3 实战 (三):使用 release-it 自动管理版本号和生成 CHANGELOG
这篇文章介绍了如何使用release-it工具实现以下功能:增加版本号并提交Git、生成变更日志(Changelog)并提交到Git、创建Git标签并推送到远程仓库、发布到npm等软件仓库、在GitHub、GitLab等平台创建发行版。文章还提到了前置知识,介绍了SemVer规范的内容和安装依赖的步骤。在文章的最后,展示了使用release-it生成的效果预览、git打的标签Tag以及待办事项(Todo)。最后还提到了安装NuxtUI。原创 2024-04-07 13:46:12 · 878 阅读 · 0 评论 -
Nuxt3 实战 (二):配置 Eslint、Prettierrc、Husky等项目提交规范
这篇文章介绍了项目规范的重要性和如何配置一些工具来提高代码质量、团队协作、降低维护成本、提升软件可靠性和促进项目管理。工具介绍了Eslint和Prettier,并且提供了安装和配置的步骤。文章还提到了如何配置Husky和Commitlint来检查提交风格的规范性,并最后提到了需要使用 release-it 自动管理版本号和生成 CHANGELOG 的任务。原创 2024-04-01 19:41:37 · 2349 阅读 · 1 评论 -
Nuxt3 实战 (一):初始化项目
这篇文章介绍了Nuxt框架的基本信息,包括什么是Nuxt以及Nuxt3的优点。文章还介绍了Nuxt3的一些特点,如服务端渲染和静态站点生成、模块化、文件系统路由等。此外,文章还提供了项目安装的步骤和目录结构。最后,文章提到了下一步计划,即配置 Eslint、Prettier、Husky、lint-staged、commitlit项目提交规范的过程。原创 2024-03-29 11:37:53 · 1395 阅读 · 1 评论 -
React - 实现一个基于 Antd 的密码强度校验组件
这篇文章介绍了一个基于Nest和Umi技术栈的个人项目开发中用到的密码强度校验组件的开发过程。作者首先在网上找不到满意的资料,于是决定自己开发该组件。文章依次介绍了效果预览、组件思想和组件开发的过程,并提供了相应的代码示例。最后,作者展示了实际效果,并提供了仓库地址供参考。原创 2024-03-28 09:44:43 · 337 阅读 · 2 评论 -
mix-blend-mode 利用混合模式让文字智能适配背景颜色
这篇文章介绍了一种CSS3属性:mix-blend-mode,它可以实现文字智能适配背景颜色和文字镂空效果。通过设置mix-blend-mode为difference,可以在黑色背景中显示白色文字,在白色背景中显示黑色文字。同时,文章还提到了mix-blend-mode的其他属性,如multiply、screen等等,感兴趣的读者可以进一步研究。原创 2024-03-27 09:15:15 · 536 阅读 · 0 评论 -
基于 Vue3 + Element-plus 封装的 Table 组件
这篇文章介绍了一个名为vue3-xmw-table的项目,包括项目信息、使用方法、Table属性、Column属性、tableConfig配置项、Page配置项、Slot插槽和Events事件。文章还提供了一些代码示例和配置项说明。该项目已不再维护,但可以将源码拷贝到本地进行拓展。文章没有提到任何建议和缺少的内容。原创 2024-03-26 09:57:22 · 1458 阅读 · 0 评论 -
现在浏览器的渲染原理及流程
这篇文章介绍了浏览器渲染页面的过程。从解析HTML到重绘,文章详细讲解了每个阶段的输入和输出,并介绍了浏览器为提高渲染效率所做的优化措施,例如transform的高效率原因和重排的异步完成。同时,文章强调了浏览器的优化使得现代页面展示非常流畅的重要性。原创 2024-03-25 15:55:38 · 1340 阅读 · 0 评论 -
2024年的学习规划和网站建设计划
这篇文章介绍了作者今年的学习计划和网站建设计划。学习计划中包括了Nuxt.js-服务端渲染的介绍和选择Nuxt.js学习的原因,以及Vue3 + Vite项目建设的规划。作者还提到了建设博客和记录学习笔记的计划。总结部分包括了学习Nuxt.js技术、Vue3 + Vite项目建设、博客内容和学习笔记的目标。作者表示会根据情况进一步研究其他有趣的东西。原创 2024-03-22 16:52:48 · 609 阅读 · 1 评论 -
基于 Vue3 + Element-plus 表单 Form 组件二次封装
这篇文章介绍了一个名为vue3-xmw-form的项目,提供了使用方法、Form属性、Form方法、Column配置、xType表单类型以及存在的问题等信息。其中包括了项目的预览地址和Github链接。文章还讲解了如何在页面上使用该组件以及调用方式,以及列举了Column配置参数的说明。最后,作者提到了一些目前存在的问题,例如无法支持所有xType的所有方法、无法正确回显和数据绑定Tree组件等,并表示该项目目前不再维护。原创 2024-03-22 09:47:21 · 1401 阅读 · 0 评论 -
使用 sort-imports 排序规则美化头部 import 代码
这篇文章介绍了解决开发中头部import代码冗余的问题,特别是在使用React技术栈的情况下。作者介绍了头部import代码过多时,可读性差的情况,并提出了使用Eslint插件来对代码进行排序的方法。作者详细介绍了如何安装和配置eslint-plugin-simple-import-sort插件,并演示了配置文件中的规则。最后,作者展示了经过处理后的代码,提高了代码的可读性。原创 2024-03-21 15:14:55 · 412 阅读 · 0 评论 -
基于 React 的今日热门榜单平台
这篇文章介绍了一个基于React搭建的热门榜单汇总项目。作者花了几天时间收集微博、抖音、百度等热门平台的API接口,并使用React搭建了一个全网热点尽览的热门榜单。文章还提供了项目的预览和运行方式,并介绍了使用Vecel进行本地部署的方法。作者还表示后续会添加一些功能,如支持拖拽排序和主题切换动画。最后,作者鼓励读者可以给项目点个star来支持。原创 2024-03-19 16:33:50 · 1061 阅读 · 1 评论