你是不是还在为处理数组头疼？那你一定要试试JavaScript的reduce方法！这个方法真的超强大，能把数组里的每个元素都“串”起来，最后得到一个你想要的结果。不管你是要计算总和，还是想把数据转换成另一种形式，reduce都能轻松帮你搞定。

今天，我们来聊聊一个可能被你忽视，而且非常强大的标准 JavaScript API - AbortController 。

TypeScript的枚举（Enum）是一个常被低估但却极其强大的特性。作为一个从JavaScript转向TypeScript的开发者，我发现枚举不仅简化了代码，还提高了代码的可读性和可维护性。我们深入探讨枚举的本质、用法以及它如何改变我们的编码方式。

在TypeScript的世界里,类型别名(Type Aliases)和接口(Interfaces)是两个经常让开发者困惑的概念。作为一名前端开发者,我曾多次思考:"为什么TypeScript要提供两种似乎功能重叠的方式来定义对象结构呢?"今天,我们一起深入探讨这个问题,剖析它们的区别,优缺点,以及在实际开发中如何选择使用。

在JavaScript开发中，解构赋值是一个广受欢迎的特性，它让代码更加简洁易读。然而，不同的解构模式可能会对性能产生显著影响。本文将深入探讨数组解构赋值可能带来的性能问题，并提供优化建议。

本篇文章来源是参考阮一峰老师的文章，加上朴老师的评价注解，让大家能完整理解 Event Loop.

在TypeScript的世界里，类型系统不仅仅是静态类型检查的工具，更是提升代码质量和开发效率的强大武器。今天，我将深入探讨七个essential的实用工具类型，这些工具类型不仅能够简化代码，还能让开发过程更加高效和富有表现力。

axios 是一个用来发起网络请求的 js 库，返回的格式是 Promise。vue 项目中基本都是用 axios 发起网络请求。现在我们看看如何Vue中优雅的封装axios。

在前端开发中，大家都想在production环境不让别人调试你的代码，那究竟要怎么做呢？这里有几个方法...

在优化网站性能的过程中，我们经常遇到一个“为指标而优化”的困境。指标并不能真正反映用户体验，而应该最真实地反映用户行为。在本节中，我们将研究 TTI（Time to Interactive）。

本文讨论了如何彻底解决微信小程序内嵌web-view的缓存问题，让我们一探究竟，到底是什么原因让缓存如何顽固。

经常有人问 “三级等保是什么？”、“等保2.0是什么？”、“什么是等保？” “信息安全”、“网络安全是不是信息安全”等诸如此类的问题，所以这篇文档希望能用最简单的语言解释清楚“等保2.0”和“三级等保”之间的关联关系。

老实说，Webpack 多年来一直是 JavaScript 世界中的“打包工具之王”。它为历史上一些最复杂、性能最高的 Web 应用提供了支持。

JavaScript作为我们开发前端时不可或缺的工具，你真的理解它的核心概念吗？今天我想用通俗易懂的语言，结合一些实际的业务场景，来带你了解JavaScript中的原始类型和引用类型，顺便讲一下它们的可变性和不可变性。相信我，看完这些你一定会对代码有更深的理解！

库的使用是我们在日常开发中的必备操作。那么今天，为大家推荐 6 个常见的前端库，以帮助大家更好的完成日常工作！

今天的挑战题目涉及到JavaScript中的原型继承和 instanceof 操作符的使用。我们将通过分析一个关于构造函数和原型链的例子，来探索对象继承的机制，以及如何判断对象的类型。让我们一起深入解析这段代码，看看它会输出什么以及为什么。

今天的挑战题目涉及到JavaScript中的 with 语句和嵌套对象的作用域处理。with 语句允许你在指定对象的上下文中执行代码，但它的行为可能会让你感到意外，特别是在处理嵌套对象时。让我们一起分析这段代码，看看它会输出什么以及为什么。

今天给大家推荐一个非常好用的Java工具类库，企业级常用工具类，基本都有，能避免重复造轮子及节省大量的开发时间，非常不错，值得大家去了解使用。

你可能已经遇到 let 关键字上百万次了。它是 JavaScript（以及扩展的 TypeScript）中那些最初看起来像是救星的特性之一。

新来的同事，干了3年java，代码中 isEmpty 和 isBlank 的区别 都不知道，一顿瞎用...

今天的话题涉及到JavaScript中的类继承 (class inheritance)、静态方法 (static method)、以及 super 关键字的使用。让我们一起来分析这段代码，看看它会输出什么以及为什么。

Set 从 ES6 就已经存在了，但通常它们只是用来确保列表中没有重复项。然而，随着这7个即将推出的内置 Set 方法，我们可能会发现自己更加频繁地使用它们。

在前端开发中，代码质量和一致性至关重要。「ESLint」 是帮助你提升代码质量的关键工具，尤其是在使用 「Vue」 和 「React」 进行开发时，合理配置和使用 ESLint 能够大幅提升开发效率和代码质量。但是，你知道如何在 「VSCode」 中无缝集成 ESLint，并让它自动为你提示和修复代码问题吗？

JavaScript这门编程语言，总是能带给人无尽的惊喜和探索的乐趣。今天，我想带大家一起深入了解其中一个非常有趣且强大的功能——生成器（Generators）。

在日常开发中，我们经常会使用到 JSON.stringify 这个方法，特别是在需要进行序列化（深拷贝）的时候。它可以把我们的对象转换成一个 JSON 字符串，这个方法确实非常方便，但它也有一些不常被注意到的缺点。

在JavaScript编程中，管理对象的可变性对于保持代码的稳定性和可预测性至关重要。有两个强大的方法可以帮助控制对象属性的变化，它们分别是Object.freeze()和Object.seal()。这篇文章将深入探讨Object.freeze()和Object.seal()的实际用途，并通过实例来说明它们的功能和使用场景，帮助你在实际开发中有效地运用这些方法。

JavaScript是一门强大且灵活的编程语言，它的许多独特特性是其他编程语言所不具备的。在JavaScript的面向对象编程中，原型系统是一个基础概念。理解原型和原型链对于掌握JavaScript至关重要，因为它让开发者能够理解语言中的继承和属性解析机制。

在前端开发中，我们经常需要操作和处理对象，比如用户信息、商品详情等。如何高效、优雅地遍历对象，是每个开发者都需要掌握的技能。今天我们来深入探讨三种遍历JavaScript对象的实用方法，让你的代码既简洁又强大！

此系列是解析 Vue3 源码与实现系列的前置知识，本文介绍了 ES6 Proxy 相关的知识。

此系列是解析 Vue3 源码与实现系列的前置知识，本文介绍了 Set、Map、WeakSet、WeakMap 相关的知识。

此系列是解析 Vue3 源码与实现系列的前置知识，本文介绍了 TypeScript 相关的知识。

此系列是解析 Vue3 源码与实现系列的前置知识，本文介绍了测试相关的知识。

随着 Vite 的盛行，使用 Vite 的开发者越来越多，那么 Vite 和 Webpack 到底有什么不同？它为什么会快这么多呢？这篇文章我们就来深层解读一下。

Vue3 发布有一段时间了，近期有空一探究竟，特此总结。

2024年，nodejs 在 Javascript 运行时中仍然占据着霸主的地位。其丰富的生态系统是其他运行时无法比拟的。今天我们就来盘点下2024年当下 nodejs 的生态系统。

在本文中，我们探讨了一些最鲜为人知且很少使用的HTML标签。尽管使用频率低，但这些罕见的标签在特定情况下可能非常有用。

在 React 开发的世界里，组件之间的通信无疑是一个至关重要的话题。React 的设计理念使得我们的代码更加模块化和灵活，但也因此带来了组件通信的多样性和复杂性。如何在这些众多的通信方式中选择最适合自己项目的呢？这不仅仅是技术上的考量，更是对代码可维护性和用户体验的深思熟虑。

在前段时间的一次面试中，被问到了一个如标题这样的问题。要想好好地去回答这个问题，这里牵扯到的知识点也是比较多的。那么接下来这篇文章我们就一点一点开始引出这个问题。

最近，我们部门在开发一个组件库时，我注意到一些团队成员对使用TypeScript表示出了抵触情绪，他们常常抱怨说：“TypeScript太麻烦了，我们不想用！”起初，我对此感到困惑：TypeScript真的有那么麻烦吗？然而，当我抽时间审查队伍的代码时，我终于发现了问题所在。

你知道这两个hook之间的区别吗？如果知道，你是否了解它们的微妙之处以及何时使用其中的哪一个？这篇文章会给你答案。

如果打开一个文件，看到的全是满屏幕的 import 语句，这将是一种怎样的体验？

性能优化是每个前端开发者在构建任何软件，特别是Web应用时所关注的头等大事。诸如Vue、React、Angular 等 JS框架已经包含了一些很棒的配置和功能。在这里，我将回顾一些能帮助你优化 React 应用性能的特性和技巧。

在前端开发中，与远程服务器无缝互动并通过网络交换数据是必不可少的一环。不论是从API获取数据、执行CRUD操作，还是处理其他网络相关任务，HTTP请求的重要性不言而喻。为了让开发者更轻松地处理HTTP请求，JavaScript社区中诞生了两个非常流行的库：Axios和Fetch。

JavaScript 是一门灵活多变的语言，它的魅力之一就在于可以对函数进行各种炫酷的操作。今天我们要聊的是一个听起来有点高深，但其实很有趣的概念——柯里化（Currying）。

2024年:又是一个带来全新JS特性升级的不可思议的年份,ES15推出。

在快节奏的Web开发世界里，掌握JavaScript数组方法对于提升开发效率至关重要。以下是一些你应该知道的数组方法，它们能帮助你更快、更精确地完成任务。

最近项目需要开发一款JSSDK，所以查阅了相关的资料并进行了整理。

关于PNPM + Monorepo 在实际项目中的应用

最近工作中画了不少UML的图，推荐一个PlantUML的VSCode插件，让你画图无忧

最近有好几场全英文面试，面对国外的技术面试官，应该怎么样才能博得眼球并且顺利通过呢？

经过多年的不断演进，React 已经构建了一个极为丰富且强大的生态系统，本文就来盘点2024年 React 技术栈组合。

本篇文章我会把一步一步打造我自己喜欢的 MacOS 开发环境的过程记录下来，换电脑或者重装系统的时候可以参考。

npm包相信大家都用了很多了，下面我来教大家如何发布一个自己的npm package.

从基础到进阶，测试你有多了解 JavaScript，刷新你的知识，或者帮助你的 coding 面试。

在这篇文章中，我们将深入探讨 Promise 的一些内部机制，并探索它们是如何使得 JavaScript 能够执行非阻塞的异步任务。

随着 HTTPS 的不断普及和使用成本的下降，现阶段大部分的系统都已经开始用上 HTTPS 协议。 HTTPS 与 HTTP 相比， 主打的就是安全概念，相关的知识如 SSL 、非对称加密、 CA证书、数据完整性保护 等，我们多多少少也都有听过。 本文重点从原理上讲解 HTTPS 的安全性，以及同HTTP的比较说明。

随着微服务架构的不断发展，分布式系统逐渐普及到后端领域的每一个角落。在分布式系统中，跨多个服务的数据一致性一直是一个重大挑战，为解决这一挑战，分布式事务应运而生。

本文聚焦高并发场景下分布式一致性算法的分析和讨论。

在高并发环境下保证数据一致性是一个复杂而关键的问题，涉及到多个层面和策略。

本文介绍了分布式系统的基础知识，以及分布式业务场景下保障分布式事务数据一致性、Action原子性的解决方案。

我们为什么需要微服务架构，它一定是为了解决我们某些问题才出现了。这篇文章我们讨论下微服务架构模式所解决的问题，带来的挑战，以及他的核心思想本质。

JWT、JWS、JWE、JWA、JWK简介及使用方法

OpenID Connect 1.0是建立在OAuth 2.0上的一个身份验证机制，它允许客户端通过授权服务对用户进行认证并获取简单的用户信息。

所谓SSO，它的解释是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

OAuth 通过引入授权层来解决这些问题，并将客户端的角色与资源的角色分开...

本文介绍了数字签名，加密和解密，对称加密和非对称加密，然后详细介绍了MD5，SHA-1，HMAC，DES/AES，RSA和ECC这几种加密算法和代码示例。

在网站的安全性架构中，常常用到各种加密方法和算法；本文总结了几种加密方法的原理，以备不时之用。

Web端常用的验证方式就是JWT Token，本文旨在阐述清楚JWT相关的知识，以及应用的流程。

横向比较了常见的monorepo工具，并整理成了表格可供大家参阅

Everything you need to know about monorepos, and the tools to build them.

这篇文章其实阐述了很多观点，关于BFF，关于多端API，关于应该如何选型，请自行理解。文章最后我会附上参考链接。

转载自https://www.maguangguang.xyz/bff-governance，结合一个典型案例的BFF治理思考

BFF在改善前端用户体验上起到了非常大的作用，但因为介于前端和后端之间，在落地实施过程中很容易踩坑

2023年生成式AI掀起了一股巨大的浪潮。不管现在你身边是否已经有人应用了AI技术，你身边一定有很多人整天都在谈论AI，并且有些人已经全身心地投入到学习和研究AI的领域。

如果你感兴趣，可以跟着步骤一步步来，搭建属于你的 VitePress 评论系统。

我对新能源汽车的一些不成熟的见解，纯属个人见解，个人用车体会。

亦称：虚拟构造函数、Virtual Constructor、Factory Method，属于创建型模式

责任链模式是一种行为设计模式，允许你将请求沿着处理者链进行发送。收到请求后，每个处理者均可对请求进行处理，或将其传递给链上的下个处理者。

命令模式是一种行为设计模式，它可将请求转换为一个包含与请求相关的所有信息的独立对象。该转换让你能根据不同的请求将方法参数化、延迟请求执行或将其放入队列中，且能实现可撤销操作。

中介者模式是一种行为设计模式，能让你减少对象之间混乱无序的依赖关系。该模式会限制对象之间的直接交互，迫使它们通过一个中介者对象进行合作。

迭代器模式是一种行为设计模式，让你能在不暴露集合底层表现形式（列表、栈和树等）的情况下遍历集合中所有的元素。

备忘录模式是一种行为设计模式，允许在不暴露对象实现细节的情况下保存和恢复对象之前的状态。

观察者模式是一种行为设计模式，允许你定义一种订阅机制，可在对象事件发生时通知多个“观察”该对象的其他对象。

状态模式是一种行为设计模式，让你能在一个对象的内部状态变化时改变其行为，使其看上去就像改变了自身所属的类一样。

策略模式是一种行为设计模式，它能让你定义一系列算法，并将每种算法分别放入独立的类中，以使算法的对象能够相互替换。

模板方法模式是一种行为设计模式，它在超类中定义了一个算法的框架，允许子类在不修改结构的情况下重写算法的特定步骤。

访问者模式是一种行为设计模式，它能将算法与其所作用的对象隔离开来。

适配器模式是一种结构型设计模式， 它能使接口不兼容的对象能够相互合作。

桥接模式是一种结构型设计模式，可将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构，从而能在开发时分别使用。

组合模式是一种结构型设计模式，你可以使用它将对象组合成树状结构，并且能像使用独立对象一样使用它们。

装饰模式是一种结构型设计模式，允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为。

享元模式是一种结构型设计模式，它摒弃了在每个对象中保存所有数据的方式，通过共享多个对象所共有的相同状态，让你能在有限的内存容量中载入更多对象。

代理模式是一种结构型设计模式，让你能够提供对象的替代品或其占位符。代理控制着对于原对象的访问，并允许在将请求提交给对象前后进行一些处理。

抽象工厂模式是一种创建型设计模式， 它能创建一系列相关的对象， 而无需指定其具体类。

原型模式是一种创建型设计模式， 使你能够复制已有对象， 而又无需使代码依赖它们所属的类。

单例模式是一种创建型设计模式， 让你能够保证一个类只有一个实例， 并提供一个访问该实例的全局节点。

亦称：建造者模式、Builder，属于创建型模式.

我为什么要在工作了15+年之后又重新写博客了？

公司的项目正好要用到WebSocket，所以我做了一些deep dive，整理了这篇文档。

现代浏览器是由什么组成的？

最近在各种面试，也总结了一些关于浏览器和网络协议之类的知识。可以作为一个大纲，如果想深入研究的话请各自翻阅更加详细的资料。

浏览器的一些渲染原理，是一部分，不是全部。完整的原理请去google网站查看。

深入学习React系列的第一篇，也是Fiber架构的第一篇。

Fiber架构的之二，读完这篇和references，你应该对Fiber是什么有深入的理解了，至少面试没问题了吧。