pingan8787

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

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

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

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

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

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

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 使用

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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...

一、介绍写 React 代码的朋友应该都是直接写 JSX 代码，JSX 让我们可以在 JS 中直接写 HTML 代码，可阅读性较高。本章节主要介绍 JSX 通过 babel 转换后会生成什么样式代码。二、案例div 标签<div></div>通过 babel 转换后：React.createElement("div", null);带 id 属性的 ...

看完复联四，我整理了这份 GraphQL 入门教程，哈哈真香。。。欢迎关注我的 个人主页 && 个人博客 && 个人知识库 && 微信公众号“前端自习课”首先有请阿爸镇贴！哈哈哈，需要高清原图的小伙伴可以 点我下载 阿爸无敌 。下面开始本文内容：一、GraphQL介绍GraphQL 是 Facebook 开发的一种 API 的查询...

前言自从入职新公司到现在，我们前端团队内部一直在做

前言我们大前端团队内部

前言我们大前端团队内部

介绍1. 背景最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 Webpack4，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！2. 文章概要我将从最基础的【项目初始化】开始介绍，到【处理 ...

最近 ECMAScript2019，最新提案完成：tc39 Finished Proposals，我这里也是按照官方介绍的顺序进行整理，如有疑问，可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》，可以一起看哈。1. 可选的 catch 绑定1.1 介绍在 ECMAScript2019 最新提案中，支持我们在使用 try catch 错误异常处理时，选择性的给 ...

本文目录一、项目起步二、编写路由组件三、编写页面组件1.编写单一组件2.模拟数据3.编写主从组件四、编写服务1.为什么需要服务2.编写服务五、引入RxJS1.关于RxJS2.引入RxJS3.改造数据获取方式六、改造组件1.添加历史记录组件2.添加和删除历史记录七、HTTP改造1.引入HTTP2.通过HTTP请求数据3.通过HTTP...

本文是 重温基础 系列文章的第六篇。今日感受：自己需要多总结，会有不同收获（比如今晚我做的转正总结）。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1.语法和数据类型【重温基础】2.流程控制和错误处理【重温基础】3.循环和迭代【重温基础】4.函数【重温基础】5.表达式和运算符本章节复习的是JS中的数字类型，涉及的API比较多。前置基础：...

这是第六周的练习题，最近加班比较多，上周主要完成一篇 GraphQL入门教程 ，有兴趣的小伙伴可以看下哈。下面是之前分享的链接：1.每周一练 之 数据结构与算法（Stack）2.每周一练 之 数据结构与算法（LinkedList）3.每周一练 之 数据结构与算法（Queue）4.每周一练 之 数据结构与算法（Set）5.每周一练 之 数据结构与算法（Dictionary 和 Has...

这是第五周的练习题，上周忘记发啦，这周是复习 Dictionary 和 HashTable。下面是之前分享的链接：1.每周一练 之 数据结构与算法（Stack）2.每周一练 之 数据结构与算法（LinkedList）3.每周一练 之 数据结构与算法（Queue）4.每周一练 之 数据结构与算法（Set）欢迎关注我的 个人主页 && 个人博客 &&amp...

这是第三周的练习题，原本应该先发第二周的，因为周末的时候，我的母亲大人来看望她的宝贝儿子，哈哈，我得带她看看厦门这座美丽的城市呀。这两天我抓紧整理下第二周的题目和答案，下面我把之前的也列出来：1.每周一练 之 数据结构与算法（Stack）欢迎关注我的 个人主页 && 个人博客 && 个人知识库 && 微信公众号“前端自习课”本周练习...

本文是 重温基础 系列文章的第十九篇。今日感受：将混乱的事情找出之间的联系，也是种能力。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)【重温基础】1-14篇【重温基础】15.JS对象介绍【重温基础】16.JSON对象介绍【重温基础】17.WebAPI介绍【重温基础】18.相等性判断本章节复习的是JS中的关于闭包，这个小哥哥呀，看看。前置知识：声明...