20231201 前端开发周报

四年前端裸面，两周拿到美团offer；浅谈前端出现率高的设计模式；妙用computed拦截v-model，面试管都夸我细；用lodash开发前端，真香；做了几年前端，别跟我说没配置过webpack；[Vue3] 历数 ref 四宗罪，现在开始用 reactive；尝试用 three.js 实现了这个跨窗口的粒子动画；【构建工具】vite2没捂热，vite5又来了，性能大幅提升

1. 四年前端裸面，两周拿到美团offer

   你没有办法辨别什么是机会，没有人能长一双慧眼，看到机会的来临。你只能做各种各样的准备，往往是准备之后你做了临时性的选择、不知深浅的决定，正是这些准备，让你的各种选择和决定改变了命运。

2. 浅谈前端出现率高的设计模式

   浅谈前端曝光率高的九大设计模式。分别从创建型：构造器模式、共产模式、单例模式；结构型：适配器模式、装饰器模式、代理模式；行为型：观察者模式、模板模式、命令模式

3. 妙用computed拦截v-model，面试管都夸我细

   如何避免写出屎山，优雅的封装组件，在面试官面前大大加分，从这篇文章开始！ 保持单向数据流 大家都知道vue是单项数据流的，子组件不能直接修改父组件传过来的props，但是在我们封装组件使用v-mode

4. 用lodash开发前端，真香

   前言 在日常的前端开发中，总是涉及到对数据的处理，比如后端返给你一坨数据，你需要进行处理并回显到页面上，又或者提交form表单到服务端时，你需要将数据处理成后端接口定义的数据结构，而这些都离不开数据处

5. 做了几年前端，别跟我说没配置过webpack

   引言 webpack中文官网：https://webpack.docschina.org/concepts/ webpack是一个javascript常用的静态模块打包工具，通过配置webpack，可

6. [Vue3] 历数 ref 四宗罪，现在开始用 reactive

   又看到一个谈 ref 和 reactive 的文章，文章举了一堆似是而非的例子说明 reactive 不好。 作为一个坚定的 reactive 拥护者和使用者，我觉得是时候出来反驳几句了。

7. 尝试用 three.js 实现了这个跨窗口的粒子动画

   相信不久前大家已经被这个粒子动画给刷屏了吧： 之前看过很多人都在分析跟这个效果相关的跨窗口通信技术，尽管这样是挺好，但我依旧有点纳闷：为什么没有人讲讲背后的粒子特效是怎么实现的呢？

8. 【构建工具】vite2没捂热，vite5又来了，性能大幅提升

   Vite 4 大约在一年前发布，它为生态系统奠定了坚实的基础。每周的 npm 下载量从 2 万跃升至 5 万，因为项目不断建立在共享的基础设施上。框架不断创新，除了 Astro、Nuxt、Svelte

9. 探索优雅的处理 JavaScript 类数组对象的技巧

   在 JavaScript 编程中，我们经常遇到类数组对象，它们拥有类似数组的结构和行为，但却不具备真正的数组方法和属性。常见的类数组对象包括 DOM 集合、函数的 arguments 对象和字符串等。

10. 前端验证码破解

    最近受够了公司内部站点每次登陆都需要填写用户名和密码，还有输入验证码。 要是能够直接跳过登陆页面就好啦。 说干就干，决定使用油猴插件实现自动登陆功能。 其中最难解决的就是验证码破解，花了一天的时间完美

11. 前端新趋势？有了Web Component，还用纠结Vue或React？

    前端新趋势？有了Web Component，还用纠结Vue或React？ 什么是Web Component Web Component 的概念最早在 2011 年被 Google 提出，并在 2018

12. 【源码&库】Vue3模版解析后的AST转换为render函数的过程

    上一章我们详细的分析了Vue3的模版解析过程，每种不同的节点都对应着不同的解析结果； 而这些解析结果只是一个AST对象，并不能直接用于渲染，所以我们需要将AST对象转换为render函数，而这个过程就

13. vue3 + ts + svg + ECharts 实现双十一数据大屏

    这不双十一刚过十几天，本篇文章就来介绍下如何使用 vue3 + ts + svg + ECharts 实现一个双十一数据大屏页面~

14. 【Vue3】对el-form进行二次封装后，我的开发效率提升了3倍

    本篇文章我们通过配置支持 jsx 的开发环境，实现了事件的批量绑定。和之前的写法十分类似，我们接收一个对象，并在组件内对对象进行一些处理，最终根据处理结果生成表单的子元素。该自定义组件支持 el-fo

15. Nuxt.js：下一代Web开发框架的革命性力量

    文章浏览阅读1.2k次，点赞93次，收藏88次。Nuxt.js是一个基于Vue.js的通用应用框架，它的目标是让Web开发变得更加简单、高效。Nuxt.js提供了一套完整的前端开发解决方案，包括项目脚手架、路由管理、状态管理、服务器端渲染等功能。通过使用Nuxt.js，开发者可以快速地构建出高性能、可扩展的Web应用。

16. 2023小红书Android面试之旅

    小红书面试总体而言给我的体验是很好的，每轮面试后基本上都是当天就能出结果，然后约下一轮的面试。最终从一面到HR面结束出结果，一共花了9天时间，还是挺快的。

17. Flutter 小技巧之 3.16 升级最坑 M3 默认适配技巧

    如果要说 Flutter 3.16 升级里是最坑的是什么？那我肯定要说是 Material 3 default （M3）。 倒不是说 M3 bug 多，也不是 M3 在 3.16 上使用起来多麻烦，

18. GitHub 2023排名前十的最佳开源项目

    开源软件（OSS）彻底改变了当今软件开发的方式。在数百万个开源GitHub项目中，要找到最适合需求的开源项目可能会让人不知所措。 今天给大家列出2023年增长最快的前10个开源GitHub仓库。通过这

19. 拥抱可选链 (?.) ：打造简洁且健壮的 JavaScript 代码

    可选链 ?. 不仅能够显著减少代码中的冗余判断，而且让我们的代码更加晰、易读。除了简化代码，可选链 ?. 还能提供更好的错误处理和容错能力。帮助我们避免错误的发生，并提高了代码的健壮性和可靠性。

20. 【源码&库】Vue3模版解析后的AST转换为render函数的过程

    上一章我们详细的分析了Vue3的模版解析过程，每种不同的节点都对应着不同的解析结果； 而这些解析结果只是一个AST对象，并不能直接用于渲染，所以我们需要将AST对象转换为render函数，而这个过程就

21. 自己撸一个文字生成图片的开源产品没那么难

    工作这么多年，一直想做一款属于自己的开源产品，这篇文章，带着大家了解下如何将捕捉的“灵感”一步步转变为应用落地。

22. JavaScript高级循环方法

    通过`for-of`循环♻️，你不需要亲自创建索引来依次遍历并取出集合中的每一个元素；此循环会将集合中的每一个元素创建对应的索引，通过索引来遍历整个数组中的元素。

23. WebAssembly照亮了 Web端软件的未来

    WebAssembly是一种新型的、可以在现代Web浏览器中运行的代码。本篇文章将为你详细介绍WebAssembly这一技术。

24. reveal.js：免费、强大的演示框架 | 开源日报 No.89

    reveal.js 是一个开源的 HTML 演示框架，让您可以通过 web 浏览器免费创建精美的演示文稿。它具有许多强大的功能，包括嵌套幻灯片、Markdown 支持、自动动画、PDF 导出、演讲者备

25. 我的新电脑前端配置

    一、安装 node、npm、cnpm、yarn 彻底删除之前安装的 node（如果没有请忽略此步骤） 1）打开此电脑，选择卸载或更改程序，找到 node.js 并卸载它 2）删除额外的文件 3）查找.

26. 极简原生js图形验证码

    前天接到需求要在老项目登陆界面加上验证码功能，因为是内部项目且无需短信验证环节，那就直接用原生js写一个简单的图形验证码。 示例： 实现过程为1.先写一个canvas标签做绘图容器。    →    

27. 2023最全高质量前端资源分享

    分享一些个人整理的高质量的前端资源，减少初学者面对学习资源的信息差，保持输入的是流行和前沿的技术，资源不限于 知名开发者 / 博主，文档，视频，书籍，演示网站，工具。

28. 开源一个局域网文件共享工具

    今天分享的内容是《开源一个局域网文件共享工具》。 不知道大家有没有这样的需求，我有多个设备，或者我想给别的同事传递文件，但是不想在互联网上传播，那怎么实现呢？shigen今天开源了我设计的一款工具

29. 前端自动化UI测试的完整方案

    开发公共平台项目，测试资源相对比较少，因此对开发者自身而言，为了维护项目的稳定性，需要对平台做各类测试，即使有测试环境，但是也很容易缺乏测试场景导致带着bug上线的情况。 因此我们需要做完整自动测试。

30. 手把手带你入门 Three.js Shader 系列（五）

    本文作为第一阶段片元着色器的最后一篇，将先带大家用前篇文章里讲到的组合方式实现棋盘格效果，会延展到abs取绝对值的操作；另外涉及aastep抗锯齿以及smoothstep平滑插值等等内容。

31. 前端接口容灾

    考虑到需要存储的数据量，5MB 一定不够的，所以选择了 IndexDB。考虑新用户或者长时间未访问老用户，会取不到缓存数据与陈旧的数据。因此准备上云，用阿里云存储，用 CDN 来保障。

32. JavaScript 供应链为什么如此脆弱…

    JavaScript 的强大之处在于其卓越的模块化能力，通过 npm 包管理机制，开发者可以轻易地引用并使用其他人或者组织已经编写好的开源代码，从而极大地加快了开发速度。但是，这种依赖关系的复杂性也给

33. 一道面试题带你认透js类型转换（万字解析？）

    面试官：下面输出结果是什么，并解释其原因 答案我放在文章末尾了，为了给大家弄懂答案的意思，我还是老套路，先给大家过一遍类型转换 类型转换就是不同的数据类型之间进行转换，数据类型我们就算es6之前也就只

34. 【源码&库】Vue3模版解析后的AST转换为render函数的过程

    上一章我们详细的分析了Vue3的模版解析过程，每种不同的节点都对应着不同的解析结果； 而这些解析结果只是一个AST对象，并不能直接用于渲染，所以我们需要将AST对象转换为render函数，而这个过程就

35. vue2技术栈思考 & vue-class-component原理分析

    实习入职第四天了，通过阅读项目代码发现业务开发中前辈们使用vue2都是基于class-styled-component去开发的，不去采用options风格去开发组件自然有它的出发点与考量，我认为核心在

36. Flutter 知识集锦 | Dart 枚举已支持属性成员

    在 Flutter3.0 之后，Dart 版本到 2.17 。虽然知道 Dart 枚举已支持属性成员，但一直没有用过。最近刚好有个使用的小场景，就来介绍一下。将以如下的 PopupMenuButton

37. 前端离线地图 – 下载瓦片地图

    前言 离线地图？接到需要做离线地图这个需求的时候我还在问公司的负责人要腾讯地图的key。结果晚上开会就突然说项目需要内网部署，必须要使用离线地图。一脸懵逼的我心想幸好还没有开始接腾讯地图（无用功没做）

38. 请查收，本周刷屏的两大热点「GitHub 热点速览」

    如果你逛 HackerNews 或者是推特，你一定会被 multipleWindow3dScene 这个跨窗口渲染项目的成果刷屏，毕竟国内的技术平台上也出现了不少的模仿项目。另外一个热点，便是你在白板

39. 《HelloGitHub》第 92 期

    简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等，涵盖多种编程语言 Python、Java、Go、C/C++、S

40. 【源码&库】Vue3的AST转换细节全解析

    紧接上一章的节奏，我们了解到了Vue3的AST转换的过程，整体来说就是将一段字符串进行解析，每一段字符串都对应着一个节点； 而每个节点都会有不同的类型，对应着不同的解析函数，今天我们就来深扒这些具体解

41. 前端工程化 → 深入SDK架构设计

    SDK 的全称是 Software Development Kit，翻译过来是软件开发工具包，这是一种被用来辅助开发某类软件而编写的特定软件包，其主要是为宿主系统提供服务的，本文将深入分析SDK设计

42. 使用可扩展的git flow建立团队项目工作流

    git-flow-rs 是一款遵循配置的，可扩展的git flow替代品，支持批处理、自定义hooks，可用于建立团队项目工作流。

43. 开源语言大模型演进史：向LLaMA 2看齐

    本文将介绍如何通过微调/对齐那些更出色的LLaMA-2等开源模型来提升它们的效果，并缩小开源和私有LLM之间的差距。

44. vue2技术栈思考 & vue-class-component原理分析

    实习入职第四天了，通过阅读项目代码发现业务开发中前辈们使用vue2都是基于class-styled-component去开发的，不去采用options风格去开发组件自然有它的出发点与考量，我认为核心在

45. threejs开发可视化数字城市效果

    灵感图 现在随着城市的发展，越来越多的智慧摄像头，都被互联网公司布到城市的各个角落，举一个例子，一个大楼上上下下都被布置了智能摄像头，用于监控火势，人员进出，工装工牌佩戴等监控，这时候为了美化项…

46. css实现优雅的渐变圆弧

    通过css来实现带有渐变弧线的饼图。在微信小程序中中，通过Taro react 来实现一个简单的饼图。

47. JS闭包应用:通过记忆函数优化递归

    LeetCode509题:斐波那契数 （通常用 F(n) 表示）形成的序列称为 斐波那契数列 。求该数列的每一项,通过递归虽然简洁明了但是存在重复计算问题,可以通过js中闭包来创建一个记忆函数来优化.

48. 深入解析React中useEffect的原理与实际应用

    React的useEffect是处理组件副作用的重要Hook，通过深入探讨其实现原理，我们能更好地理解其在React中的作用。副作用函数涵盖了数据获取、订阅外部事件、手动DOM操作等。

49. 再也不怕面试官问`watch`、`computed`、`watchEffect`的区别了

    在Vue中，数据响应式是一个核心概念，它使得当数据变化时，相关的视图会自动更新。为了更灵活地处理数据的变化，Vue提供了多种方式，其中包括watch、computed和watchEffect。

50. [小Demo]Canvas手写b站弹幕效果塔塔开哟

    最近，《进击的巨人》动漫也是迎来了大结局！不知道这样的结局是大家所期望的结局，还是心中的"意难平！" 今天我们就来做一个Demo,来和我们的艾伦塔塔开哟！ “弹幕飞天”，“弹幕护体"

51. 穿越JavaScript事件循环event-loop：异步的微妙舞曲

    本文主要介绍了事件循环（Event Loop）的相关知识，同时还涉及了异步和同步、微任务和宏任务、线程和进程等内容。

52. 作为中级前端工程师，如何在工作中提升自己的能力？

    前言 在日常工作的过程中，你是否存在以下几种情况： 某个时间节点突然产生迷茫，不知道自己当下应该做哪些事情，学哪些东西？ 不知道如何在工作中提升自己的技术或能力？ 你似乎对自己做的系统都熟悉了，但是在

53. 字节面试官：“Rust在前端工具链里有什么性能优势？” 候选人： “你说得对，但Rust是一门…”

    面经标答: 由于跨语言工作的额外负担，JavaScript 中使用的原生解析器并不总是更快。避免跨语言开销以及使用多核心对于性能至关重要。

54. 开源编程挑战报名开启｜集群联邦引擎 KubeAdmiral 社区议题发布

    KubeAdmiral 作为字节跳动云原生团队持续投入的开源项目，看重开源的长期价值，重视开源社区的反馈与参与。 鼓励更多对云原生感兴趣的高校学生参与开源社区，加入挑战～

55. vuex与vuex-class底层学习 & 简版实现

    vuex-class是在class-component中使用vuex的辅助工具，如果不清楚class-component是什么以及为什么要用vue-class-component，可以我上篇文章。 学

56. Vue3源码解析之 ref

    前言 我们知道 Vue3 中声明响应式是通过 reactive 和 ref 这两个函数，上篇我们分析了 reactive 的实现原理，接下来我们再来看下 ref 是如何实现的。

57. 三个月写了个短信平台，开源出来

    1 初心 大家好，我是勇哥。花了三个月的时间，我手写了个短信平台服务 platform-sms，今天开源出来 Beta 版本。 写这个开源项目的初心其实很简单："帮助初中级研发工程师入门架构设计，提升

58. CSS技巧：用CSS + SVG foreignObject实现一个动画组件

    在SVG里面加上foreignObject，就可以使用HTML+CSS制作你的动画卡片，学完就去炫你的创意吧！

59. 用AI来定制你的专属面试官

    最近我们在做一个新产品，让AI大模型扮演面试官。 说实在，提出这个想法，最初尝试的时候，我是不抱什么希望的。但是，实际的结果大大超出了我的预期。

60. VUE语法-ref和reactive响应式数据引用

    文章浏览阅读136次，点赞3次，收藏4次。vue中通过ref和reactive实现数据的响应式