- 博客(188)
- 收藏
- 关注
RSS订阅原创 2024最新前端八股文
不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是。
2024-09-30 10:38:15
1358
原创 纯CSS实现有趣emoji切换开关
通过使用CSS变量、3D变换和过渡效果，创建了一个既美观又功能丰富的Emoji Toggle按钮。这个交互效果极大了增强了用户体验。希望这篇文章能激发你探索更多CSS的可能性，感兴趣的可以尝试看看～原文链接：https://juejin.cn/post/7419166509908049961。
2024-09-30 10:18:28
632
原创 网页版的淘宝首页不好看，那就自己给官方写一个并投稿上去
换肤地址！！原文链接：https://juejin.cn/post/7417847557047599123。
2024-09-30 10:17:07
284
原创 Nuxt3快速入门
在/src目录新增app文件夹，文件夹下建立router.options.ts文件（如果没有使用本文中的/src目录的配置，要在根目录下新增app文件夹）。该文件返回定制路由的函数来覆盖路由，如果返回 null 或 undefined， Nuxt将退回到默认路由。text代码解读复制代码ts代码解读复制代码访问其他未定义页面路由，比如原本的，提示404；原因是自定义路由完全替换了自动生成的路由。如果我们只是希望在自动导入的路由下，添加自定义路由，应该使用钩子配置。
2024-09-30 10:14:10
1059
原创 弃用 Echarts！这一次我选择 - Vue Data UI！
如果你的仪表板这么好，为什么你的用户要求 CSV 导出功能？这个开源库的目的是为最终用户提供一组围绕图表和表格的内置工具，以减少重新计算导出数据的麻烦。当然，Vue Data UI 保留了导出为 CSV 和 PDF 的选项，以防万一。数据，是现代商业决策的基石。但如何将复杂的数据转化为直观、易理解的视觉信息？这正是致力于解决的问题。
2024-09-30 10:12:45
483
原创 如何让线宽不管怎么缩放画布，都保持渲染为 1px
你说，诶，我把图形 stokeWidth值设置为 0.5，那放大 2 倍，渲染出来的线宽还是 1，这样也实现了渲染 strokeWidth 不变的效果。还有一种就是计算图形的所有场景坐标系点，转换为视口坐标系的点，然后放到在视口坐标容器上，因为 zoom 永远为 1，此时 strokeWidth 设置为 1px 即可。比如图形的线宽为 1px，如果画布放大为 2 倍，线宽也会渲染为原来的两倍。遗憾的是，strokeWidth 不管设置为多少，渲染的都是 1px，这是 WebGL 特性带来的效果。
2024-09-29 10:44:03
870
原创 深入理解 React 中的虚拟 DOM：工作原理与性能优化
虚拟 DOM 是 React 的核心技术之一，通过它，React 能够在不牺牲性能的情况下，简化我们与 DOM 的交互。然而，随着应用规模的扩大和复杂度的增加，我们依然需要通过一些额外的优化手段来提升性能，如合理使用key、缓存计算结果和函数，以及避免不必要的重新渲染。掌握这些技巧后，我们可以最大限度地利用虚拟 DOM 的优势，构建高效的 React 应用。希望本文对你深入理解 React 的虚拟 DOM 有所帮助，并能在实际开发中提升你的应用性能！
2024-09-29 10:42:46
804
原创 Element Plus表单子项label属性与插槽用法的小坑
中表单子项的label属性的值为空时不会被渲染在DOM树上，而在v-slots插槽中label的值为空时仍会被渲染在DOM树上。在插槽中label属性的值要赋为null才不会被渲染在DOM树上，属性中传入空字符串''就可以。作者：limyer链接：https://juejin.cn/post/7419532382803410994来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
2024-09-29 10:41:14
911
原创 CSS样式属性之文本
大家好🎃，我是一名前端初学者，今天要学习和讲解的内容是CSS的文本属性，在前面的文章中我们学习了HTML标签和CSS最常用的几个属性，其实有了这些知识我们就能编写最基础的网页了，但是如果想要开发更加复杂的网页需要扩展更多的知识，CSS的文本内容就是开发更加复杂网页必须要掌握的基础知识，废话不多说那么让我们开始吧🐧~这篇文章到这里就结束了🎉，这篇文章我们学习了CSS的文本常见的属性，经常用到的是text-align。
2024-09-29 10:38:22
372
原创 在vercel部署项目时除首页外刷新报404
这是因为vercel的路由配置问题，vercel默认会将所有的请求都重定向到首页，所以在刷新页面时会报404。原文链接：https://juejin.cn/post/7419132517380948020。然后等待vercel重新部署项目即可。在public文件夹下创建一个。在项目根目录下创建一个。
2024-09-28 11:07:03
269
原创 太坑了。。。Git仓库为什么越来越大
随着版本的迭代，仓库大小会越来越大，对于大文件的提交（视频、jar、SDK..）一定要慎重考虑是否提交到仓库，避免不必要的困扰。执行shell代码解读复制代码执行git reflogshell代码解读复制代码执行git gcshell代码解读复制代码号外最近低代码强力更新，欢迎大家体验原文链接：https://juejin.cn/post/7419123474700697627。
2024-09-28 11:03:36
680
原创 大话前端组件
在软件工程中系统的架构也在随着规模不断的演进，最初的面向过程的软件开发到现在面向对象的软件开发。软件工程也逐渐进入组件化开发阶段。然而前端的组件化的发展一直滞后，传统的桌面开发早已经进入组件化开发阶段。Web1.0时代前端主要是HTML与CSS的天下，JS则是简单的辅助工具而已。到了Web2.0时代前端开始走向以AJax技术为核心轻量级别交互，以JQuery、ExtJS、Dojo代表前端类库（后两者为框架）为导向的开发开始迅猛发展。JQuery在前端领域叱咤风云多年，人们都纷纷认为JQuery战无不胜。
2024-09-28 10:59:29
1202
原创 Sharp.js：简单而又实用的图像处理库。
在现代Web开发中，图像处理是一个不可或缺的部分。前端开发者经常需要处理图像，以确保它们在不同的设备和分辨率上都能保持良好的显示效果。sharp.js是一个高性能的Node.js模块，它利用了libvips库，提供了快速且高效的图像处理能力。本文将介绍sharp.js的基本使用和一些进阶技巧。sharp.js是一个基于Node-API的模块，它能够将大型图像转换为更小、更适合网络传输的格式，如JPEG、PNG、WebP、GIF和AVIF。它支持所有支持的JavaScript运行时环境，包括。
2024-09-28 10:38:46
639
原创 FormCreate:支持可视化设计的低代码表单组件
FormCreate是一个基于Vue.js的表单设计器，它允许用户通过简单的拖拽和配置来创建复杂的表单，极大地提高了表单设计的效率。下面，我们将详细介绍FormCreate的各项特性。
2024-09-28 10:37:00
717
原创 rust加持下，老项目也能飞起！ vue-cli 迁移 rsbuild (vue3)
截至2024年9月，vue-cli已经不怎么更新了，vue-cli基于webpack创建，迁移到vite的成本并不算低，还好有rsbuild，兼容webpack，让迁移成本大大降低。rsbuild 是rspack的上层封装，配置更简单些。
2024-09-27 10:05:43
384
原创 Vue 3.5 双向链表如何实现依赖收集
安装响应式系统包, 核心代码如下所示，通过 debugger 直接进入reactivity包调试jsx代码解读复制代码。
2024-09-27 10:05:00
906
原创 Flash Waimai：饿了么外卖平台开源项目
这是一个仿照饿了么的外卖平台，包括手机端、后台管理以及 API 服务，基于 Spring Boot 和 Vue 的前后端分离的外卖系统。虽然项目主要是为了交流学习，不建议商用，但它提供了一个完整的框架和丰富的功能，让你能够深入理解外卖平台的运作机制。该项目使用的技术栈包括Spring Boot、Vue.js、MySQL和MongoDB等，是一个非常适合学习和二次开发的项目。不仅仅是一个简单的演示项目，它拥有完整的外卖业务流程，包括用户下单、商家接单、配送员配送等。，支持 H5、微信小程序和 APP。
2024-09-27 10:02:39
750
原创 数据结构对决：Set vs Map
下面聊聊set和map的特殊的点吧~Set为ES6提供的一种新的数据结构，它类似于数组，但是成员的值都必须是唯一的，没有重复的值。Map解决了传统意义是只能将字符串当作键的问题。
2024-09-27 10:01:08
774
原创 我早就看现在的工作流不爽了！- 前端使用 Jenkins
目前笔者所在的小公司的前端项目还是推送到git仓库后由另一名后端拉取代码到他电脑上再build，然后再手动同步到服务器上，比较麻烦，而且出现一个bug就要立即修复，笔者一天要说100次“哥，代码更新了，打包上传下吧，球球了”，终于我实在受不了了（上传代码的这位哥也受不了了），于是想通过 Jenkins 实现简单的前端项目自动打包部署。需要丸整或更多前端详情的朋友。
2024-09-26 10:53:50
183
原创 VSCode插件之Remote-SSH
一台机器想要免密访问其他机器，需要把自己的公钥内容发送到别的机器的authorized_keys中去，并在本机config文件中配置私钥文件位置。你可以选择在生成密钥对时为其指定不同的文件名。请注意，-f 后的id_rsa_linux 和 id_rsa_windows 只是示例文件名，你可以根据需要选择其他文件名。系统会在你指定的路径（本例子为 /Users/YourUsername/.ssh）下生成两个文件，分别是id_rsa_linux.pub和id_rsa_linux，前者为生成的公钥，后者为私钥。
2024-09-26 10:40:48
375
原创 iconv-lite：一个库搞定所有字符编码问题？
在全球化的开发环境中，处理不同字符编码已成为许多应用程序的关键需求。无论你是在开发需要支持多语言的应用，还是需要处理来自不同源的文本数据，一个高效且可靠的字符编码转换工具可以大大提升你的开发效率。今天，我们要介绍的是 iconv-lite 这个纯 JavaScript 实现的字符编码转换库，它能帮你轻松处理各种字符编码转换问题，特别是中文字符编码问题，用它准好使！iconv-lite是一个轻量级的纯JavaScript实现的字符编码转换库。它提供了一个简单而强大的接口，用于在不同字符编码之间进行转换。
2024-09-26 10:38:45
676
原创 用 contentEditable 快速封装一个组件，产品直呼：你这效果真令我欢喜！！！
整个组件实现起来还是比较简单的，核心就是 contentEditable 属性，但实际以上实现还有很多缺陷，比如删除初始内容再输入时会将输入的内容保持在初始 DOM 元素中而不是创建新元素，以及删除初始内容的过程中针对于表单项的删除十分怪异，后来跟产品沟通了一下都还可以接受就没有再去优化。需要哪些 props？最近已经上手公司的业务了，但是整体难度不大，因为大部分的总结都是写在了内网语雀里，外加下班后回家被杨戬各种虐，“猴欢喜” 的台词听了有小几十遍🤐，所以好久没有在掘金上写过文章了😶。
2024-09-26 10:36:19
872
原创 虚拟列表，实战复制到项目中，解决几万条数据滚动卡顿
常网IT源码上线啦！本篇录入吊打面试官专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。接下来想分享一些自己在项目中遇到的技术选型以及问题场景。《爱在黎明破晓前》我见了你一面，便用一生去怀念三部曲讲解了青春、中年、老年的爱情，触动挺多的。今天像往常一样，开开心心的打代码编程。
2024-09-26 10:30:37
1027
原创 问题合集更更更之cssnano配置导致打包重新计算z-index
👏问题合集更更更之cssnano配置导致打包重新计算z-index~🥇cssnano是一个基于PostCSS的CSS优化工具。cssnano的主要功能是对CSS文件进行多方面的优化，以确保最终生成的文件对生产环境来说体积是最小的。它通过采用格式良好的CSS并通过许多优化措施，来确保最终的生产环境中的文件尽可能小。cssnano的优化措施可能包括但不限于压缩CSS代码、合并选择器、删除未使用的样式等，从而减小文件大小，提高网页加载速度。
2024-09-25 10:21:37
591
原创 js狠疯狂：10分钟生成项目，前后端一体化高效开发方案
原文链接：https://juejin.cn/post/7415672130212626432。
2024-09-25 10:20:18
1042
原创 NestJS实战-产品需求规划
前端这边打算用我最了解的react一套，后端就是要介绍的NestJs，数据库就最常用的MySQLTypeORM。前端React@18TypeScriptantd@5.13UMI@4后端NestJSTypeScriptMySQLTypeORM身份验证JWT。
2024-09-25 10:19:22
992
原创 语义化版本控制和分发标签
分发标签是 npm 的独有产物，一个标签同一时刻只能指向一个版本。npm 默认内置的分发标签就是@latest。对于发布者自定义的标签名称，也同样建议全部使用字母命名，且不以字母v开头。例如：alphabetarc等。以react为例，它的分发标签就有：canary→ (alpha→beta→rc) →next→latest，在此之外，React 还有一个特别的分发标签，那就是(主要用于一些包含实验特性的版本)。创建分发标签的方式有两种，一种是通过手动创建，然后在发布时同步到 npm 上。
2024-09-25 10:16:28
1445
原创 Spring Boot起步，CRUD、错误处理与宝塔部署
java代码解读复制代码;：导入GetMapping注解，这个注解用于处理HTTP GET请求。它可以将一个方法映射到特定的URL路径。;：导入RestController注解，这个注解用于标识一个类为RESTful控制器。它的作用是将控制器中的每个方法的返回值直接作为HTTP响应体返回，而不是返回一个视图。结合起来，这段代码通常出现在一个Spring Boot应用中，用于定义一个处理GET请求的RESTful API控制器。java代码解读复制代码} }
2024-09-25 10:14:51
1320
原创 如何详细区分watch 和 computed
在 Vue.js 中，watch和computed是响应式编程中非常重要的工具。合理使用它们可以提升应用的性能和可维护性。原文链接：https://juejin.cn/post/7417847455852052492。
2024-09-24 10:20:34
432
原创 CSS变量和CSS函数
CSS变量和CSS函数可以帮助开发者方便地实现功能。css代码解读复制代码CSS变量名以--开头；变量可以继承父元素的值；var第2个参数为备用值，变量不生效时被使用；常用的css函数包括：calc()、linear-gradient()、translate(), rotate(), scale()、rgba()、hsla()、attr()、clamp()、min()、max()。css代码解读复制代码css代码解读复制代码css代码解读复制代码rgba(红，绿，蓝，透明
2024-09-24 10:19:22
541
原创 Driver.js：用户引导还停留在静态页面？该升级了！
在开发现代web应用时，为用户提供清晰的功能引导和交互指引已成为提升用户体验的关键因素。无论是新功能介绍，还是复杂界面的操作指导，一个直观且灵活的引导工具可以大大提高用户的理解和参与度。今天，我们要分享的是Driver.js这个功能丰富的 JavaScript 库，它可以帮助你轻松创建引人入胜的用户引导体验。Driver.js 是一个轻量级、无依赖的 JavaScript 库，旨在为网页应用提供强大的用户引导和功能突出显示功能。
2024-09-24 10:18:28
510
原创 全网最详Babylon.js入门教材(5)-设置光源
Q：Babylon.js是什么？🤔️是一个强大的、开源的、基于WebGL和WebGPU的3D引擎，用于在网页上创建和渲染3D图形。它提供了一套丰富的API和功能，包括物理引擎、粒子系统、骨骼动画、碰撞检测、光照和阴影等，可以帮助开发者快速创建复杂的3D场景和交互。Q：我为什么要写该系列的教材?🤔️因为公司业务的需要因而要在项目中使用到Babylon.js，虽然官方的文档看起来覆盖面都挺全，且。
2024-09-24 10:17:41
1063
原创 对iframe嵌套的页面进行同域代理时需要注意哪些问题
资源路径是绝对路径，适合根目录部署。./：资源路径是相对路径，适合子目录或本地文件打开的情况。
2024-09-24 10:14:55
877
原创 StreamSaver.js执行过程分析
接下来根据文件名和随机数，创建一个 pathname 路径，和 supportsTransferable 的值一起，打包到一个对象中，稍后会发送。使用 location.href 触发浏览器创建文件，拿到这个文件的 stream，然后使用 pipeTo 往 stream 中写入内容。，如果不支持，后面会降级成非流式保存文件（当整个文件内容返回完毕后，才保存文件）会创建一个文件，然后流式下载。只能拦截注册后接收到的请求，所以需要在前端再次发送请求），触发。效果就是，等待整个文件的内容都返回了，才保存成文件。
2024-09-23 11:22:54
789
原创 十年跨平台开发，Electron 凭什么占据一席之地？
其实一直想系统的写一写 Electron 相关的文章，之前在掘金上写过，但是现在来看那些文章都写得挺粗糙的，所以现在我决定系统整理相关的知识，输出自己更多 Electron 开发相关的经验。这一节我们主要是来认识一下 Electron，这个已经有 10 年历史的跨端开发框架。我将从诞生背景，优劣势，生态，案例以及和其他框架的对比这几个方面带大家来认识 Electron。
2024-09-23 11:16:19
1039
原创 为什么文件上传后，打开文件提示已损坏？
常网IT源码上线啦！本篇录入技术选型专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。接下来想分享一些自己在项目中遇到的技术选型以及问题场景。今天看了泰坦尼克号你知道吗，我这辈子最幸运的事，就是赌赢了船票，然后遇见了你。压力--今天像往常一样，开开心心的打代码编程。突然产品说：现在上传后文件打开不了。
2024-09-23 11:11:15
1327
原创 Vue3: computed都懒更新了，version计数你还不知道？
实际上对Vue3.5在性能方面起到大作用的是双向链表，version计数器属于是锦上添花。但通过分析globalVersion、dep.version如何自增，以及如何快速判断是否需要更新的逻辑，其实对双向链表也了解的八九不离十。双向链表上，横向是订阅者Sub依赖的Dep的链表节点，而纵向上是响应式value对应Dep关联的订阅者的链表节点。
2024-09-23 10:56:14
983
原创 三年前端开发的面试历程 + 资料分享 + 内推
大家好，最近一位前端三年的粉丝说，自己要回老家做生意了，不打算做这一行了，留下了很多面试经历的笔记，资料，还有一些前端八股文和场景题，简历模板也攒下了很多，他说希望可以帮助更多的前端人，证明前端并没有死，两个⼗六位的端⼝号 ，分别为源端⼝ ( 可选字段) 和目标端⼝ 整个数据报⽂的长度整个数据报⽂的检验和 ( IPv4 可选 字段)， 该字段用于发现头部信息和数据中的错误。基本类型有六种： null ， undefined ， boolea n， number ， string ，UDP 也是不可靠的。
2024-09-23 10:54:38
623
原创 Flutter 重构：NFileUploadBox组件重构
1、使用：比如第一个 app：OneApp，通过继承 NFileUploadHandle 重写 UI 即可：dart代码解读复制代码class NFileUploadOneApp extends NFileUploadHandle { /// 子项 @override NFileUploadItem buildItem({ double??"--";String?//重写子项样式(builder已返回必须的逻辑参数) }, );
2024-09-21 10:24:54
509
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人