20231110 前端开发周报

2024 款：最新前端技术趋势；面试官：如何防止重复提交订单？；前端铜九铁十面试必备八股文——性能优化；【Vue3】保姆级毫无废话的进阶到实战教程 – 01；14年开始工作的老前端, 今天第一天送外卖, 时薪比自己估计少很多；大家都在嘲笑 Next.js 14；我敢打赌你不知道的十个JavaScript技巧；以为 flv.js 直播超简单，结果被延迟和卡顿整疯了

1. 2024 款：最新前端技术趋势

   2023 年不知不觉已经接近尾声了，2024 马上就要到来。那么在今天，咱们就来聊一聊【2024款：前端的技术流行趋势】，帮助大家把握住时代的潮流，技术的方向~~

2. 面试官：如何防止重复提交订单？

   这个问题，在电商领域的面试场景题下，应该算是妥妥的高频问题了，仅次于所谓的“秒杀场景如何实现”。 说个题外话，有段时间“秒杀场景如何实现”这个问题风靡一时。

3. 前端铜九铁十面试必备八股文——性能优化

   图片懒加载原理 图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会进行加载，只有当屏幕滚动的时候才加载。 特点： 提高网页加载速度 减少后台服务器压力 提升用户体验 原理 将图片地址存

4. 【Vue3】保姆级毫无废话的进阶到实战教程 – 01

   作为一个 React、Vue 双修选手，在 Vue 3 稳定下来之后，是时候摸摸 Vue 3 了。本系列关注一些进阶的内容，无废话，里面增加了很多非常有用的小技巧，让你在 Vue 3的世界里纵享丝滑。

5. 14年开始工作的老前端, 今天第一天送外卖, 时薪比自己估计少很多

   注册骑手的时候系统说估计月收入6400. 第一次跑单, 分享下真实工作流程, 感受, 和收入情况. 注册 注册很容易, 要注意的是需要上传身份证和一些简单的考试. 注册完第二天, 区域小领导会打电话来

6. 大家都在嘲笑 Next.js 14

   上周 Next.js 14 发布了，该版本相较于 13，没有任何 API 变更，主要更新点是 Turbopack 带来了大幅的性能提升以及 Server Actions 功能进入稳定版本。

7. 我敢打赌你不知道的十个JavaScript技巧

   JavaScript 作为最流行的语言之一，其语法灵活且每年都在不断吸纳新特性，即使是一个从业多年的老手， 偶尔也会有一些被低估的 JavaScript 功能和技巧，本文将分享这些技巧，一同讨论探究

8. 以为 flv.js 直播超简单，结果被延迟和卡顿整疯了

   浏览器直播使用 flv.js 很简单，传入流地址就能播放。然而直播中的”延迟“和”卡顿“问题，才是决定直播质量的关键

9. 【前端面经】2023面试复盘之字节跳动

   字节的面试还挺曲折，一开始是某部门的HR直接联系我的，在面了三轮之后感觉面试官的状态瞅着蔫蔫的，又咨询了一下在字节的朋友，便决定更换部门（但是该部门的HR小姐姐很好，跟了我一个多月，还提前给我做面

10. Redis创始人开源最小聊天服务器，仅200行代码，几天功夫已获2.8K Star

    中午时候，在[技术交流群](https://www.didispace.com/jiaqun.html)里聊起关于Redis创始人的一些趣事，比如离开Redis之后，去写科幻小说之类的。 因为好奇

11. 拥抱 GitFlow，优化开发流程：团队协作的最佳实践

    在软件开发领域，良好的团队协作和高效的版本控制流程对项目的成功至关重要。在过去的几年里，GitFlow 成为了一种备受推崇的工作流模式，为团队提供了一种清晰而灵活的方式来管理代码库和开发过程。

12. JavaScript 包装类干货分享

    — theme: healer-readable — # 引言 在上篇文章我们了解了JS中两种数据类型在创建时的底层逻辑，以及构造函数时引擎的执行过程，那么我们这次来聊一聊如果给原始数据类型赋

13. git 大厂代码提交原则（适用新手，细节拉满）

    # git是什么，为什么要学git – git 是一个免费的、开源的分布式版本控制系统，git可以追

14. js中闭包是个啥?带你揭开闭包神秘面纱

    很多人都认为闭包很难,其实不然,只要我们理解也会感觉闭包好像也就这么回事。函数内如果有不受外函数管制的内部函数,出栈时会保留该内部函数在调用栈内存中,函数体以及它所使用的外函数变量的集合称为闭包。

15. 用Pixi.js做了一版Canvas的捕鱼游戏Demo

    这几天闲着没事突发奇想搞点2D图形玩玩，前段时间时间接触了pixi.js就用它来试试水。 肝了了好几天把基本的鱼游泳动画，随机游泳、炮台、射击撒网基本的逻辑写了

16. 新一代前端发展的困境与破局

    本次分享对象为 React/Vue 出来之后的新一代前端开发者，在造轮子时代已经过去、国内前端环境很卷的情况下，前端工程师的成长路径相比之前要难不少，在这些困境下，分享如何以一种新的方式破局

17. 揭开 SCSS 神秘面纱：利用预处理器升级你的样式表技术

    在前端开发中，CSS 是不可或缺的一部分，它负责控制网页的样式和布局。然而，使用纯 CSS 编写复杂的样式表可能会变得冗长而难以维护。在这种情况下，SCSS的出现为我们提供了更强大和灵活的样式语言。

18. Rollup 入门指南：解密高效的 JavaScript 打包器

    Rollup 是一个现代的 JavaScript 模块打包器，它以简约、高效和可扩展性而闻名。与其他打包器相比，Rollup 专注于 ES 模块，并且提供了强大的 Tree Shaking。

19. 前端工作7年了, 谈谈工作&开源&创业

    今年结束之后工作就满7年了, 也是跨行做前端的第七个年头. 4年前开始热衷于在各大技术平台分享前端技术, 开源一些自己的框架, 想法, 收获了很多启发. 也因为坚持做了零代码项目H5-Dooring,

20. js中包装类知多少?浅析包装类(含阿里面试真题)

    引用数据类型具有属性和方法，也就是可以通过"变量名.属性名"、"变量名.方法名()"访问调用自身有的属性和方法,而基本数据类型是没有的。 那么问题来了,为什么好像基本数据类型也可以这样用,会有什么问题

21. 一杯子三变：揭秘vue单页应用(spa)与内容动态加载的奥秘

    文章浏览阅读411次，点赞58次，收藏47次。目前主流的静态化主要有两种：（1）一种是通过程序将动态页面抓取并保存为静态页面，这样的页面的实际存在于服务器的硬盘中（2）另外一种是通过WEB服务器的URL Rewrite的方式，它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址，一句话来说就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果

22. 20 个令人惊叹的一行 JavaScript 代码

    分享 20 个 令人惊叹的 JavaScript 一行代码，让你的工作更轻松。一起来看看吧！! !

23. 写给后端大忙人看的vue入门指南

    写给后端大忙人的Vue入门指南，重点介绍了Vue的核心特性和基本使用方式，同时对Vue中常用的方法和指令进行了总结归纳，希望能帮助后端开发者快速熟悉Vue框架

24. 揭秘网络通信的密码：HTTPS、IP和HTTP状态码

    引言 在当今数字时代，网络通信扮演着不可或缺的角色。无论是在浏览网页、发送电子邮件，还是进行在线购物，背后都涉及到一系列的协议和概念。在这篇文章中，让我们一起来了解网络通信的密码，包括HTTPS、IP

25. Flutter vs 前端 杂谈：SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar – 比较

    Flutter vs 前端 杂谈 SliverAppBar的弹性背景的显隐效果使用Html+JS怎么实现 作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550

26. 每日一练-快速排序-JS简单版

    这也太简单了吧….这篇文章分享一种排序算法–快速排序 快速排序（Quick Sort）是一种常用的排序算法，其平均时间复杂度为 O(nlogn)，通常比其他排序算法表现更好。

27. ES6新特性全面汇总39条你知道多少？（十一）

    导言 这篇文章是我开启ES6新特性全面汇总的第十一章，我将在未来每天更新一篇后续，我将会较为详细深入的向大家介绍我们ES6+的新特性，而不是简单的标注一共有哪一些特性，本篇文章关于其中的Reflect

28. 前端编程之道10-1：用策略模式消除分支判断

    策略模式（Strategy Pattern）允许在运行时根据不同的情况选择不同的算法或策略。该模式将算法或策略封装起来，使得它们可以相互替换，此模式可以让算法的变化隔离于使用算法之外

29. 空窗期三个月，前端路在何方？

    我大概是在2022.07.14由于裁员在xxx谷毕业。毕业之后的我，没有着手找工作，由于之前买的房子马上装修完了，所以我回家添置家具，各种买买买，在家待（废）了三个月。 虽然说这三个月我偶尔会看看一些

30. FastAPI：重燃Python Web开发的火花（一）

    Python在Web开发中面临着哪些挑战，又该如何克服这些挑战呢？在本文中，我们将探讨FastAPI框架如何帮助我们解决这些问题，重燃Python Web开发的火花。

31. vue3打印解决方案：Vue-Plugin-HiPrint

    Vue-Plugin-HiPrint 是一个Vue.js的插件，旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint，可以轻松地在Vue.js应用程序中实现高度定制的打印。

32. 面试官：聊聊js闭包。来看这篇，小白也能读懂（内含调用栈及作用域链的详细讲解）

    众所周知，闭包是js非常难的一个难点，但是我不认同，闭包其实很好理解，看完这篇文章，我相信你可以攻克这一难点。文章有点长，请大家多花点耐心。 为了讲闭包，我们还需要引入调用栈，以及作用域链这两个概念。

33. 用JS实现一个实时小闹钟，大家快进来看看吧

    前言 今天我们来聊聊如何使用JS来创建一个实时的小闹钟，这个小闹钟十分的有趣，小伙伴们可以运行一下，看看跟你电脑上的时间是否对的上呢？ 我们先来看一下实现的效果 结构设计 我们先来观察一下这个小闹钟

34. vue3 setup 中国省市区三级联动options最简洁写法，无需任何库

    本前端仔在写页面的时候，发现表单里面有一个省市区的 options 组件要写，因为表单很多地方都会用到这个地址选择，我便以为很简单嘛。 虽然很简单的一个功能，但是网络上能搜索到的教程大多都是需要配合

35. 把jsp重构成vue

    记录一次真实的重构经历与感想！ 我在入职之前，公司一直使用的jsp，结合jQuery来处理页面逻辑。 我入职之后，我们领导要求把它重构成vue。 这时，我对jsp根本不熟，业务也没摸清楚。且在这个关键

36. SCSS 进阶之道：探索更多样式表达的可能性

    为大家深入探讨 SCSS 的进阶使用技巧，帮助开发者们更好地利用 SCSS 来优化他们的样式代码。我们将通过如何组织和管理大型项目的样式文件结构、使用继承来减少冗余代码、利用嵌套更方便地编写样式规则。

37. 懒人版请求库alovajs教程4：使用useHook发送请求

    alova是一个轻量级的请求策略库，旨在简化接口的管理和使用。它分为两部分： 声明式实现复杂请求： 支持开发者使用声明式方法实现复杂请求，如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码

38. 面试官 ：你知道哪些生产组件用了 Netty ？ 怎么用的 ？

    欢迎点赞收藏关注哟 一. 前言 上一篇 Netty 教程 里面了解了 Netty 的基础用法，这一篇来学习 Netty 的生产级用法. 之前说了，很多开源框架都是基于Netty做的底层通信，这

39. 写给自己的前端性能优化

    一直想写篇前端性能相关的总结，个人觉得这块的内容会比较分散，面试的时候问起来，也不容易有一个清晰的框架

40. 前端开发者的 Rust 尝鲜: Rust 的第一印象

    本文并不是劝大家学 rust，只是最近它实在有点火，所以特来体验，本文会将 rust 的项目管理与 node 进行对比，带大家体验一下 rust 究竟是个什样的存在。

41. Vue3源码解读之Vue3 渲染原理

    Vue3源码解读 – Vue3 渲染原理 1. Vue3 自定义渲染器 自定义渲染器的作用是把虚拟 DOM渲染为特定平台上的真实元素。在浏览器中，渲染器会把虚拟 DOM 渲染成真实 DOM 元素。 官

42. 关于我第一次面试的这件事

    在一个水群的一天，我认识了一个正在字节实习大牛，为什么说他是大牛。因为同样大三，我还在学校苦逼，大牛以及是第二段实习（太强啦）。然后他在群里说他现在的部门还有个hc，ohh

43. 如何使用 Loadgen 来简化 HTTP API 请求的集成测试

    引言 在编写 HTTP 服务的过程中，集成测试 ^1 是保证程序正确性的重要一环，如下图所示，其基本的流程就是不断向服务发起请求然后校验响应的状态和数据等： 为大量的 API 和用例编写测试是一件繁琐

44. 发布自己的 vscode 大模型问答插件，vue+nodejs 接入文心一言api

    对于大模型代码生成能力而言，最简洁高效的方式就是集成为常用IDE的插件，那么我们就以开发一个简易的大模型对话插件，来探究一下vscode插件开发到发布的流程，研究一下文心一言大模型api的接入

45. 前端面试:聊聊闭包 一盏茶的功夫让你彻底掌握闭包

    前言 在JavaScript中，闭包是一个非常重要的概念，对于编写高质量的JavaScript代码和理解某些设计模式非常关键。很多人认为闭包很难，不过我相信你看完了我的文章会有收获，或许对闭包有一个新

46. 原来这才是HTML5标签正确的使用方式

    HTML5标签是HTML语言的最新版本引入的一些新的标签，这些标签用于定义网页内容的结构和语义。相比于以前的HTML版本，HTML5标签提供了更加语义化的元素，使开发者能够更准确地描述和组织网页的内容

47. 干货总结：JavaScript数组的自带方法(进收藏夹吃灰版♥(ˆ◡ˆԅ))

    前言 在我们平时刷力扣算法题时数组的使用往往是占大多数的。而我们更多得了解一些数组中实用的自带方法往往会给我们的做题带来很大的便利，以下是对数组中自带方法的一个总结. JavaScript中的数组自带

48. 如何当好一面面试官？

    最近我的组员第一次当一面面试官，由于时间紧急，我也只能快速地把我对面试官的理解跟他分享一下，希望他可以获得一个更好的当面试官的体验。希望这个面试官的视角可以给大家带来一些启发吧。

49. 2023重庆前端交流会精彩回顾

    2023年10月21日，重庆前端交流会圆满落下帷幕。 大会以“破茧”为主题，以“让技术引领卓越体验，以开放迎接前端未来”为口号，汇聚了众多前端领域的专家和从业者，共同探讨前端行业的发展趋势和创新思路。

50. JS设计模式之模板方法模式：打破束缚，解密代码复用的精髓

    在前端开发中，模板方法模式是一种常用的设计模式，它能够有效地提高代码的复用性和扩展性。在 JavaScript 中，模板方法模式的应用广泛，常被用于组件的生命周期管理、请求封装和拦截器设计、表单验证。

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

    — highlight: xcode — ## **导言** 这篇文章是我开启ES6新特性

52. JS中’==’ 与 ‘===’ 的区别，让你瞬间明白

    引言 当谈到JavaScript中的"=="和"==="运算符时，有时候它们的区别可能让人感到困惑。尽管它们都用于比较值，但它们的行为有着重要的差异。在本文中，我们将解释"=="和"==="之间的区别

53. 【CSS】15秒教会你如何对女朋友进行恶作剧

    本文手把手教会读者一个分手小技巧，通过图文与代码的结合，深入讲解其中的原理，旨在读者掌握其中的精髓，能够完美复刻 “钓鱼网站” 进行恶作剧，增进情侣间的感情！

54. React中的函数式插槽

    朋友们，好久不见，最近搬家，通勤时间从1小时变成三小时，花了一两个月终于适应了，所以有空我又来更新文章了，今天分享 React 开发中遇到的具名插槽的函数用法 你可能见过下面的写法。通常情况下，我们

55. （JavaScript）对原型、原型链的理解

    通过类比形象的介绍 构造函数（Constructors）和实例（Instances） ： 想象你要建造一座房子，你设计了一个房子的蓝图，这个蓝图就是构造函数。构造函数定义了房子的基本结构和属性。 当你

56. vue3.4.0-alpha.1 其他变动

    在上文中，我们讲了vue3.4.0-alpha.1 响应式逻辑的变动。 我们接下来讲剩下的两处变动。 导出错误代码 我们可以通过 来获取errorCode对应的错误信息。 DOMErrorMessag

57. Transformers.js 2.7.0 发布，新增文本转语音

    近日，Transformers.js 作者 Joshua Lochner 在 GitHub 上发布了 Transformers.js 2.7.0，这个版本主要的更新是：新增了文本转语音

58. 万字技术分享——从零开始 实现一个Vue-CLI

    背景 大家周五好，正好填一下之前的坑我准备了很久的学习如何开发一个 Vue CLI 工具的学习的内容输出成文章，我觉得学习的最终过程是需要输出成果的，这也是我的一个学习过程的记录。文章内容比较长，需要

59. Photoshop Web版本用了哪些CSS技术

    本文介绍了Photoshop Web版本使用的一些CSS技术。与国内常见的CSS技术相比，有许多不同之处，其中很多部分值得学习和借鉴。

60. 我终于学会的前端技能——代码调试、打断点

    在技术的世界里，要用魔法来打败魔法说来惭愧我做前端已近三年了竟然还没有学会如何调试代码，也就是给自己的代码打上断点一步步看它的运行状态以达到理清代码运行逻辑、排查问题提升开发效率的目的。直到最近我才学