Chris

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

最近原创文章🔥： - [《了不起的 Webpack HMR 学习指南（含源码分析）》](https://juejin.im/post/5ee8e32a51882543485780d3) - [《了不起的 Webpack 构建流程学习指南》](https://juejin.im/post/5eeff398e51d4573e060874d) - [《你不知道的 WeakMap》番外篇](https://juejin.im/post/5ee78bb7f265da76f15a0698) - [《你不知道的 Blob》番外篇](https://juejin.im/post/5ede5300e51d4578a6798220) - [《了不起的 tsconfig.json 指南》](https://juejin.im/post/5ed589a251882542e3022f44) - [《200行JS代码，带你实现代码编译器》](https://juejin.im/post/5e802e41e51d4546b659b31b) --- # 前言 最近与部门老大一起面试了许多前端求职者，其中**想换个学习氛围较好的人占多数**，但良好的学习氛围也是需要一点点营造出来的🌺。 为此我们组建了我们团队内部的“**现代 JavaScript 突击队**”，第一期学习内容为[《现代 JavaScript...

# 前言 在[《初中级前端 JavaScript 自测清单 - 1》](https://juejin.im/post/6846687584710557710)部分中，和大家简单过了一遍 JavaScript 基础知识，没看过的朋友可以回顾一下😁 本系列文章是我在我们团队内部的“**现代 JavaScript 突击队**”，第一期学习内容为[《现代 JavaScript 教程》](https://zh.javascript.info/)系列的**第二部分**输出内容，希望这份自测清单，能够帮助大家巩固知识，温故知新。 本部分内容，以 **JavaScript 对象**为主，大致包括以下内容：  # 一、对象 JavaScript 有八种数据额类型，有七种原始类型，它们值只包含一种类型（字符串，数字或其他），而对象是用来**保存键值对和更复杂实体。** 我们可以通过使用带有可选**属性列表**的花括号 `**{...}**` 来创建对象，一个属性就是一个键值对 `{"key" :...

# 前言 在之前两篇自测清单中，和大家分享了很多 JavaScript 基础知识，大家可以一起再回顾下~ 本文是我在我们团队内部“**现代 JavaScript 突击队**”分享的一篇内容，第二期学习内容为“**设计模式**”系列，我会将我负责分享的知识整理成文章输出，希望能够和大家一起温故知新！ “**现代 JavaScript 突击队**”学习总结： 1. [《初中级前端 JavaScript 自测清单 - 1》](https://juejin.im/post/6846687584710557710) 2. [《初中级前端 JavaScript 自测清单 - 2》](https://juejin.im/post/6857037330113363982) # 一、模式介绍 ## 1. 背景介绍 在软件系统中经常碰到这类需求：当一个对象的状态发生改变，某些与它相关的对象也要随之做出相应的变化。这是建立一种**对象与对象之间的依赖关系**，一个对象发生改变时将**自动通知其他对象**，其他对象将**相应做出反应**。 我们将发生改变的对象称为**观察目标**，将被通知的对象称为**观察者**，**一个观察目标可以对应多个观察者**，而且这些观察者之间没有相互联系，之后可以根据需要增加和删除观察者，使得系统更易于扩展，这就是观察者模式的产生背景。...

# 前言 在之前两篇自测清单中，和大家分享了很多 JavaScript 基础知识，大家可以一起再回顾下~ 本文是我在我们团队内部“**现代 JavaScript 突击队**”分享的一篇内容，第二期学习内容为“**设计模式**”系列，我会将我负责分享的知识整理成文章输出，希望能够和大家一起温故知新！ “**现代 JavaScript 突击队**”学习总结： 1. [《初中级前端 JavaScript 自测清单 - 1》](https://juejin.im/post/6846687584710557710) 2. [《初中级前端 JavaScript 自测清单 - 2》](https://juejin.im/post/6857037330113363982) 3. [《TypeScript 设计模式之观察者模式》](https://juejin.im/post/6862112623417098248) 4. [《TypeScript语法总结+项目(Vue.js+TS)实战》](https://juejin.im/post/6861525441786675208) # 一、模式介绍...

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

近期原创文章回顾😄 * [《1.2w字 ｜ 初中级前端 JavaScript 自测清单 - 1》](https://juejin.im/post/5f0023625188252e8c308597) * [《了不起的 Webpack HMR 学习指南（含源码分析）》](https://juejin.im/post/5ee8e32a51882543485780d3) * [《了不起的 Webpack 构建流程学习指南》](https://juejin.im/post/5eeff398e51d4573e060874d) * [《你不知道的 WeakMap》番外篇](https://juejin.im/post/5ee78bb7f265da76f15a0698) * [《你不知道的 Blob》番外篇](https://juejin.im/post/5ede5300e51d4578a6798220) * [《了不起的 tsconfig.json 指南》](https://juejin.im/post/5ed589a251882542e3022f44) * [《200行JS代码，带你实现代码编译器》](https://juejin.im/post/5e802e41e51d4546b659b31b)...

最近原创文章回顾： - [《了不起的 tsconfig.json 指南》](https://juejin.im/post/5ed589a251882542e3022f44) - [《了不起的 Webpack HMR 学习指南（含源码分析）》](https://juejin.im/post/5ee8e32a51882543485780d3) - [《《你不知道的 Blob》番外篇》](https://juejin.im/post/5ede5300e51d4578a6798220) - [《《你不知道的 WeakMap》番外篇》](https://juejin.im/post/5ee78bb7f265da76f15a0698) Webpack 是前端很火的打包工具，它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(`dependency graph`)，其中包含应用程序需要的每个模块，然后将所有模块打包成一个或多个 `bundle`。 其实就是：Webpack 是一个 JS 代码打包器。 至于图片、CSS、Less、TS等其他文件，就需要...

学习时间：2020.06.14 学习章节：[《Webpack HMR 原理解析》](https://zhuanlan.zhihu.com/p/30669007)  # 一、HMR 介绍 Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，**它允许在 JavaScript 运行时更新各种模块，而无需完全刷新**。 > Hot Module Replacement (or HMR) is one of the most...

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