pingan8787

Broadcast Channel API 是一个浏览器 Web API，它允许我们创建一个能够将数据广播给多个文档或浏览器窗口的通道。通过该通道实现不同浏览器窗口之间的数据共享。我们可以向该频道发送消息，其他窗口则可以监听该频道以接收消息。Broadcast Channel API 是一种 Web API，能够方便地在不同浏览器窗口之间共享数据。希望本文能够帮助读者更好地使用该 API。

无论你是一位专业的开发人员，还是一个有兴趣的学习者，这些开源编辑器将带给你无限的创造空间，同时可以轻松扩展和自定义，让你的工作更加高效和愉悦。选择一款可靠的富文本编辑器，是保持个人和团队协作竞争力的首要步骤。希望这些开源富文本编辑器能够满足你的各种需求和要求，为你带来无穷的创意和灵感。

将类型定义和实现分离可以提高代码的可读性和可维护性，同时也可以避免一些潜在的问题和冲突。// 将类型定义和实现分离 interface MyInterface {bar = 42;👏 在分离类型定义和实现时，需要保持接口和实现之间的一致性和正确性，同时需要遵守一定的命名规范和代码风格。在 TypeScript 中，使用interface定义对象类型可以提高代码的可读性和可维护性，同时也可以提供更强的类型检查和代码提示。

get

本文我将结合自己实际工作经验，总结 11 个 React 开发中常见的一些错误，帮助您避免一些错误的发生。

今天分享的 6 个插件，大家可以按需安装使用。我比较强烈推荐实用Volar和这 2 个插件。👍大家有更好的插件，欢迎评论分享~🔥欢迎关注我的微信公众号“前端自习课”。

本文为大家推荐了 3 款非常常用的 Node.js 版本管理工具，大家可以按照自己实际需求选择使用。如果大家有更好的工具，欢迎留言分享😄。欢迎关注微信公众号“前端自习课”。

在入门阶段，我们需要掌握的是「是什么」、「怎么用」、「有什么注意」，基本就差不多了。

作为前端开发工程师，JavaScript是我们的主要开发语言，它本身语法比较简单，并且生态系统也非常完善，在社区的影响力越来越大。在我们使用过程中，经常会遇到各种奇怪的问题，让我们经常摸不着头脑。本文灵感来自，整理了6个比较常见并且很有意思的问题。...

今天主要聊一下 Node.js 中 LTS 和 Current 的区别和如何选择合适的版本。

这是我第一次写低代码相关的文章，如有错误，欢迎指正~~

本文从数学中的映射作为切入点，详细介绍 TypeScript 映射类型（Mapped Type）并介绍映射类型的应用和修饰符的应用。

总结我最近从入门到实战 Vue3 全家桶的 3 个项目后总结避坑经验。

组件化是前端发展的一个重要方向，它一方面提高开发效率，另一方面降低维护成本。主流的 Vue.js、React 及其延伸的 Ant Design、uniapp、Taro 等都是组件框架。​Web Components 是一组 Web 原生 API 的总称，允许我们创建可重用的自定义组件，并在我们 Web 应用中像使用原生 HTML 标签一样使用。目前已经很多前端框架/库支持 Web Components。本文将带大家回顾 Web Components 核心 API，并从 0 到 1 实现一个基于 Web

这两天用到 cacheables 缓存库，觉得挺不错的，和大家分享一下我看完源码的总结。一、介绍「cacheables」正如它名字一样，是用来做内存缓存使用，其代码仅仅 200 行左右（不含注释），官方的介绍如下：一个简单的内存缓存，支持不同的缓存策略，使用 TypeScript 编写优雅的语法。它的特点：优雅的语法，包装现有 API 调用，节省 API 调用；完全输入的结果。不需要类型转换。支持不同的缓存策略。集成日志：检查 API 调用的时间。使用辅助函数来构建缓存 key。

本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支持一下啦。最近在重构一个项目，主要是做 H5 端和小程序端，这次打算开始多做总结啦，之前已经总结一篇《如何优雅的管理 HTTP 请求和响应拦截器？》 。如果大家还有其他方案，欢迎一起探讨哈~ 喜欢本文的朋友给个赞????鼓励一下哈~一、需求思考和方案设计本文介绍的项目是使用 Taro框架进行多端开发，目前主要适配 H5 端和微信小程序端。项目使用的字体图标库内部维护，目前托管在 iconfont 上。

本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支持一下啦。最近重构一个老项目，发现其中处理请求的拦截器写得相当乱，于是我将整个项目的请求处理层重构了，目前已经在项目中正常运行。本文会和大家分享我的重构思路和后续优化的思考，为方便与大家分享，我用 Vue3 实现一个简单 demo，思路是一致的，有兴趣的朋友可以在我 Github 查看，本文会以这个 Vue 实现的 demo 为例介绍。本文我会主要和大家分享以下几点：问题分析和方案设计；重构后效果；开发过程

Vue 3 中的响应式原理可谓是非常之重要，通过学习 Vue3 的响应式原理，不仅能让我们学习到 Vue.js 的一些设计模式和思想，还能帮助我们提高项目开发效率和代码调试能力。在这之前，我也写了一篇《探索 Vue.js 响应式原理》 ，主要介绍 Vue 2 响应式的原理，这篇补上 Vue 3 的。于是最近在 Vue Mastery 上重新学习 Vue3 Reactivity 的知识，这次收获更大。本文将带大家从头开始学习如何实现简单版 Vue 3 响应式，帮助大家了解其核心，后面阅读 Vu.

提到“响应式”三个字，大家立刻想到啥？响应式布局？响应式编程？从字面意思可以看出，具有“响应式”特征的事物会根据条件变化，使得目标自动作出对应变化。比如在“响应式布局”中，页面根据不同设备尺寸自动显示不同样式。Vue.js 中的响应式也是一样，当数据发生变化后，使用到该数据的视图也会相应进行自动更新。接下来我根据个人理解，和大家一起探索下 Vue.js 中的响应式原理，如有错误，欢迎指点????~~一、Vue.js 响应式的使用现在有个很简单的需求，点击页面中 “leo” 文本后，文本内容修改为

生活不可能像你想象的那么好，但也不会像你想象的那么糟。我觉得人的脆弱和坚强都超乎自己的想像，有时我脆弱得一句话就泪流满面，有时又发现自己咬着牙走了很长的路。回看 2020，我更加喜爱这句话了，每个小句子都有了不同味道。一、再见 2020 ????2020疫情复工后，我便开始进入“战斗模式”，深受公众号“全栈修仙之路”作者“阿宝哥”影响????，开始把更多时间和精力用来修炼自身，努力成长和进阶，成为一位“靠谱的人”和一名“T 型人才”。靠谱的人：让自己靠谱，让别人放心；T 型人才：深挖知识深度，

React 是一个 Facebook 开源的，用于构建用户界面的 JavaScript 库。React 目的在于解决：构建随着时间数据不断变化的大规模应用程序。其中 React 合成事件是较为重要的知识点，阅读完本文，你将收获：合成事件的概念和作用；合成事件与原生事件的 3 个区别；合成事件与原生事件的执行顺序；合成事件的事件池；合成事件 4 个常见问题。接下来和我一起开始学习吧~一、概念介绍React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事.

欢迎关注我的微信公众号“前端自习课”一、背景介绍Leo 部门最近来了位前端实习生 Robin，作为师傅，Leo 认真的为 Robin 介绍了公司业务、部门工作等情况，还有前端的新人学习地图。接下来 Robin 开始一周愉快的学习啦~一周后，Leo 为 Robin 同学布置了学习作业，开发一个【人员搜索选择】的页面，效果大致如下：Robin 看完这个效果图后，一脸得意的样子，这确实不难呀~过几天后，Robin 带着自己写的代码，给 Leo 展示了她的代码，并疑惑的问到：她将这个“数组”输出到

一、模式介绍1. 背景介绍在软件系统中经常碰到这类需求：当一个对象的状态发生改变，某些与它相关的对象也要随之做出相应的变化。这是建立一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象将相应做出反应。我们将发生改变的对象称为观察目标，将被通知的对象称为观察者，一个观察目标可以对应多个观察者，而且这些观察者之间没有相互联系，之后可以根据需要增加和删除观察者，使得系统更易于扩展，这就是观察者模式的产生背景。2. 概念介绍观察者模式(Observer Pattern)：定义对象间

前言在《初中级前端 JavaScript 自测清单 - 1》部分中，和大家简单过了一遍 JavaScript 基础知识，没看过的朋友可以回顾一下????本系列文章是我在我们团队内部的“现代 JavaScript 突击队”，第一期学习内容为《现代 JavaScript 教程》系列的第二部分输出内容，希望这份自测清单，能够帮助大家巩固知识，温故知新。本部分内容，以 JavaScript 对象为主，大致包括以下内容：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQSVa6

最近原创文章????：《1.2w字 ｜ 初中级前端 JavaScript 自测清单 - 1》《了不起的 Webpack HMR 学习指南（含源码分析）》《了不起的 Webpack 构建流程学习指南》《你不知道的 WeakMap》番外篇《你不知道的 Blob》番外篇《了不起的 tsconfig.json 指南》《200行JS代码，带你实现代码编译器》一、什么是 Scope HoistingScope Hoisting 是 webpack3 的新功能，直译为 “作用域提升”，它可以让 we

前言最近与部门老大一起面试了许多前端求职者，其中想换个学习氛围较好的人占多数，但良好的学习氛围也是需要一点点营造出来的????。为此我们组建了我们团队内部的“现代 JavaScript 突击队”，第一期学习内容为《现代 JavaScript 教程》系列，帮助小组成员系统地进行学习巩固，并让大家养成系统性学习和输出学习总结的学习方式。本文作为我输出的第一部分学习总结，希望作为一份自测清单，帮助大家巩固知识，温故知新。这里也下面分享我们学习小组的“押金制度”和“押金记录表”????[外链图片转存失败,

最近原创文章回顾：《了不起的 tsconfig.json 指南》《了不起的 Webpack HMR 学习指南（含源码分析）》《《你不知道的 Blob》番外篇》《《你不知道的 WeakMap》番外篇》Webpack 是前端很火的打包工具，它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有模块打包成一个或.

学习时间：2020.06.14学习章节：《Webpack HMR 原理解析》一、HMR 介绍Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，它允许在 JavaScript 运行时更新各种模块，而无需完全刷新。Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of .

学习时间：2020.05.26学习章节：《你不知道的 WeakMap》一、主要知识点原文主要复习了“JavaScript垃圾回收机制”，“Map/WeakMap区别”和“WeakMap 属性和方法”。这很好弥补被我忽视的知识点。另外，我们可以通过原文，以相同方式再去学 Set/WeakSet，效果会更好，本文后面也会介绍到。总结开始，先看原文大纲：在开始介绍 WeakMap 之前，先复习一遍 JavaScript 中垃圾回收机制，这跟后面的 WeakMap/WeakSet 关系较大。1. 垃圾回

学习时间：2020.06.06学习章节：《你不知道的 Blob》原文对 Blob 的知识点介绍得非常完整清晰，本文通过四个问题来总结本文核心知识：Blob 是什么？Blob 怎么用？Blob 有哪些使用场景？Blob 与 ArrayBuffer 有何区别？[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQqYubvx-1591628996915)(http://images.pingan8787.com/blog/you-dont-know-blob/xmin

在 TypeScript 开发中，tsconfig.json 是个不可或缺的配置文件，它是我们在 TS 项目中最常见的配置文件，那么你真的了解这个文件吗？它里面都有哪些优秀配置？如何配置一个合理的 tsconfig.json 文件？本文将全面带大家一起详细了解 tsconfig.json 的各项配置。本文将从以下几个方面全面介绍 tsconfig.json 文件：水平有限，欢迎各位大佬指点~~一、tsconfig.json 简介1. 什么是 tsconfig.jsonTypeScript 使用

最近看到掘金、前端公众号好多 ES2020 的文章，想说一句：放开我，我还学得动！先问大家一句，日常项目开发中你能离开 ES6 吗？一、前言对于前端同学来说，编译器可能适合神奇的魔盒????，表面普通，但常常给我们惊喜。编译器，顾名思义，用来编译，编译什么呢？当然是编译代码咯????。其实我们也经常接触到编译器的使用场景：React 中 JSX 转换成 JS 代码；通过 Babel 将...

【Webpack】????Webpack 插件开发如此简单！本文使用的Webpack-Quickly-Starter快速搭建 Webpack4 本地学习环境。建议多阅读 Webpack 文档《Writing a Plugin》章节，学习开发简单插件。本文将带你一起开发你的第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！做自己的轮子，让别...

在前端开发世界中，JavaScript 和 HTML 之间往往通过 事件 来实现交互。其中多数为内置事件，本文主要介绍 JS自定义事件概念和实现方式，并结合案例详细分析自定义事件的原理、功能、应用及注意事项。????一、什么是自定义事件在日常开发中，我们习惯监听页面许多事件，诸如：点击事件（ click ）、鼠标移动事件（ mousemove ）、元素失去焦点事件（ blur ）等等。事件本质是一...

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hYNfSzpQ-1576683821839)(http://images.pingan8787.com/blog/File_FileList_FileReader封面图.png)]本文首发在我的【个人博客】更多丰富的前端学习资料，可以查看我的 Github: 《Leo-JavaScript》，内容涵盖数据结构与算...

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIcrPd1r-1576506349715)(http://images.pingan8787.com/blog/ArrayBufferAndBlob.png)]本文首发在我的【个人博客】更多丰富的前端学习资料，可以查看我的 Github: 《Leo-JavaScript》，内容涵盖数据结构与算法、HTTP、Hy...

一、概念介绍1. REST 概念REST：（Representational State Transfer）即表现层状态转换，定义了资源的通用访问格式，是一种网络应用程序的设计风格和开发方式。在概念中，需要理解以下几个名称：资源（Resource）即服务器上获取到的东西任何资源，一条用户记录，一个用户的密码，一张图片等等都是。资源的表述（Representation）即资源...

《全栈修炼》系列《【全栈修炼】OAuth2修炼宝典》CORS 和 CSRF 太容易混淆了，看完本文，你就清楚了。一、CORS 和 CSRF 区别先看下图：两者概念完全不同，另外常常我们也会看到 XSS ，这里一起介绍：CORS ： Cross Origin Resourse-Sharing 跨站资源共享CSRF ： Cross-Site Request Forgery...

一、OAuth 概念开放授权（OAuth）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。 —— 维基百科严格来说，OAuth2 不是一个标准协议，而是一个安全的授权框架。其详细描述系统中不同角色，用户，服务前端应用（如 API ）以及客户端（如网站或APP）之间如何实现相互认证。当前 OAut...

一、MobX 介绍首先看下官网介绍：MobX 是一个经过战火洗礼的库，它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:任何源自应用状态的东西都应该自动地获得。其中包括UI、数据序列化、服务器通讯，等等。核心重点就是：MobX...