20231215 前端开发周报

一个30岁老前端的人生经历（学习+工作+婚姻+孩子），给迷茫的朋友一点激励；我在大专院校教前端（一）；面试官：”Vite为什么快？“；前端学哪些技能饭碗越铁收入还高；给迷茫的朋友一点建议吧，主要是前端方向的；一个极致轻量的 Vue3 后台管理，继 1.2k Star 后，终迎 2.0 版本，这次有点东西；在 Docker 容器中运行 macOS：接近本机性能，实现高效运行 | 开源日报 No.96；快手面试官：页面上有100个li，你知道怎么实现”点击li能console.log里面的内容“这个功能吗

1. 一个30岁老前端的人生经历（学习+工作+婚姻+孩子），给迷茫的朋友一点激励

   我93年的，还差几天就到30周岁生日了。做前端开发大概也有6、7年，算是老前端了。 和大家分享一下我的人生经历，与君共勉。

2. 我在大专院校教前端（一）

   现在行情差，初级前端已经饱和并暴雷，各大培训机构前端方向要么关闭，要么缩减严重。对于一个37岁的老前端来说，大学老师或许是一个比较好的归宿！

3. 面试官：”Vite为什么快？“

   前面一篇文章介绍了如何做 Vite 的插件开发 # 20分钟掌握 Vite 插件开发，这篇文章介绍清晰 Vite 的构建原理，为什么比 Webpack 构建速度快这么多。

4. 前端学哪些技能饭碗越铁收入还高

   随着经济的下行以及移动互联网发展趋于成熟，前端同学如果能在端智能、图形学以及工程提效等方向深耕，依然可以找到既稳定收入还高的工作。

5. 给迷茫的朋友一点建议吧，主要是前端方向的

   前两天分享了一篇自己的个人经历，没想到引来了那么多人共鸣，很多人留下了评论，大部分评论我都认真看了，并且也回复了，有的评论建议真的很棒，对我的帮助很大，很感谢。这次结合上篇评论给迷茫的兄弟一些建议。

6. 一个极致轻量的 Vue3 后台管理，继 1.2k Star 后，终迎 2.0 版本，这次有点东西

   Vue Naive Admin 从2022年2月开始开源，其简单易上手的特性广受好评，继1.2k Star后，终于迎来了2.0版本，这次有点东西

7. 在 Docker 容器中运行 macOS：接近本机性能，实现高效运行 | 开源日报 No.96

   这个项目是 Docker-OSX，它允许在 Docker 容器中运行 Mac OS X，并提供接近本机性能的表现。该项目主要功能包括支持 X11 转发、iMessage 安全研究、iPhone USB

8. 快手面试官：页面上有100个li，你知道怎么实现”点击li能console.log里面的内容“这个功能吗

   Hello everyone～ 笔者前段时间参加了快手国际化的面试，一面有一道题目当时做了好久，一直没有做出来，后面事情太多了，自己又比较懒散，就没有整理。这段时间很多事情都告一段落了，我也觉得我可以

9. 实用干货：推荐4个超级好用的Vue库，你可能不知道

   然后，今天大澈精心整理了4个十分不错的Vue库，分享给大家。 以便大家在项目中遇到此类需求时，能有一个印象，知道有这么一个可以用的东西，不至于两眼空空蛮干哈。

10. 2024 年最值得推荐的 7 个 Vue3 组件库

    马上 2024 年啦，给大家推荐 7 个好用的 Vue3 组件库，如果你的项目正在使用 Vue3，或者打算升级 Vue3，这些 Vue3 组件库或许是不错的选择。

11. 看了粉丝的简历，总结一篇面试避坑指南

    在这个互联网寒冬，如果待毕业或者已经毕业，该如何开启自己的面试之旅？前方的黑暗之旅的终点在哪？请点赞收藏好这篇文章

12. 年底事故频发，做前端会不会出大型事故?

    炽天使-S-蛇女-甜甜果实 前言 最近崩的有点多，来看看都有哪些 语雀崩了… 阿里云崩了… 滴滴崩了… 腾讯视频崩了… …… 刚看完《三体》三部曲，最后一部《三体3：死神永生》

13. GitHub 跑了 1200 多台 MySQL 主机，如何实现无缝升级到 8.0 版本？

    GitHub 团队近日分享了他们将 GitHub.com 的底层数据库无缝升级到 MySQL 8.0 的经验，我们来看看他们是如何完成了这一壮举。

14. flutter：【实战篇】MLKIT 实现OCR文本识别，再也不用付费SDK了

    实现OCR相机预览识别文本，支持局部锁定。告别大厂收费模式，使用 Google ML Kit 全家桶。

15. 7个Js async/await高级用法

    在掌握了async/await基础用法之后，下面将介绍一些高级用法，以便充分利用async/await实现更复杂的异步流程控制。

16. 深入浅出 Vite5 中依赖预构建

    天下武功，唯快不破。万字长文带你深入浅出 Vite “预构建”过程，从思路、实现再到源码，一步一步带你揭开 Vite 的神秘面纱，

17. Web 工具集成——让 All in One 成为可能

    接下来要介绍的“Web 工具集成”这款重量级插件，就能让你在思源笔记中使用各种 Web 应用，从而让“All in One”在思源笔记中成为可能！

18. 一网打尽主流的微前端框架生命周期/路由/资源系统：原理篇

    本文接上文 一文带你打通微前端任督二脉-原理篇(qiankun/microapp/icestark/wujie全解析),建议先阅读上篇再阅读本篇文章 这篇文章主要讲述怎么设计一个微前端架构的系统，参考

19. 了解前端新框架-nue.js

    最近前端又出来一个新框架/库，名为nue.js。9.13号提交了第一个commit，到今天已超过4.5k个star。

20. 全网最全盘点2023年20大前端状态管理库

21. 跟杰哥一起学Flutter (五、Flutter UI基础速通)

    介绍下Widget的四个直接子类 + 安利一个查Flutter组件的神器 + 常用UI布局组件 +低仿写个简陋的静态掘金首页

22. 化繁为简：Flutter组件依赖可视化

    各个业务模块之间的依赖关系是怎样的？如何能让依赖关系可视化？原生有没有这种通用的技术方案？答案是显而易见的。

23. 国产开源富文本 开箱即用

    wangEditor一个简洁易用，功能强大的富文本编辑器，它支持在多框架中使用，快速接入，配置简单，几行代码即可生成。 官方地址： https://www.wangeditor.com github：

24. JS设计模式之状态模式：优雅地管理应用中产生的不同状态

    JavaScript 状态模式是一种行为设计模式，用于通过将对象的行为和状态进行解耦，使得对象能够在不同的状态下具有不同的行为。它允许一个对象在其内部状态改变时更改其行为，而无需改变对象本身的结构。

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

26. 利用 github action 生成 docsify 的文件目录

    利用 github action 在推送代码的时候生成 docsify 的文件目录，使docsify显示的文件目录一直保持最新的状态

27. 三大微前端框架，哪个才是你的理想型？

    文章主要从原理、优缺点出发，深入剖析现在市面上最流行的三大的微前端框架。带领读者彻底理解微前端，同时也会给出一些选型上的参考。

28. 猴赛雷的pointer-events，一个你可以用不到但是不能不知道的 CSS属性

    只在再一次面试中，面试官问我：如果有两个元素，一个元素覆盖到另一个元素上，如何做到点击上面的元素触发下面的元素？

29. vue语法，if和else怎么叛变了？

    前面我们简单认识了一下vue，讲的还算全面，这次就先来学一下它的简单指令的用法吧！ v-if和v-else 代码解释 这段代码是一个使用Vue 3创建的简单示例，展示了如何在模板中使用v-if和v-e

30. 初识 Vue 带你认识前端主流框架 渐进式js框架 vue

    初识Vue 改变js的开发模式 哈喽哈喽，我是你们的金樽清酒，最近啊刚开始学了点新的东西，刚接触了一点点就被迷住啦，它完全改变了我们的开发模式，使前端的开发变得更加的简洁高效，并且还具有很多强大的功能

31. 大家好，我是龙博，我们花了两年做了个非常酷的开源低代码工具

    ILLA是一个开箱即用的低代码工具，希望大家能使用一下去解决公司里面搭建内部系统的问题，专注各种管理后台，也就是大家无法购买到的系统，只能通过传统前端方式构建，大家都知道没有前端喜欢写后台

32. nodejs+vue+ElementUi中小型医院门诊挂号系统网站il5n0

    文章浏览阅读330次，点赞8次，收藏7次。在系统的实现上，也针对医院各种繁杂的事务处理进行梳理，帮助维持工作人员的工作秩序与工作习惯，也确保整个系统功能完整、操作简单，让使用者感受到系统带来的便捷和高效。在系统页面的交互上，秉持响应迅速、界面友善、易学易用等特点，让系统所拥有的任何其他功能(指支持窗口业务处理之外的功能)应该尽量的是后台的、隐藏的、不被终端用户所感知的、不增加或尽量少增加窗口业务处理人员的负担。文件繁多，还容易丢失，对信息进行高效的处理的重要方法是在设计时充分考虑到各个方面，对数据库的各项信息进行归纳整合，简化数据的存储。

33. CSS_Flex 那些鲜为人知的内幕

    大家好，我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder。今天，我们来讲讲css-flex那些不为人知的秘密

34. nodejs+vue+elementui游戏玩家账号租赁交易系统的设计

    文章浏览阅读312次，点赞10次，收藏7次。课题主要分为三大模块：即管理员模块、玩家模块和卖家模块，主要功能包括：个人中心、玩家管理、卖家管理、游戏分类管理、游戏账号管理、订单管理、系统管理等；为了节省时间和提高工作效率，越来越多的人选择利用互联网进行线上打理各种事务，通过线上管理游戏账号出租也就相继涌现。他们不仅希望页面简单大方，还希望操作方便，可以快速锁定他们需要的游戏账号出租管理方式。3、租号管理:管理自己发布的账号信息;、订单管理:管理游戏账号售卖信息;4、用户管理:管理玩家和号主的信息。5、租号管理:管理上架的账号信息;

35. JavaScript 事件循环：理解进程、线程和异步编程

    JavaScript 是一门单线程的编程语言，这意味着它只有一个主执行线程来处理所有的任务。然而，JavaScript 可以利用异步编程的方式实现并发操作，从而提高性能和用户体验。

36. 裁员、面试、见父母、副业｜2023 多舛的一年，希望 2024 一切顺利

37. 前端白屏检测：SDK的设计与实现

    前端白屏指页面在加载过程中长时间无法正常展示内容，内容区空白，使用户无法进行查看、保存等一切操作，这是非常严重的问题。如果能尽早检测到白屏问题，就可以及时处理，避免或降低负面影响。

38. WebSocket 从入门到入土

    因新部门需求有一个后台管理需要一个右上角的实时的消息提醒功能，第一时间想到的就是使用WebSocket建立实时通信了，之前没整过，于是只能学习了。和原部门相比现在太忙了，快乐的日子一去不复返了

39. nodejs+vue+ElementUi网络课程教学网站推荐系统

    文章浏览阅读373次，点赞6次，收藏7次。通过调研和分析，系统拥有管理员、老师和学生三个角色，主要具备个人中心、学生管理、老师管理、班级信息管理、公告信息管理、实验信息管理、实验报告管理、报告展示管理、学生互评管理、实验成绩管理、实验催缴管理、作业信息管理、学生作业管理、作业成绩管理、班级讨论管理、实验题目管理、试题管理、系统管理、考试管理等功能模块。设计原理，是指一个系统的设计由来，其将需求合理拆解成功能，抽象的描述系统的模块，以模块下的功能。在设计时，会有几大要求，抽象、模块化、信息隐藏、耦合低、内聚等特性，本系统的设计也符合以上几大特性。

40. “一篇文章教会你掌握JavaScript深拷贝和浅拷贝”

    在计算机编程中，“拷贝”是将一个数据复制到另一个位置或变量的过程。拷贝通常包括将数据从源位置复制到目标位置，并在目标位置创建一个新的、与源数据相同的副本。

41. 又有新框架上线了，测试、AI 通通有「GitHub 热点速览」

    本周热点之一可能就是 Apple 刚开源便获得 8k+ star 的机器学习框架 mlx，顺带官方开源的 mlx-example（示例仓）也在热门榜上有一席之位，据说它已经跑通了大模型 Llama 7

42. Swiper，一款超赞的 JavaScript 滑动库？

    Swiper 是一个基于现代触摸滑动的 Javascript 库，用于创建轮播、幻灯片以及任何需要滑动的网页组件。它的灵活性和强大功能使得开发者能够实现各种复杂的滑动效果，而不需要深入了解复杂的滑动原

43. 快30倍JSON序列化是Jackson？是Gson？还是谁？

    先说结论，这次测试了三个 JSON 序列化的例子，综合来看，最快的都是他，遥遥领先第二名 Gson 30 倍！

44. Web前端 —- 【Vue】Vuex的使用(辅助函数、模块化开发)

    文章浏览阅读905次，点赞69次，收藏62次。vuex一文详解

45. React入门小白版：从零开始学核心概念

    React 基础 1. 入门概念 1.1 什么是 React React 是由 Facebook 开发的一款用于构建用户界面的 JavaScript 库。它的主要目标是提供一种简单而高效的方式来构建大

46. vscode插件webgl editor阅读，入门antlr

47. 公司敏感数据被上传Github，吓得我赶紧改提交记录

    大家好，我是小富～ 说个事吧！最近公司发生了一个事故，有同事不小心把敏感数据上传到了GitHub上，结果被安全部门扫描出来了。这件事导致公司对所有员工进行了一次数据安全的培训。对于这个事我相信，有点工

48. JavaScript事件循环机制和异步处理

    前言 JavaScript是一门单线程的编程语言，这意味着它一次只能执行一个任务。然而，为了处理异步操作和提高性能，JavaScript引入了事件循环(Event Loop)的概念。本文将深入探讨Ja

49. react表单受控的实现方案

    当实现一个受控表单时，通常需要定义一些列onChange 和 value，这会使得代码越来越臃肿，开发者其实不需要关系受控的过程，只需要知道结果便可。

50. Next.js 构建博客之打包SSG

51. HTML问题：如何实现分享URL预览？

    如此当接收者看到时，可以立即获取到分享链接的一些重要信息。这有助于接收者更好地了解链接的内容，决定是否点击查看详细内容。

52. vue3.0 el-table 行内点击图标 修改该条数据某个值

    文章浏览阅读343次，点赞10次，收藏11次。vue3.0 el-table 允许行内点击图标可以编辑某列，以此来改变某项的值

53. 实战九： Vue路由使用

    文章浏览阅读106次，点赞3次，收藏2次。既然现在传过来的是Function, 那么有两个方法, 要么将传入的参数改为。2、created选项名称错误写成create，导致刷新未调用接口加载数据。, 要么将collapse指定接收的参数类型改为Function。3）router 引入 store,4)main.js 引入vuex。1）子组件设置props选项。this.store不存在。5)面包屑使用store。父组件-》子组件传参数。

54. 开源的局域网文件共享工具迎来大更新

    在shigen之前的文章开源一个局域网文件共享工具中有提到了我设计的局域网文件共享工具，实现扫码即可上传文件，访问链接直接下载文件。在我的github上也成功的获得了5个star

55. 一款小而美的开源滑动验证码组件

56. input , change ,blur 事件的区别，以及在vue和react中的表现

    文章浏览阅读54次。当一个 , , 或 元素的 value 被修改时，会触发 input 事件。

57. Vue宝典之深入理解 rules 属性

    文章浏览阅读117次。在 Vue 中，表单校验规则可以通过 rules 属性来定义。该属性是一个对象，包含了各个表单字段的校验规则。每个字段的校验规则是一个数组，可以包含多个校验规则。我们可以在 Vue 实例的 data 中定义 rules 属性，并为每个表单字段指定相应的校验规则。

58. vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件

    文章浏览阅读202次，点赞3次，收藏4次。vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件

59. react-props扩展

    文章浏览阅读131次，点赞3次，收藏4次。类插槽的补充，以及prop Type整理

60. Vue 3 使用moment设置显示时间格式

    文章浏览阅读129次，点赞2次，收藏4次。二.分析问题：在Vue 3中，因为过滤器(filter)已经被废弃，取而代之的是全局方法(global method)。slot-scope也被弃用使用v-slot代替。无法使用过滤器设置显示时间格式。（2）.在Vue项目的主入口文件（通常是main.js）中，导入moment库和要使用的全局方法。一. 问题: Vue3如何使用moment设置显示时间格式。