20231229 前端开发周报

Ant Design Web3 发布 1.0 ，聊聊我们的设计理念~；前端部署真的不简单；花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版；⚡️卡顿减少 95% — 记一次React性能优化实践（性能篇）；因为一道try…catch的题，我的面试挂掉了；教你如何白嫖 Github Copilot；一个30岁前端老社畜的人生经历；3年前端 25岁｜ 2023年年终总结

1. Ant Design Web3 发布 1.0 ，聊聊我们的设计理念~

   基于 Ant Design 的 Web3 开源组件库 Ant Design Web3 正式发布 官网：https://web3.ant.design。本文会给大家介绍我们的设计理念。

2. 前端部署真的不简单

   前端部署其实是一个非常严肃的问题，对于大型应用24小时都有人访问，如果你还是用覆盖式更新的方式部署，肯定会导致页面出错的情况发生，因此，这就涉及到先全量部署静态资源，再灰度部署页面的部署流程了。

3. 花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版

   搭建一个后台管理，从零开始开发，其实并不容易，在众多开源管理后台中，Vue3是一个备受瞩目的选择。它是一个现代化的前端框架，具有高效、灵活、易用等特点，今天，要为大家介绍几款开源免费vue3开源管理后

4. ⚡️卡顿减少 95% — 记一次React性能优化实践（性能篇）

   什么？今天我被 Leader 拉进小黑屋了！“有很多用户吐槽咱的页面太卡了”，本文将从笔者近期参与的一个实际业务需求出发，总结性能优化思路，讲述我在 React 中后台场景下性能问题排查的心路历程

5. 因为一道try…catch的题，我的面试挂掉了

   你是否真的了解并会正确使用try…catch呢？你知道try…catch是个同步代码块，不能异步捕获错误吗？一起来看看如何优雅的使用try…catch优雅捕获异步错误吧

6. 教你如何白嫖 Github Copilot

   Copilot 的大名相信各位看官都有所耳闻，有不少人应该也体验过。但受制于 Copilot 高昂的订阅费用「100美元/年」，多数人在试用结束后便不再使用。 寡人使用过三种 AI 代码提示工具，Co

7. 一个30岁前端老社畜的人生经历

   前言 在掘金多年，我一直是一个读者，从事前端快8年了，每天都在看一些视频和资料以及别人的日记，零零碎碎我也做过一些笔记，但是都不成体系。这些笔记至今留存在各种应用上，写了就再也没打开过，还是没有养成习

8. 3年前端 25岁｜ 2023年年终总结

   3年前端 25岁｜ 2023年年终总结 前言 随着2023年的缓缓落幕，我在这个冬日的宁静中，静坐回顾过去一年的旅程。每个瞬间，不论是光芒万丈还是暗影浮现，都成为了我人生故事中不可或缺的一部分。

9. 身份证阅读器web开发示例，支持JS/H5、React、Vue.js、jQuery、Node.js、AngularJS、TypeScript、Electron、JSP、PHP、ASP等语言开发

   文章浏览阅读305次，点赞7次，收藏6次。1、最新适配支持了windows、Linux、安卓、国产系统（麒麟、统信）四大系统网页开发。3、支持身份证、社保卡、IC卡、银行卡、磁条卡等市场上常见卡类型读取识别。2、支持四种身份证类型读取。4、免驱安装，即插即用。

10. VSCode 或许不需要 GitLens

    Git-Lens 中个人所需要的功能非常少，部分实用性功能还需要收费，个人场景下能否可以通过其他插件来替代呢？

11. Reqable项目日志：从桌面端适配移动端的Flutter实践之旅

    Reqable是基于Flutter和C/C++实现的API测试+调试一体化开发工具，分享下Reqable从桌面端向移动端适配的实践总结。

12. react项目中配置代理

    最近在react开发的过程中遇到跨域问题，之前都是交由后端进行处理，但是本次项目调试由于特殊情况，最终交由前端进行处理，很久没有处理过跨域问题了，因此本次配置对于个人来说有些曲折，特意在此进行记录。

13. 我来给你写一个滴水不漏的深拷贝面试官：怎么把getter和setter拷贝上？

    手撕一个最最最完整的深拷贝！看了很多文章实现的深拷贝都属于阉割版…自己汇总一下不同的数据类型处理，一劳永逸！

14. lottie 动画在 vue 中的使用

    前言 最近我所负责的项目中，我采用了动画效果，并开始使用 gif 来实现。然而，在实践过程中，我发现 gif 格式的动画在 git 中出现了明显的锯齿感，这让我非常困扰。为了追求更完美的表现效果，我最

15. 没通知就降公积金的脉脉，面试考什么？

    写在前面 又一家神奇公司映入眼帘： 怎么说呢？自家的瓜出现在自家，至少说明脉脉没有跟微博似的限流。 自家做职场社交，就用自家帖子做全员通知，脉脉你就这么“降本”的吗？ 我再找了一下它们的 sloga

16. JS设计模式之策略模式：灵活、可扩展的编程利器

    策略模式是一种经典的设计模式，它通过将特定操作封装在独立的策略函数中，使得我们能够轻松地切换和组合不同的算法和策略。在 JavaScript 中，策略模式可以帮助我们处理各种条件判断、算法选择和逻辑。

17. 【源码阅读】vue官方状态管理库Pinia，项目中到底还需不需要？

    vue3引入Composition API之后，写法就变得很灵活了。 比如我们可以把一些功能封装成hook,直接使用hook返回的变量。或者直接定义变量引入，那么状态管理库还有必要么？

18. 小公司前端进大厂了，热乎的备面经验与大厂面经来袭

    外包小公司的前端秋招跳槽进大厂了，热乎的备面经验与大厂（美团、字节跳动）面经分享给你！赶紧点进来看看吧！

19. Math.js：一款 JavaScript 和 Node.js 最强数学库

    前段时间有个同学问了我一个需求：如何在一个椭圆上均匀放置任意多的DOM。我一看这个需求，这不得用到"传说"中的初中数学了吗？然后我“掐指一算”还真给忘完了…

20. 这是你们项目中WebView的样子吗？

    这是你们项目中WebView的样子吗？开始前先问大家一个问题，你们项目中或者理想中的WebView的使用姿势是如何的？有哪些规范、功能？都可以在下方评论中说出来大家讨论一下。

21. 工程化第一步这个package.json要真的搞明白才行

    工程化最开始就是package.json开始的，很多人学了很多年也没搞清楚这个为什么这么神奇，其实有些字段是在特定场景才有效的，那每个属性的适用场景和作用是什么，又牵扯很多知识点，今天先解读常用属性和

22. 虚拟DOM已成过去式？全新框架 RE:DOM，纯 JS 的模板语言库

    如果你在近几年使用过JavaScript框架，你可能会听到“虚拟DOM很快”的说法。但是！有些人可能会问：为什么Svelte不使用虚拟DOM，却仍然能运行得如此之快？”

23. nodejs+vue+ElementUi健康饮食养生信息网站 2y3lc

    文章浏览阅读329次，点赞8次，收藏9次。会员用户登录后可以查看健康知识、健康养生、健康饮食、健康资讯、专家指导、在线咨询。管理员登录后，系统管理员有系统的最高权限，负责系统所需所有数据的动态同步更新以及维护，根据系统针对各用户的设计，基本功能需求如下：会员管理、健康咨询、健康知识、健康档案、健康养生、健康饮食管理、健康资讯类型、健康资讯管理、系统管理、专家指导等等。管理员是系统后台的用户角色，可以管理一切的系统信息，主要完成的功能包括，会员管理、健康咨询、健康知识、健康档案、健康养生、健康饮食管理、健康资讯类型、健康资讯管理、系统管理。

24. nodejs+vue+ElementUi家政服务系统c90g5

    文章浏览阅读307次，点赞8次，收藏6次。管理员功能有个人中心，雇主管理，雇员管理，资料认证管理，项目类型管理，服务项目管理，需求信息管理，服务预约管理，申请预约管理，签订合同管理，雇主评价管理，留言板管理，系统管理。代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。开发此程序最关键的设备就是一台电脑，无论是学校计算机室配备的电脑，还是自己入学以来购置的笔记本，都是可以符合开发要求的设备，另外在网络上，学校本已完全覆盖了校园网，所以在设备以及网络上无须考虑经济问题。

25. 【前端工程化-性能优化】性能优化系列之用户体验的优化方案（渲染层面）

    前言 上一篇我们已经围绕“网络层面”探索页面性能优化的方案，接下来本篇围绕“浏览器渲染层面”继续开展探索。正文开始前，我们思考如下问题： 渲染关键环节 优化原则 我们了解“页面渲染关键环节”后，便可知

26. nodejs+vue+ElementUi大学新生入学系统的设计与实现1hme0

    文章浏览阅读191次，点赞2次，收藏2次。学生功能有个人中心，学籍信息管理，入学办理管理等。该系统将采用B/S结构模式，使用Vue和ElementUI框架搭建前端页面，后端使用Nodejs来搭建服务器，并使用MySQL，通过axios完成前后端的交互。(1)管理人员在很短的时间内，通过相关信息的关键字段，就能查询到需要的信息，并且对其进行审核，操作简单，使用便捷，能有效的提高相关人员的工作效率。(3)大学生入学审核系统时使用电脑记录和存储信息的，取代了传统的人工管理和操作，节省了相关工作人员大量的时间和精力，并且信息的准确度能够有所保障。

27. JS的内存泄露与垃圾回收机制

    1、内存管理 程序的运行需要占用内存，JavaScript 是在创建变量（对象，字符串等）时自动进行了内存分配，并且在不使用它们时“自动”释放。释放的过程称为垃圾回收（Garbage Collecti

28. nodejs+vue+ElementUi高校学生心理健康教育辅导系统7w3d0

    文章浏览阅读79次，点赞4次，收藏3次。管理员登陆后可对系统进行全面管理，管理员主要功能模块包括个人中心、学生管理、教师管理、辅导预约管理、学生信息管理、测评结果分析管理、心理健康学习管理、试题管理、留言板管理、试卷管理、系统管理以及考试管理，管理员实现了对系统信息的查看、添加、修改和删除的功能。（3）教师：教师学生登录后主要实现的功能模块包括个人中心、辅导预约管理、学生信息管理、测试结果分析管理、心理健康学习管理、试卷管理、试题管理、留言板管理、考试管理。管理在学生管理界面可查看所有学生信息，并可对其进行修改和删除操作，学生管理界面。

29. 分享一下在 React + Umi + Ant Design Pro 的项目中，遇到的一些需求和问题的解决方案

    什么是umi，什么是Ant Design Pro，首页隐藏侧边栏，其他页面展示侧边栏(登录页除外)，umi内置 tabs 多页签，umi3升级到umi4

30. 前端监控sdk开发（二）js错误捕获

    引言 在前端开发中，JS错误是一个常见的问题，它可能导致页面崩溃、功能异常或用户体验下降。为了及时发现和解决这些问题，我们需要在前端监控SDK中实现JS错误的捕获。 监听全局未捕获的错误 window

31. Tauri：构建高效安全的桌面应用程序 | 开源日报 No.124

    Tauri 是一个开源项目，通过利用 web 前端技术，能够构建高效且安全的桌面应用程序。它的优势在于用户可以通过多个组件，如运行时核心、工具和实用插件，灵活地定制和满足各种需求。

32. 年度盘点，四年的精华合集「GitHub 热点速览」

    今年是 GPT 年，无论是 GitHub 还是朋友圈还是技术平台，即便你不关心 GPT 的发展情况，同大模型、AI 相关的项目总能进入你的信息流。到这期为止，热度速览也连载了四年，从一开始习惯看 Gi

33. 快速了解 Webhook 是什么？有什么用？

    什么是 Webhook "Webhook" 的名字源于它的功能，顾名思义 Web 代表网页，Hook 代表钩子 。当一件事发生时，服务端会将相关信息发送给你设定好的 URL，这个 URL 就像一…

34. JavaScript 中的代理（Proxy）与反射（Reflect）

    前言 JavaScript 作为一门灵活而强大的语言，提供了代理（Proxy）与反射（Reflect）这两个元编程工具，它们为开发者提供了更深层次的语言控制和操作。在本篇博客中，我们将深入研究代理与反

35. dotnet 的跨平台 UI 框架：WPF 的精神继承 | 开源日报 No.123

    Avalonia 是 dotnet 的跨平台 UI 框架，提供灵活的样式系统，并支持 Windows、macOS、Linux、iOS、Android 和 WebAssembly 等多种平台。

36. 如何应对Android面试官->JVM对象回收与逃逸分析

    大厂面试官带你深度理解JVM内存分配原理，通过分配原理带你了解如何进行内存优化，带你轻松应对Android面试官连环炮~欢迎三连

37. 手绘草图直接生成HTML这两个开源项目碉爆了

    利用低代码平台生成直接可访问的 HTML 好像已经不是什么新鲜事了，但是直接通过【手绘草图生成 HTML】应该还是比较少见的吧~~~~~~

38. 让我们来一起探索vue.js中的状态管理模式-vuex

    什么是vuex ？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它充当着集中式存储管理应用中所有组件的状态，并提供了一些规则确保状态只能按照特定方式进行更改

39. 使用开源项目，为你的老板快速创建一个个性化的数据面板

    当业务复杂度很高之后，随之而来团队内部需要查看各种各样的数据，来为未来的战略做决策。所以我们需要一个灵活的工具来制作个性化的数据面板来满足团队内部不同成员（尤其是老板）的各种定制化需求。

40. CSS整洁之道——:is()、:where()和:has()的用法

    CSS整洁之道：今天让我们花5分钟时间学习三个优雅的CSS伪类：:is()、:where() 和 :has()。

41. Flutter到鸿蒙,不是有手就行吗? (列表加载更多)

42. 深入理解 React 的 Suspense 和 ErrorBoundary

    Suspense 组件想必大家都用过，一般是和 React.lazy 结合用，用来加载一些异步组件。 比如这样一个组件： 就可以在另一个组件里用 lazy + Suspense 异步加载： 这里的 i

43. 最强大的CSS布局方案-grid布局基础篇

44. 在NestJs中，如何统一接口返回的数据结构

    在 NestJS 或任何其他现代后端框架中统一接口返回的数据结构是一个非常好的实践，原因包括： 一致性：统一的数据结构使得前端开发者知道每次请求都会收到相同格式的响应，无论是成功还是失败。

45. Flutter基建 – Hero动画有多英雄

    本文主要介绍的是Flutter中Hero动画，它字面意思是英雄动画，其实就是在路由跳转（页面切换）时提供了一种类似飞行的效果，使得页面切换过渡非常丝滑和流畅的视角效果。

46. 【Canvas系列】可视区域内渲染提高 Canvas 的书写性能

    上一节我们通过【Canvas系列】通过离屏渲染提高 Canvas 书写性能，本节我们将介绍如何通过可视区域内渲染提高 Canvas 的书写性能。

47. 【源码系列#04】Vue3侦听器原理（Watch）

    本章目标：侦听器watch是如何兼容ref、响应式对象和getter函数等不同数据源的？回调时机immediate是如何实现的？关于onCleanup，一个用于注册副作用清理的回调函数是如何实现的？

48. HTTPDNS：畅享游戏的无障碍之道

    HTTPDNS是什么？它主要的功能是什么？好处在哪里？它是如何在37手游内落地的？本篇文章将会为你揭晓答案，

49. 找到了GitHub Copilot的最佳免费平替

50. Flex 踩坑指南（文字、图片溢出问题） – Minimum Content Size In CSS Flexbox

51. 使用 Rust 管理 Node.js 版本

    前言 这篇文章主要介绍一个使用 Rust 进行编写的一体化版本管理工具 Rtx，比如使用它来管理 Node.js 版本，它很简单易用，使用了它，就可以抛弃掉 nvm 了。

52. Js代码使用技巧速览

    列举几个我平时写代码的时候用到的超高频使用的js代码组织技巧，快来看看有没有你的菜吧。我觉得第四个和第五个比较新鲜。

53. Chart.js：灵活易用的图表库 | 开源日报 No.121

    Chart.js 是一款简单而灵活的 JavaScript 图表库，适用于设计师和开发者。它具有丰富多样的图表类型和配置选项，可以根据用户的需求创建各种定制化的图表。

54. fabric 首次渲染加载大 JSON 数据优化

55. react-native 富文本编辑器实现

    今年做了自己的第一款独立应用，日记类的app，核心就是富文本编辑器，技术选项做了很久，最后选了lexical，优势是可扩展，可实现很多自定义的功能。下面分享一下我的经验。

56. ☝️重学 Git（一）—— 掌握从常用到进阶的指令操作

    Git 作为一项非常重要的研发软技能，需要我们在能熟练处理基本场景之外，面对复杂的分支情况还能找到最优解。这篇文章将会介绍一系列的指令操作 后续会更新一些复杂的实际场景和解决方案

57. Flutter速来系列23-2、来吧TabBarView选项卡，绚丽的自定义，都能写的呀

58. 浅谈Vue3的逻辑复用

59. 一次性密码输入（OTP）组件状态管理 React Hook 开发实践

    本来想着 React 生态这么好应该能找到一个很好用的 OTP (One-time password) 组件的，结果一通折腾，没发现一个好用的，很多库甚至提供的在线示例就有些奇奇怪怪的小缺陷……

60. 一个插件搞定前端国际化?请收下我的安利