20231103 前端开发周报

听说前端出大事儿了；原来前端部署这么简单；用Three.js做一个3d版的demo-纯前端（Vue3+Three.js+antvG2）；真实前端面试题（蚂蚁外包）；热爱前端，也没能逃过七年之痒；去比亚迪面试，问的贼细；React Hooks 实战案例；开源利器：it-tools 项目介绍

1. 听说前端出大事儿了

   最近这两天，在前端圈最火的图片莫过于下面这张了。 这是一段 React 代码，就算你完全没用过 React 也没关系，一眼看过去就能看到其中

2. 原来前端部署这么简单

   前言 有个朋友说前端技能大家大部分都会，就是部署项目这一块经验都比较稀缺，一直很想学一下。所以在这里写一篇简单的从零开始部署前端项目的全过程，感兴趣的掘友们或者想自己搭建项目部署的可以看一下这篇。 环

3. 用Three.js做一个3d版的demo-纯前端（Vue3+Three.js+antvG2）

   在网上找了很久都没有找到使用Three.js开发3d的免费文章或者免费视频,自己花了一点时间做了一个纯前端的demo。  技术栈都是最新的:vue3+vite+typeScript

4. 真实前端面试题（蚂蚁外包）

   闭包定义应用场景 闭包（Closure） 是指一个函数包含了对其外部作用域中变量的引用，即使在该函数外部作用域执行完毕后仍然可以访问这些变量。闭包允许你在一个函数内部访问另一个函数的变量

5. 热爱前端，也没能逃过七年之痒

   以前我觉得做一个骨灰级程序员、掌握各种牛逼的技术是毕生目标；现在我会想人生精彩多样，多尝试一些不一样的事情同样有趣

6. 去比亚迪面试，问的贼细

   今天介绍的这位程序员小哥哥，是二本的硕士生，机械专业，自学Java转码的。投递了西安比亚迪，最终成功上岸

7. React Hooks 实战案例

   文章浏览阅读297次，点赞70次，收藏66次。在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。useState：在函数组件中添加状态，相当于在类组件中使用 this.state。

8. 开源利器：it-tools 项目介绍

   IT-Tools是一个开源项目，旨在为IT从业者提供一个集成的在线工具。此项目具有功能全面、部署方便等特点，目前在github上4.7K的star。

9. 前端又又出新框架，这次没有打包了

   前端开发又迎来了一个新框架——ofa.js。它的独特之处在于，不依赖 nodes/npm/webpack 前端开发工作流程。与jQuery类似，只需引用一个脚本，您就能简单开发大型应用。

10. 前端周报：React RSC 新范式TS 5.2 正式发布，但 Turbo 8 和 TS 和平分手Node 20.6 支持 .env。（2023 年第 37

    2023 年第 37 周前端技术周报，React 新范式 RSC服务器组件，TS 5.2 正式发布，但是 Turbo 8 却弃用 TS。Node 20.6 支持 .env 文件。

11. 前端周报：前端最强学姐~语雀挂了Node 21 官宣。（2023 年第 44 周）

    2023 年第 44 周前端生态的技术周报，1023 语雀崩溃事件的反思！UP猪认证的前端最强学姐，都给我顶礼膜拜~Node.js Buffer 和平分手。

12. Wasm 真的比 Js 快吗？

    网上各种介绍wasm的文章都在说wasm的性能是js的数倍之多，实际情况真的是这样吗？ 本文用rust编译到wasm与js进行性能对比，尝试解答这个问题

13. Nuxt.js，Next.js，Nest.js傻傻分不清？

    Nuxt.js和Next.js都是服务端渲染框架(SSR)，属于前端框架,Nest.js则是node框架,属于后端框架。 虽然名字看起来都很像但是确实不一样的框架。

14. 都说Vue3跟Vue2比，性能优化很厉害

    template模板不如jsx灵活，但是template相比jsx的固定性，可以在编译时获取许多信息，编译出可以在运行时执行尽可能少，性能尽可能好的代码。Vue3性能优化的一个重要体现在编译优化，利用

15. 推荐一本系统设计相关的开源宝典，Github上40.6k star

    Github上一个非常不错的开源项目，该项目非常适合对系统设计感兴趣或者不了解的开发者，里面包含了各种各样的设计图，而且使用通俗易懂的话来描述，几乎涵盖了开发人员可能接触到的不同工具。

16. 好用到飞起的十款vscode插件（前端篇）

    本文旨在介绍本人使用过觉得好用的的vscode插件，以此提升项目的开发效率，本文仅做分享，不提供具体的教程，有需要的可以去本站搜索。

17. 突破前端开发面试（五）：你知道何时应该使用forEach而不是map吗？

    引言 在JavaScript编程中，循环是不可或缺的工具，它们允许我们有效地处理和操作数组中的元素。然而，JavaScript提供了多种不同类型的循环方法，其中包括forEach和map。这两者可能看

18. 前端入行5年，回顾一下

    2018年的11月1号入职了第一家实习的小公司，然后到今天刚好5年了，给自己这5年的工作经历做一个小总结吧。

19. Next.js 的路由为什么这么奇怪？

    Next.js 是 React 的全栈框架，主打服务端渲染，也就是 SSR（Server Side Rendering）。 它有一套非常强大但也很奇怪的路由机制。 这套路由机制是什么样的？为什么又说很

20. Flutter 小技巧之不一样的思路实现炫酷 3D 翻页折叠动画

    今天聊一个比较有意思的 Flutter 动画实现，如果需要实现一个如下图的 3D 折叠动画效果，你会选择通过什么方式？ 相信可能很多人第一想法就是：在 Dart 里通过矩阵变换配合 Canvas 实现

21. 重生入门级开源音乐播放器APP —— 波尼音乐

    不知道是否还有人记得，7年前的那个 「Android开源在线音乐播放器——波尼音乐」？在网络上找到了一个百度开放的在线音乐 API，勉强实现了本地 + 网络播放能力。

22. 本地开发环境太麻烦？8.9买个服务器搭建属于自己的在线WEB IDE还可绑定域名高度自定义

    搭建在线高颜值IDE，再也不用担心环境的困扰，有网络打开浏览器就可以使用，只要8.9，还可以高度自定义支持各种插件

23. （回忆录）从高考190分到前端负责人，再到如今的政府公务员（上篇）

    前言   再次登录掘金，看到前两年写的技术贴，真的是感慨万千。不过是五六年的时间，好似沧海桑田。   简单说下写这份帖子的初衷：1.记录自己经历，供一些前端朋友参考经验。2.练习文笔（虽然很烂），想静

24. Vue 样式的 7 个奇技淫巧

    你可能不知道的关于 Vue.js样式的 7 个奇技淫巧，包括但不限于：作用域和插槽样式，全局样式，JS 变量，CSS 模块，SCSS 的变量等。

25. Vanilla Design，新一代 React UI 库

    Vanilla Design 是一个超轻量、超高性能的 React 组件库，它遵循着 nocode 的哲学，并基于 WTFPL 协议开源 (整个大活

26. 《HelloGitHub》第 91 期

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

27. 原子化 CSS 真能减少体积吗？

    最近看到这样一篇文章：《要喷也得先做做功课吧？驳Tailwind不好论》 个人觉得说的还是有一定道理的，就是该作者的语气态度可能稍微冲了点： 不过他说的确实有道理，如果这种原子化工具真的如评论区说的…

28. 没想到JS中string的方法已经有36个了，来看看你知道多少

    在编写 JavaScript 代码时，字符串是经常用到的数据类型之一，因此了解如何使用字符串方法是非常重要的，我突发奇想要不做一个汇总吧！于是就有了这一篇文章，因为随着更新也有不少方法以及被弃用了，所

29. 登录页面一些有趣的css效果

    关于登录页面 input button title 的各种炫酷效果实现以及思路，附上[预览页](https://lsk_ciao.gitee.io/login-form/)以及[实现源码]

30. 大厂也在用的：HTMl+CSS+JS实现瀑布流式页面布局

    什么是瀑布流式页面布局 下面看几个现实的案例： 小红书中的瀑布流式页面布局 手机淘宝中的瀑布流式页面布局： 介绍 瀑布流式布局页面是什么？ 页面上给人一种参差不齐的多栏布局，其中元素大部分为图片，图片

31. 当你被面试问到: 你了解过ES module 吗？

    引子 在JavaScript编程中，模块化是一种非常重要的概念。模块化编程的核心思想是将代码划分为独立的部分，每个部分都负责一个特定的功能或任务。这使得代码更易于维护、协作和扩展。

32. 《完蛋我被美女包围了》突然火了世界首个开源贡献榜出炉丨 RTE 开发者日报 Vol.75

    阿里云创始人王坚：AI 带来云计算第三次浪潮，或持续几十年；王小川首谈百川智能大模型发展理念：理想上慢一步，落地上快三步

33. 哪一个更好？Spring boot还是Node.js

    本篇文章有些与众不同，由于我自己手头有些关于这个主题的个人经验，受其启发写出此文。虽然SpringBoot和Node.js服务于很不一样的场景，但是这两个框架共性惊人。其实每种语言都有不计其数的

34. 每天一个知识点：寻找JavaScript和Java的区别

    前言 昨天在刷LeetCode时,在对之前的一道简单题（13.罗马数字转整数）进行二刷时，由于之前在学校学的是Java，所以之前已经用Java做过一遍了，而最近在学JS，我就尝试着用JS去做，也很快的

35. 面试官问我唯一ID如何生成

    由于简历上，写了分库分表，还写了精通微服务和分布式系统，然后被面试官一顿蹂躏了这里面的技术细节；尤其给我印象最深的问题是，在分布式环境下，你们数据的唯一ID是如何去生成的？ 当时条件反射，无脑的回答到

36. JS对象已经存在29个方法了，来看看你知道多少

    在js中，对象类型是非常重要的类型之一，也是项目中数据处理常用的类型之一，虽然这种类型我们经常使用，但是它的方法却不怎么用的到或者很少用到，不知不觉js的对象方法已经来到了29个了，今天就来看看

37. React 弹窗组件用的 createPortal 是怎么实现的？

    想必大家都用过弹窗组件，比如 antd 的 Modal 组件： 打开 devtools 可以看到，它是直接挂在 body 下的： 实现这种效果是用的 createPortal： 渲染结果如下： 弹窗组

38. 坏了,CSS真被他们玩出花来了

    一个小小的hover效果让我学到了很多,可能是因为我太菜了吧,长期都是各种组件库来回引用,导致技术停滞不前,希望各位不断学习,不然像我一样想跑路都跑不掉.

39. 周爱民：告前端同学书

    周爱民对前端技术做了些回顾总结，说了三个方面的话题：其一，前端过去的15年大致可以怎样划分；其二，前端的现状以及面临的挑战；其三，前端会有怎样的未来。

40. 如何写出优雅的代码？试试这些开源项目「GitHub 热点速览」

    又是一期提升开发效率的热点速览，无论是本周推特的检查 Python 语法和代码格式的 ruff，或者是 JS、TS 编译器 oxc，都是不错的工具，有意思的是它们都是 Rust 写的。 此外，还有用来

41. 你知道 XHR 和 Fetch 的区别吗？

    XHR 和 Fetch API 是两种常见的数据请求方法，特别是 Fetch API 已经被越来越多的项目使用，本文将和你一起深入学习它们的用法和优缺点等。

42. 产品：我就是要在前端地图上显示成千上万个点和区域，我：彳亍

    当地图中存在大量区域、标签等添加物的时候，会造成初次渲染等待很长时间、操作严重卡顿等问题。针对这种情况battle不过产品，只能去优化前端代码了~

43. Vue 何以对 React“降维打击”？

    本文从学习曲线、心智负担、双向数据绑定等多方面比较了 Vue 和 React 这两个优秀的前端框架各自的优势，从而解释了为何作者更加推荐新手选择 Vue 作为入门框架。

44. tailwindcss一个响应式组件只用了50行代码不到，我决定在团队推广使用它

    在写一个网站组件，我决定使用tailwindcss,究竟它的魅力在何处，start有73k，然后看到它代码更新频率还是属于正常维护的 发现它的中文文档也很友好tailwindcss.中文文档 代码如下

45. 近期面试小结

    — theme: smartblue — 最近面试了不少的公司，行情整体来说还是非常差的

46. 开发一个简单的管理系统，前端选择 Vue 还是 React？

    在前端开发的世界中，React和Vue都是非常流行的JavaScript库，它们都提供了许多有用的功能来帮助开发者构建高质量的用户界面。然而，在我个人的开发经验中，相比于React，我更喜欢使用Vue

47. Vue 3中toRaw和markRaw的使用

    文章浏览阅读241次，点赞30次，收藏31次。toRaw和markRaw是Vue 3中引入的新API，用于更精细地控制对象的代理和响应性。它们提供了在需要时绕过代理或禁用响应性的能力，有助于提高性能和更好地与第三方库进行集成。理解如何正确使用这些API对于构建高性能和灵活的Vue 3应用程序非常重要。根据您的具体需求，您可以选择是绕过代理对象，提高性能，还是禁用响应性，以便更好地管理您的应用程序状态。希望本文能帮助您更好地理解toRaw和markRaw的使用。Java面试技巧Java面试八股文 – 掌握面试必备知识（目录篇）Java学习路线。

48. 前端国际化：一种巧妙的内容多语言实现思路

    本文就简单介绍一种改造现有程序以支持内容多语言的思路。我们希望对于前/后端都是最小改造，尽量不侵入已有的业务代码和底层存储、向下兼容，不影响现有的业务。

49. ES6新特性全面汇总39条你知道多少？（二）

    这篇文章是我开启ES6+新特性全面汇总的第二章，我将在未来每天更新一篇后续，我将会较为详细深入的向大家介绍我们ES6+的新特性，本篇文章关于其中的三条：解构赋值 默认参数值 展开运算符和剩余运算符

50. 开发中要知道的git知识

    作为开发人员对git的掌握有一定的要求，接下来本文将介绍git相关知识点。本文最先介绍git的版本控制。

51. 掌握JavaScript中数组遍历的7种方法，成为数组操作达人

    作为JavaScript开发人员，熟悉数组的遍历和操作是非常重要的。数组遍历是处理和操作数组元素的基本需求之一。本文将介绍JavaScript中的10种常见数组遍历方法，帮助你成为数组操作的达人。 f

52. Vue里使用Tailwind CSS，这不是耍流氓吗

    在Vue里使用`Tailwind CSS`其实会显得很累赘，并不是很好的选择。你认为在Vue里使用`Tailwind CSS`是在书流氓吗？

53. 集齐大量开源项目的网站，了解一下吧

    偶然找到的这个宝藏网站，站内集齐了大量的开源项目。 网站地址 https://www.osrc.com 使用指南 找到想要了解的项目，点击进入，项目详情页里面就有相关的在线预览链接以及代码仓库。 这是

54. Vue 官方周报：Pinia之父布道React组件库Vue化移植。同步调用组合式函数。（2023 年第 41 周）

    2023 年第 41 周 Vue 官方的技术周报，Pinia 之父硬核分享 Pinia 的顶级技巧，React 组件库 Vue 化移植，同步执行组合式 API。

55. 【Gulp + 哈希】优雅的解决前端项目部署缓存问题

    Gulp 是一款基于 Node.js 的前端构建工具，用于自动化任务的管理和构建前端项目。它的主要目标是简化开发过程中的任务，如文件压缩、文件合并、代码编译、图片压缩、自动刷新浏览器等。

56. vue3流水线开发分页列表？ useTable了解一下

    vue3 hooks之useTable，工厂流水线开发页面表格，带你提高开发效率、告别重复性工作。

57. 推荐13款常用的Vscode插件，提高前端日常开发效率

    介绍VsCode在日常开发中常用的十三款插件，帮助开发者定制化你的VsCode，提升程序日常开发效率，

58. Rust 编译为 WebAssembly 在前端项目中使用

    大家好，我是柒八九。 前言 最近，不是加大了对Rust相关文章的输出吗，在评论区或者私信区。有一些不同的声音说：“Rust没有前途，然后…."。其实呢，看一个技术是否有需要学习的动力。想必大家的底

59. 【前端早早聊直播回顾】Harmony Next 与 Flutter 的不解之缘

    Hello 大家好，我是 Flutter GDE 郭树煜，本次要分享的话题是关于鸿蒙与 Flutter 的故事，可能没接触过的会感觉有点懵，Harmony 和 Flutter 有啥关系，它们怎么会被放

60. JS小白请看一招让你的面试成功率大大提高——规范代码

    前言 规范的代码是可以帮你进入优秀的企业的。一个规范的代码，通常能起到事半功倍的作用。并非规范了就代表高水平，实际上是规范的代码更有利于帮助你理解开发语言理解模式理解架构，能够帮助你快速提升开发水平。