From 45aa0b82da22ee14daac36879fbe2caf1f0fb497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= <1849613717@qq.com> Date: Tue, 14 Sep 2021 11:42:58 +0800 Subject: [PATCH 01/81] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e44a64f..65b1eeb 100644 --- a/README.md +++ b/README.md @@ -21,17 +21,37 @@ 成功采纳后，如果你面试遇到其他问题，笔者可以提供免费解答服务。 -### 今日原题 +### 变量提升 -第一题：[以下代码输出什么，为什么？](https://github.com/KieSun/fucking-frontend/issues/1)。 +- 为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 +- JavaScript 只会提升声明，不会提升其初始化。如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined + ```js +console.log(yck) 输出结果 undefined +var yck='大佬'; + ``` + +- 用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 ```js -try { - (async function() { a().b().c() })() -} catch (e) { - console.log(`执行出错：${e.message}`) -} +console.log(typeof yck) ReferenceError +let yck='大佬'; ``` +```js +console.log(typeof yck) undefined +var yck='大佬'; +``` + +> 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 + +- [ ] 文档 + - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) +- [ ] 推荐文章 + - [ ] [JavaScript：变量提升&&作用域](https://www.huaweicloud.com/articles/716b97a06ee15d04f34b2d24b46e2bfe.html) + - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) + - [ ] [JavaScript的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) + - [ ] [var，let，const和变量提升](https://www.clloz.com/programming/front-end/js/2020/07/01/variable-hoist/) + +> 务必自己总结规则！ ## 前端十五万字面试资料 From a671b66b0e1e09d687e9b0feeb99023d375e59f1 Mon Sep 17 00:00:00 2001 From: w3liangxn Date: Tue, 14 Sep 2021 20:05:04 +0800 Subject: [PATCH 02/81] =?UTF-8?q?feat:=20JS=E7=9A=84=E7=BB=A7=E6=89=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4d21d39..d8f03b2 100644 --- a/README.md +++ b/README.md @@ -88,6 +88,9 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [双等判断](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) - [ ] 推荐文章 - [ ] [You Don't Know JS 书中关于类型转换的一章节](https://github.com/weiqinl/You-Dont-Know-JS-CN/blob/master/types%20%26%20grammar/ch4.md) + - [ ] [几种基本类型简单的类型转换](https://zh.javascript.info/type-conversions) + - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) + - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) ### this @@ -147,10 +150,17 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 的工作原理](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)，需自备梯子，另有 [中文翻译版](https://github.com/Troland/how-javascript-works/blob/master/event-loop.md)。 - [ ] 事件循环可视化 - [ ] [Loupe](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) - - [ ] [几种基本类型简单的类型转换](https://zh.javascript.info/type-conversions) - - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) - - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) +### 继承 + +继承是面向对象语言（Object-Oriented Language）三大特征之一，在JS中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 + +- [ ] 文档 + - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) +- [ ] 推荐文章 + - [ ] [Javascript继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) + - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) + - [ ] [JS原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From f9b97cd45c55febf77365e060afbe5b062870bdd Mon Sep 17 00:00:00 2001 From: W3LiangXN Date: Tue, 14 Sep 2021 12:08:27 +0000 Subject: [PATCH 03/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d8f03b2..7c4caa3 100644 --- a/README.md +++ b/README.md @@ -153,14 +153,15 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 继承 -继承是面向对象语言（Object-Oriented Language）三大特征之一，在JS中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 +继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - - [ ] [Javascript继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) - - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - - [ ] [JS原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) + - [ ] [Javascript 继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) + - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) + - [ ] [JS 原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 06220db602d11ad899b5c1894c60e7002e73c50a Mon Sep 17 00:00:00 2001 From: W3LiangXN Date: Tue, 14 Sep 2021 21:47:07 +0800 Subject: [PATCH 04/81] =?UTF-8?q?Update=20JS=E7=9A=84=E7=BB=A7=E6=89=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d8f03b2..346e9c0 100644 --- a/README.md +++ b/README.md @@ -158,9 +158,9 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - - [ ] [Javascript继承机制的设计思想](https://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html) - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - - [ ] [JS原型链与继承别再被问倒了](https://juejin.cn/post/6844903475021627400) + - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 + - [ ] [JS类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 5d54fb1aaa9d74b57e5334c91c07874014922a12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Tue, 14 Sep 2021 21:47:45 +0800 Subject: [PATCH 05/81] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 49 +++++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 65b1eeb..0869fd8 100644 --- a/README.md +++ b/README.md @@ -23,33 +23,42 @@ ### 变量提升 -- 为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 - -- JavaScript 只会提升声明，不会提升其初始化。如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined - ```js -console.log(yck) 输出结果 undefined -var yck='大佬'; - ``` - -- 用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 -```js -console.log(typeof yck) ReferenceError -let yck='大佬'; -``` -```js -console.log(typeof yck) undefined -var yck='大佬'; -``` - > 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 +为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 + +我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。 +```js +// 普通函数声明 +console.log(Gangster("yck")) // yck undefined +function Gangster(name) { + console.log(name); +} +``` +```js +// 声明式函数 +console.log(Gangster("yck")) // Gangster is not a function +var Gangster = function (name) { + console.log(name); +} +``` +在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 +```js +function Gangster(){ + console.log("大佬"); +}; +console.log(Gangster); // Function: Gangster +Gangster(); // 大佬 +var Gangster = "我是变量的值"; +console.log(Gangster); // 我是变量的值 +``` + - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) - [ ] 推荐文章 - - [ ] [JavaScript：变量提升&&作用域](https://www.huaweicloud.com/articles/716b97a06ee15d04f34b2d24b46e2bfe.html) - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) - [ ] [JavaScript的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) - - [ ] [var，let，const和变量提升](https://www.clloz.com/programming/front-end/js/2020/07/01/variable-hoist/) + - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) > 务必自己总结规则！ From 0b2da719bc38d50887d773414309cf83dabe0daf Mon Sep 17 00:00:00 2001 From: yck Date: Tue, 14 Sep 2021 21:49:29 +0800 Subject: [PATCH 06/81] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4d21d39..c53e103 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +# Fucking Frontend

Commit Stars From 0d504e9651a1acd74d38bb0e6225692009d80af8 Mon Sep 17 00:00:00 2001 From: KieSun Date: Tue, 14 Sep 2021 13:49:46 +0000 Subject: [PATCH 07/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c53e103..fec966b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Fucking Frontend +

Commit Stars From 62e5a2a615e5008e33346e5392fb3e6ab036bb97 Mon Sep 17 00:00:00 2001 From: W3LiangXN Date: Tue, 14 Sep 2021 13:50:53 +0000 Subject: [PATCH 08/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ef557f6..1c23b5a 100644 --- a/README.md +++ b/README.md @@ -158,9 +158,10 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 文档 - [ ] [继承](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance) - [ ] 推荐文章 - - [ ] [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) + - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - - [ ] [JS类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) + - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 72507ed77e3f26745a3789f14e4bf564da3ccb4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Tue, 14 Sep 2021 21:53:52 +0800 Subject: [PATCH 09/81] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87&=E5=8F=98=E9=87=8F=E6=8F=90=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0869fd8..3418f6f 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ 成功采纳后，如果你面试遇到其他问题，笔者可以提供免费解答服务。 -### 变量提升 +### 变量提升&变量提升 > 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 From b17725e018b8804a777b0ed2fee52dc291709326 Mon Sep 17 00:00:00 2001 From: jingwenlong Date: Tue, 14 Sep 2021 21:53:56 +0800 Subject: [PATCH 10/81] =?UTF-8?q?feat:=20=E5=9E=83=E5=9C=BE=E5=9B=9E?= =?UTF-8?q?=E6=94=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4d21d39..603ace2 100644 --- a/README.md +++ b/README.md @@ -26,8 +26,23 @@ ## 目录 +- [这是什么？](#这是什么) +- [如何使用](#如何使用) +- [目录](#目录) - [学习路径](#学习路径) - - [前端核心知识点](#前端核心知识点) +- [前端核心知识点](#前端核心知识点) +- [JS](#js) + - [数据类型](#数据类型) + - [类型判断](#类型判断) + - [类型转换](#类型转换) + - [this](#this) + - [闭包](#闭包) + - [作用域](#作用域) + - [new](#new) + - [事件循环](#事件循环) + - [垃圾回收](#垃圾回收) +- [跨端框架](#跨端框架) +- [微前端](#微前端) - [十五万字面试资料](#十五万字面试资料) - [前端工程化文章](#前端工程化文章) - [React 原理](#react-原理) @@ -151,6 +166,18 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) +### 垃圾回收 + +JavaScrip 在对象被创建时分配内存，并在对象不再使用时“自动”释放内存，这个过程被称为垃圾回收。 + +- [ ] 文档 + - [ ] [内存管理 & 垃圾回收](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) +- [ ] 推荐文章 + - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) + - [ ] [V8 引擎垃圾回收与内存分配](https://juejin.cn/post/6909239354418266119) + - [ ] [JavaScript 工作原理：内存管理 + 处理常见的4种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) + + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From d86bf6267c26b025167d73c38e879e6d35f8a7ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Tue, 14 Sep 2021 22:03:30 +0800 Subject: [PATCH 11/81] =?UTF-8?q?JavaScript=E5=8F=98=E9=87=8F=E6=8F=90?= =?UTF-8?q?=E5=8D=87&=E5=87=BD=E6=95=B0=E6=8F=90=E5=8D=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3418f6f..7a15038 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ 成功采纳后，如果你面试遇到其他问题，笔者可以提供免费解答服务。 -### 变量提升&变量提升 +### 变量提升&函数提升 > 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 @@ -53,6 +53,14 @@ var Gangster = "我是变量的值"; console.log(Gangster); // 我是变量的值 ``` +用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 +```js +console.log(yck) // undefined +var yck='大佬'; + +console.log(typeof yck) //ReferenceError +let yck='大佬'; +``` - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) - [ ] 推荐文章 From df16aab2b56801886b0075429fb7d79c52555856 Mon Sep 17 00:00:00 2001 From: KieSun Date: Tue, 14 Sep 2021 14:07:26 +0000 Subject: [PATCH 12/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bb20298..c5a2bee 100644 --- a/README.md +++ b/README.md @@ -148,7 +148,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [Babel 是如何编译 Class 上](https://github.com/mqyqingfeng/Blog/issues/105) - [ ] [Babel 是如何编译 Class 下](https://github.com/mqyqingfeng/Blog/issues/106) - [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616) - - [ ] [应该在JavaScript中使用Class吗？](https://zhuanlan.zhihu.com/p/158956514) + - [ ] [应该在 JavaScript 中使用 Class 吗？](https://zhuanlan.zhihu.com/p/158956514) ### 事件循环 From 5c9c1fb18f3098b8460b6fe6d0aaf1df82a32767 Mon Sep 17 00:00:00 2001 From: yck Date: Tue, 14 Sep 2021 22:15:40 +0800 Subject: [PATCH 13/81] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 45a0fba..4c6c74c 100644 --- a/README.md +++ b/README.md @@ -170,7 +170,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 垃圾回收 -JavaScrip 在对象被创建时分配内存，并在对象不再使用时“自动”释放内存，这个过程被称为垃圾回收。 +JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 - [ ] 文档 - [ ] [内存管理 & 垃圾回收](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) From 1a996aa4121f888d76a0dc01bd119fef2633ac9c Mon Sep 17 00:00:00 2001 From: rudy-lc Date: Tue, 14 Sep 2021 14:38:00 +0000 Subject: [PATCH 14/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 57 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 8f5a773..3a6bcc8 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 作用域 作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。 + - [ ] 文档 - [ ] [作用域](https://developer.mozilla.org/en-US/docs/Glossary/Scope) - [ ] [块作用域](https://developer.mozilla.org/en-US/docs/Glossary/Block/Scripting) @@ -138,52 +139,58 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 推荐文章 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) - + ### 变量提升&函数提升 -> 变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 +> 变量提升（Hoisting）被认为是， Javascript 中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 -为什么会出现变量提升？ 因为JavaScript在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 +为什么会出现变量提升？ 因为 JavaScript 在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。 + ```js // 普通函数声明 -console.log(Gangster("yck")) // yck undefined +console.log(Gangster("yck")); // yck undefined function Gangster(name) { - console.log(name); -} -``` -```js -// 声明式函数 -console.log(Gangster("yck")) // Gangster is not a function -var Gangster = function (name) { console.log(name); } ``` -在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 + ```js -function Gangster(){ - console.log("大佬"); +// 声明式函数 +console.log(Gangster("yck")); // Gangster is not a function +var Gangster = function (name) { + console.log(name); }; -console.log(Gangster); // Function: Gangster -Gangster(); // 大佬 -var Gangster = "我是变量的值"; -console.log(Gangster); // 我是变量的值 ``` -用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有JavaScript执行到当前变量声明这句语句时，才能使用这个变量。 +在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 + ```js -console.log(yck) // undefined -var yck='大佬'; - -console.log(typeof yck) //ReferenceError -let yck='大佬'; +function Gangster() { + console.log("大佬"); +} +console.log(Gangster); // Function: Gangster +Gangster(); // 大佬 +var Gangster = "我是变量的值"; +console.log(Gangster); // 我是变量的值 ``` + +用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有 JavaScript 执行到当前变量声明这句语句时，才能使用这个变量。 + +```js +console.log(yck); // undefined +var yck = "大佬"; + +console.log(typeof yck); //ReferenceError +let yck = "大佬"; +``` + - [ ] 文档 - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) - [ ] 推荐文章 - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) - - [ ] [JavaScript的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) + - [ ] [JavaScript 的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) ### Class(类) From 63aa2ba5a5542e4b7f6bbc6c9b10336f911bfaa7 Mon Sep 17 00:00:00 2001 From: liuc Date: Tue, 14 Sep 2021 22:48:37 +0800 Subject: [PATCH 15/81] =?UTF-8?q?feat:=20react=20=E5=90=88=E6=88=90?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index c5a2bee..90f9b31 100644 --- a/README.md +++ b/README.md @@ -166,6 +166,21 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) +## React + +### 合成事件 + +React 根据 [W3C规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。这是一个稍微冷门的知识点，但很考验我们是否扎实的掌握了浏览器的事件机制。掌握这个知识点，可以给人眼前一亮的感觉。 + +- [ ] 文档 + - [ ] [React官方文档-英文](https://reactjs.org/docs/events.html) + - [ ] [React官方文档-中文](https://zh-hans.reactjs.org/docs/events.html) +- [ ] 推荐文章 + - [ ] [【React深入】React事件机制](https://mp.weixin.qq.com/s?__biz=Mzg2NDAzMjE5NQ==&mid=2247484039&idx=1&sn=1f657356676d4809633f30668acb50d2&chksm=ce6ec62bf9194f3d8a4eb382bd01c56231908a1b08fb9c2c9783f96df6650ee808fe18343032&scene=178&cur_album_id=1403155327595495424#rd) + - [ ] [深入React合成事件机制原理](https://segmentfault.com/a/1190000039108951) + - [ ] [深入学习 React 合成事件](https://mp.weixin.qq.com/s/7Y70ozwJHBXON11fBCD9Og) + - [ ] [React源码分析6 — React合成事件系统](https://zhuanlan.zhihu.com/p/25883536) + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From a6dd12d3afa4a4cbe085ab33327323d38815c561 Mon Sep 17 00:00:00 2001 From: yck Date: Tue, 14 Sep 2021 23:03:00 +0800 Subject: [PATCH 16/81] Update README.md --- README.md | 50 ++++---------------------------------------------- 1 file changed, 4 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 3a6bcc8..57cb80a 100644 --- a/README.md +++ b/README.md @@ -140,57 +140,15 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) -### 变量提升&函数提升 +### 变量提升 -> 变量提升（Hoisting）被认为是， Javascript 中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。 - -为什么会出现变量提升？ 因为 JavaScript 在运行的时候会有 编译和和执行两个过程，在它编译的时候，会对全局进行搜索，所有的变量和函数声明会被移至其作用域的顶部，而其它的语句不会改变它们的顺序，所以在编译阶段，先执行了变量的声明。 - -我们声明一个函数的时候如果在声明函数的前面调用这个函数也是可以执行的，因为这个函数在解析的时候函数声明会被移至其作用域的顶部 。函数提升只提升函数声明，不会提升函数表达式。 - -```js -// 普通函数声明 -console.log(Gangster("yck")); // yck undefined -function Gangster(name) { - console.log(name); -} -``` - -```js -// 声明式函数 -console.log(Gangster("yck")); // Gangster is not a function -var Gangster = function (name) { - console.log(name); -}; -``` - -在变量赋值前，函数声明依旧是函数声明,当变量赋值后，函数声明被会被相同名字的变量覆盖，所以说函数提升的优先级大于变量提升 - -```js -function Gangster() { - console.log("大佬"); -} -console.log(Gangster); // Function: Gangster -Gangster(); // 大佬 -var Gangster = "我是变量的值"; -console.log(Gangster); // 我是变量的值 -``` - -用 `var` 声明变量时会将声明提升到函数或全局作用域的顶部。但是 `let` 或者 `const`，会将声明放进 TemporalDeadZone，简称 TDZ(暂时性死区)，只有 JavaScript 执行到当前变量声明这句语句时，才能使用这个变量。 - -```js -console.log(yck); // undefined -var yck = "大佬"; - -console.log(typeof yck); //ReferenceError -let yck = "大佬"; -``` +变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 - [ ] 文档 - - [ ] [JS 变量提升](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting) + - [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) - [ ] 推荐文章 - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) - - [ ] [JavaScript 的执行上下文](https://www.huaweicloud.com/articles/b0e28ae85a6f6d4e4e28824a94d17b51.html) + - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) ### Class(类) From a75ef420236f4c10c90da836b3bb64dc5190ce16 Mon Sep 17 00:00:00 2001 From: jingwenlong Date: Tue, 14 Sep 2021 23:12:16 +0800 Subject: [PATCH 17/81] =?UTF-8?q?feat:=20=E5=9E=83=E5=9C=BE=E5=9B=9E?= =?UTF-8?q?=E6=94=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 49 +++++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 4c6c74c..db6c195 100644 --- a/README.md +++ b/README.md @@ -28,29 +28,30 @@ ## 目录 -- [这是什么？](#这是什么) -- [如何使用](#如何使用) -- [目录](#目录) -- [学习路径](#学习路径) -- [前端核心知识点](#前端核心知识点) -- [JS](#js) - - [数据类型](#数据类型) - - [类型判断](#类型判断) - - [类型转换](#类型转换) - - [this](#this) - - [闭包](#闭包) - - [作用域](#作用域) - - [new](#new) - - [事件循环](#事件循环) - - [垃圾回收](#垃圾回收) -- [跨端框架](#跨端框架) -- [微前端](#微前端) -- [十五万字面试资料](#十五万字面试资料) -- [前端工程化文章](#前端工程化文章) -- [React 原理](#react-原理) -- [前端进阶文章](#前端进阶文章) -- [更多文章](#更多文章) -- [个人信息](#个人信息) +- [Fucking Frontend](#fucking-frontend) + - [这是什么？](#这是什么) + - [如何使用](#如何使用) + - [目录](#目录) + - [学习路径](#学习路径) + - [前端核心知识点](#前端核心知识点) + - [JS](#js) + - [数据类型](#数据类型) + - [类型判断](#类型判断) + - [类型转换](#类型转换) + - [this](#this) + - [闭包](#闭包) + - [作用域](#作用域) + - [new](#new) + - [事件循环](#事件循环) + - [垃圾回收](#垃圾回收) + - [跨端框架](#跨端框架) + - [微前端](#微前端) + - [十五万字面试资料](#十五万字面试资料) + - [前端工程化文章](#前端工程化文章) + - [React 原理](#react-原理) + - [前端进阶文章](#前端进阶文章) + - [更多文章](#更多文章) + - [个人信息](#个人信息) ## 学习路径 @@ -176,7 +177,7 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [内存管理 & 垃圾回收](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) - [ ] 推荐文章 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - - [ ] [V8 引擎垃圾回收与内存分配](https://juejin.cn/post/6909239354418266119) + - [ ] [深入理解Chrome V8垃圾回收机制](https://github.com/yacan8/blog/issues/33) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的4种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) From c2e9a828c7f20a8fdbf45d4ec5fd539b78257a3b Mon Sep 17 00:00:00 2001 From: zhanghao Date: Wed, 15 Sep 2021 00:04:03 +0800 Subject: [PATCH 18/81] =?UTF-8?q?feat:=20=E8=8A=82=E6=B5=81=E4=B8=8E?= =?UTF-8?q?=E9=98=B2=E6=8A=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 57cb80a..152f895 100644 --- a/README.md +++ b/README.md @@ -188,6 +188,17 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) +### 节流与防抖 + +节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。 +防抖指在事件被触发后一定时间后再执行回调函数，如果在一定时间内，该事件又被重复触发，则重启计时。 + +- [ ] 推荐文章 + - [ ] [函数防抖与函数节流](https://zhuanlan.zhihu.com/p/38313717) + - [ ] [浅谈 JS 防抖和节流](https://segmentfault.com/a/1190000018428170) + - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example/)，需自备梯子 + - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript)，需自备梯子 + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 4e050f65be00ee5c5d318e79240e39355450e0ce Mon Sep 17 00:00:00 2001 From: nicenonecb <1664546556@qq.com> Date: Wed, 15 Sep 2021 00:13:31 +0800 Subject: [PATCH 19/81] feat: generator and iterator --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 57cb80a..416c0ea 100644 --- a/README.md +++ b/README.md @@ -187,7 +187,16 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) +### 迭代器与生成器 +更多用例详见 忍者秘籍 P125 + +- [ ] 文档 + - [ ] [迭代器与生成器](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators) +- [ ] 推荐文章 + - [ ] [[译] 什么是 JavaScript 生成器？如何使用生成器？](https://juejin.cn/post/6844903616357072910) + - [ ] [JavaScript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)，需自备梯子 + - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5），需自备梯子 ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From bc15c8dbe7a3ab59bbe973e8d2b22ae7a356b6b6 Mon Sep 17 00:00:00 2001 From: nicenonecb <1664546556@qq.com> Date: Wed, 15 Sep 2021 00:19:58 +0800 Subject: [PATCH 20/81] feat: update style --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 416c0ea..6690738 100644 --- a/README.md +++ b/README.md @@ -187,6 +187,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) + ### 迭代器与生成器 更多用例详见 忍者秘籍 P125 @@ -197,6 +198,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [[译] 什么是 JavaScript 生成器？如何使用生成器？](https://juejin.cn/post/6844903616357072910) - [ ] [JavaScript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)，需自备梯子 - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5），需自备梯子 + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 9716c3e83d9f0f428d1713c3bb1b6ac5843ae19d Mon Sep 17 00:00:00 2001 From: yck Date: Wed, 15 Sep 2021 08:02:53 +0800 Subject: [PATCH 21/81] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d61f392..53933a6 100644 --- a/README.md +++ b/README.md @@ -211,8 +211,8 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] 文档 - [ ] [内存管理 & 垃圾回收](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) - [ ] 推荐文章 + - [ ] [深入理解Chrome V8垃圾回收机制](https://github.com/yacan8/blog/issues/33)，该文章的参考文献也可阅读下 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - - [ ] [深入理解Chrome V8垃圾回收机制](https://github.com/yacan8/blog/issues/33) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的4种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) From c126ad916190c00ba7edab2a426282eb4d2338ba Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 00:03:22 +0000 Subject: [PATCH 22/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 53933a6..0cac182 100644 --- a/README.md +++ b/README.md @@ -211,10 +211,9 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] 文档 - [ ] [内存管理 & 垃圾回收](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management) - [ ] 推荐文章 - - [ ] [深入理解Chrome V8垃圾回收机制](https://github.com/yacan8/blog/issues/33)，该文章的参考文献也可阅读下 + - [ ] [深入理解 Chrome V8 垃圾回收机制](https://github.com/yacan8/blog/issues/33)，该文章的参考文献也可阅读下 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - - [ ] [JavaScript 工作原理：内存管理 + 处理常见的4种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) - + - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) ## 跨端框架 From a4c0b81ad413301bc54df822e9e55b50feb9e10e Mon Sep 17 00:00:00 2001 From: xuwu Date: Wed, 15 Sep 2021 08:12:30 +0800 Subject: [PATCH 23/81] feat: update toc --- README.md | 47 +++++++++++++++++++++++------------------------ 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 0cac182..950ffaf 100644 --- a/README.md +++ b/README.md @@ -28,30 +28,29 @@ ## 目录 -- [Fucking Frontend](#fucking-frontend) - - [这是什么？](#这是什么) - - [如何使用](#如何使用) - - [目录](#目录) - - [学习路径](#学习路径) - - [前端核心知识点](#前端核心知识点) - - [JS](#js) - - [数据类型](#数据类型) - - [类型判断](#类型判断) - - [类型转换](#类型转换) - - [this](#this) - - [闭包](#闭包) - - [作用域](#作用域) - - [new](#new) - - [事件循环](#事件循环) - - [垃圾回收](#垃圾回收) - - [跨端框架](#跨端框架) - - [微前端](#微前端) - - [十五万字面试资料](#十五万字面试资料) - - [前端工程化文章](#前端工程化文章) - - [React 原理](#react-原理) - - [前端进阶文章](#前端进阶文章) - - [更多文章](#更多文章) - - [个人信息](#个人信息) +- [学习路径](#学习路径) +- [前端核心知识点](#前端核心知识点) +- [JS](#js) + - [数据类型](#数据类型) + - [类型判断](#类型判断) + - [类型转换](#类型转换) + - [this](#this) + - [闭包](#闭包) + - [作用域](#作用域) + - [new](#new) + - [变量提升](#变量提升) + - [Class(类)](#class类) + - [事件循环](#事件循环) + - [继承](#继承) + - [垃圾回收](#垃圾回收) +- [跨端框架](#跨端框架) +- [微前端](#微前端) +- [十五万字面试资料](#十五万字面试资料) +- [前端工程化文章](#前端工程化文章) +- [React 原理](#react-原理) +- [前端进阶文章](#前端进阶文章) +- [更多文章](#更多文章) +- [个人信息](#个人信息) ## 学习路径 From d6cf017626793c7d6f8872fe892fdbf61ebf2b42 Mon Sep 17 00:00:00 2001 From: nicenonecb <1664546556@qq.com> Date: Wed, 15 Sep 2021 10:25:42 +0800 Subject: [PATCH 24/81] =?UTF-8?q?feat=EF=BC=9A=E6=8E=A8=E8=8D=90=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6690738..3fe6f82 100644 --- a/README.md +++ b/README.md @@ -196,8 +196,8 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [迭代器与生成器](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators) - [ ] 推荐文章 - [ ] [[译] 什么是 JavaScript 生成器？如何使用生成器？](https://juejin.cn/post/6844903616357072910) - - [ ] [JavaScript Visualized: Generators and Iterators](https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36)，需自备梯子 - - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5），需自备梯子 + - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5) + - [ ] [A Simple Guide to ES6 Iterators in JavaScript with Examples](https://codeburst.io/a-simple-guide-to-es6-iterators-in-javascript-with-examples-189d052c3d8e) ## 跨端框架 From 02fad10950d33b98ee9aa1b2d3c90e2243475e90 Mon Sep 17 00:00:00 2001 From: liuc Date: Wed, 15 Sep 2021 10:51:18 +0800 Subject: [PATCH 25/81] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0react=E5=90=88?= =?UTF-8?q?=E6=88=90=E4=BA=8B=E4=BB=B6=E6=8E=A8=E8=8D=90=E6=96=87=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 874a804..527ec20 100644 --- a/README.md +++ b/README.md @@ -184,13 +184,13 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 React 根据 [W3C规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。这是一个稍微冷门的知识点，但很考验我们是否扎实的掌握了浏览器的事件机制。掌握这个知识点，可以给人眼前一亮的感觉。 - [ ] 文档 - - [ ] [React官方文档-英文](https://reactjs.org/docs/events.html) - - [ ] [React官方文档-中文](https://zh-hans.reactjs.org/docs/events.html) + - [ ] [React官方文档](https://reactjs.org/docs/events.html) - [ ] 推荐文章 - - [ ] [【React深入】React事件机制](https://mp.weixin.qq.com/s?__biz=Mzg2NDAzMjE5NQ==&mid=2247484039&idx=1&sn=1f657356676d4809633f30668acb50d2&chksm=ce6ec62bf9194f3d8a4eb382bd01c56231908a1b08fb9c2c9783f96df6650ee808fe18343032&scene=178&cur_album_id=1403155327595495424#rd) - - [ ] [深入React合成事件机制原理](https://segmentfault.com/a/1190000039108951) - - [ ] [深入学习 React 合成事件](https://mp.weixin.qq.com/s/7Y70ozwJHBXON11fBCD9Og) - - [ ] [React源码分析6 — React合成事件系统](https://zhuanlan.zhihu.com/p/25883536) + - [ ] [浅谈React17事件机制](https://juejin.cn/post/6971242638716436487) + - [ ] [深入React合成事件机制原理](https://segmentfault.com/a/1190000039108951) + - [ ] [React17 事件系统 更改 & 16 之前事件系统介绍](https://juejin.cn/post/6964257086859378724) + - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294) + - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) ## 跨端框架 From 7c8eeda98de317a1223f7f6aea361b7ba32d392a Mon Sep 17 00:00:00 2001 From: zhanghao Date: Wed, 15 Sep 2021 10:54:36 +0800 Subject: [PATCH 26/81] =?UTF-8?q?feat:=20=E8=8A=82=E6=B5=81=E4=B8=8E?= =?UTF-8?q?=E9=98=B2=E6=8A=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 152f895..c70d912 100644 --- a/README.md +++ b/README.md @@ -196,8 +196,8 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 推荐文章 - [ ] [函数防抖与函数节流](https://zhuanlan.zhihu.com/p/38313717) - [ ] [浅谈 JS 防抖和节流](https://segmentfault.com/a/1190000018428170) - - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example/)，需自备梯子 - - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript)，需自备梯子 + - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example) + - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript) ## 跨端框架 From fc979c167cb10609779a538e2d31af3b330b0556 Mon Sep 17 00:00:00 2001 From: m-yangyu <2388560359@qq.com> Date: Wed, 15 Sep 2021 14:04:29 +0800 Subject: [PATCH 27/81] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=BA=93=E7=9F=A5=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 74 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 51 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 950ffaf..e7178a1 100644 --- a/README.md +++ b/README.md @@ -28,29 +28,34 @@ ## 目录 -- [学习路径](#学习路径) -- [前端核心知识点](#前端核心知识点) -- [JS](#js) - - [数据类型](#数据类型) - - [类型判断](#类型判断) - - [类型转换](#类型转换) - - [this](#this) - - [闭包](#闭包) - - [作用域](#作用域) - - [new](#new) - - [变量提升](#变量提升) - - [Class(类)](#class类) - - [事件循环](#事件循环) - - [继承](#继承) - - [垃圾回收](#垃圾回收) -- [跨端框架](#跨端框架) -- [微前端](#微前端) -- [十五万字面试资料](#十五万字面试资料) -- [前端工程化文章](#前端工程化文章) -- [React 原理](#react-原理) -- [前端进阶文章](#前端进阶文章) -- [更多文章](#更多文章) -- [个人信息](#个人信息) +- [Fucking Frontend](#fucking-frontend) + - [这是什么？](#这是什么) + - [如何使用](#如何使用) + - [目录](#目录) + - [学习路径](#学习路径) + - [前端核心知识点](#前端核心知识点) + - [JS](#js) + - [数据类型](#数据类型) + - [类型判断](#类型判断) + - [类型转换](#类型转换) + - [this](#this) + - [闭包](#闭包) + - [作用域](#作用域) + - [new](#new) + - [变量提升](#变量提升) + - [Class(类)](#class类) + - [事件循环](#事件循环) + - [继承](#继承) + - [垃圾回收](#垃圾回收) + - [组件库](#组件库) + - [跨端框架](#跨端框架) + - [微前端](#微前端) + - [十五万字面试资料](#十五万字面试资料) + - [前端工程化文章](#前端工程化文章) + - [React 原理](#react-原理) + - [前端进阶文章](#前端进阶文章) + - [更多文章](#更多文章) + - [个人信息](#个人信息) ## 学习路径 @@ -214,6 +219,29 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) +## 组件库 + +组件库顾名思义指的就是将多个公共模块或者可复用的组件提取整合生成的一个仓库 + +知名度较广的组件库： + +- [antd](https://github.com/ant-design/ant-design.git) +- [elementUI](https://github.com/ElemeFE/element.git) + +相关文档： + +- [lerna](https://github.com/lerna/lerna) +- [angular commit 规范](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit) +- [yarn](https://yarnpkg.com/) +- [css variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) + +推荐文章： + +- [从 0 到 1，搭建一个体系完善的前端 React 组件库](https://www.infoq.cn/article/i4q9ybdmxzmu8eex8qvh) +- [如何规范你的Git commit？](https://zhuanlan.zhihu.com/p/182553920) +- [基于lerna和yarn workspace的monorepo工作流](https://zhuanlan.zhihu.com/p/71385053) +- [FusionNext可配置能力从Sass体系升级为支持Css Variable](https://zhuanlan.zhihu.com/p/257159028) + ## 跨端框架 跨端的最主要的含义就是一套代码多端运行，减少重复劳动 From 2d9c56203f4d6836b7de1d55ebf119ce3d9d564e Mon Sep 17 00:00:00 2001 From: yck Date: Wed, 15 Sep 2021 14:13:06 +0800 Subject: [PATCH 28/81] Update README.md --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 527ec20..dc9ee10 100644 --- a/README.md +++ b/README.md @@ -181,15 +181,14 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 合成事件 -React 根据 [W3C规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。这是一个稍微冷门的知识点，但很考验我们是否扎实的掌握了浏览器的事件机制。掌握这个知识点，可以给人眼前一亮的感觉。 +合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 [W3C规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差异。 - [ ] 文档 - [ ] [React官方文档](https://reactjs.org/docs/events.html) - [ ] 推荐文章 - - [ ] [浅谈React17事件机制](https://juejin.cn/post/6971242638716436487) - - [ ] [深入React合成事件机制原理](https://segmentfault.com/a/1190000039108951) - - [ ] [React17 事件系统 更改 & 16 之前事件系统介绍](https://juejin.cn/post/6964257086859378724) - - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294) + - [ ] [探索 React 合成事件](https://segmentfault.com/a/1190000038251163) + - [ ] [大佬，怎么办？升级React17，Toast组件不能用了](https://zhuanlan.zhihu.com/p/380941094) + - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) ## 跨端框架 From 842f2c72f7def0bf77659b120996480975de4bdc Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 06:14:07 +0000 Subject: [PATCH 29/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0e4e13e..9d08791 100644 --- a/README.md +++ b/README.md @@ -202,7 +202,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) - + ### 垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 @@ -218,13 +218,13 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 ### 合成事件 -合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 [W3C规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差异。 +合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。React 根据 [W3C 规范](https://www.w3.org/TR/DOM-Level-3-Events/) 定义了合成事件。需要注意的是 v16 和 17 版本中的合成事件有差异。 - [ ] 文档 - - [ ] [React官方文档](https://reactjs.org/docs/events.html) + - [ ] [React 官方文档](https://reactjs.org/docs/events.html) - [ ] 推荐文章 - [ ] [探索 React 合成事件](https://segmentfault.com/a/1190000038251163) - - [ ] [大佬，怎么办？升级React17，Toast组件不能用了](https://zhuanlan.zhihu.com/p/380941094) + - [ ] [大佬，怎么办？升级 React17，Toast 组件不能用了](https://zhuanlan.zhihu.com/p/380941094) - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) From afc29a73f34ee23ed5968980b3f76654eb6ce53f Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 06:15:27 +0000 Subject: [PATCH 30/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 07967e5..c4dff3c 100644 --- a/README.md +++ b/README.md @@ -213,7 +213,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [浅谈 JS 防抖和节流](https://segmentfault.com/a/1190000018428170) - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example) - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript) - + ### 垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 From 6ea4a608f6db93b4a38158013789af8f08f0f054 Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 06:15:34 +0000 Subject: [PATCH 31/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 07967e5..c4dff3c 100644 --- a/README.md +++ b/README.md @@ -213,7 +213,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [浅谈 JS 防抖和节流](https://segmentfault.com/a/1190000018428170) - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example) - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript) - + ### 垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 From 15f8bec3ceebeb6e10648a5464a05e52bfb62cec Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 06:19:06 +0000 Subject: [PATCH 32/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c889aa5..a566ede 100644 --- a/README.md +++ b/README.md @@ -230,7 +230,6 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) - ## React ### 合成事件 @@ -276,9 +275,9 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 推荐文章： - [从 0 到 1，搭建一个体系完善的前端 React 组件库](https://www.infoq.cn/article/i4q9ybdmxzmu8eex8qvh) -- [如何规范你的Git commit？](https://zhuanlan.zhihu.com/p/182553920) -- [基于lerna和yarn workspace的monorepo工作流](https://zhuanlan.zhihu.com/p/71385053) -- [FusionNext可配置能力从Sass体系升级为支持Css Variable](https://zhuanlan.zhihu.com/p/257159028) +- [如何规范你的 Git commit？](https://zhuanlan.zhihu.com/p/182553920) +- [基于 lerna 和 yarn workspace 的 monorepo 工作流](https://zhuanlan.zhihu.com/p/71385053) +- [FusionNext 可配置能力从 Sass 体系升级为支持 Css Variable](https://zhuanlan.zhihu.com/p/257159028) ## 微前端 From ed947c7ed770a9721301a16f1dd2dd47e0eec49c Mon Sep 17 00:00:00 2001 From: rookielzy Date: Wed, 15 Sep 2021 14:56:35 +0800 Subject: [PATCH 33/81] =?UTF-8?q?feat:=20=E5=8E=9F=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index a566ede..7349515 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ - [this](#this) - [闭包](#闭包) - [作用域](#作用域) + - [原型](#原型) - [new](#new) - [变量提升](#变量提升) - [Class(类)](#class类) @@ -150,6 +151,16 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [You Don't Know JS Yet: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures) - [ ] [The battle between function scope and block scope](https://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/) +### 原型 + +- [ ] 文档 + - [ ] [原型](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) +- [ ] 推荐文章 + - [ ] [JavaScript 深入之从原型到原型链](https://github.com/mqyqingfeng/Blog/issues/2) + - [ ] [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch5.md) + - [ ] [深入理解 JavaScript 原型](https://mp.weixin.qq.com/s/1UDILezroK5wrcK-Z5bHOg) + - [ ] [深度解析原型中的各个难点](https://juejin.cn/post/6844903575974313992) + - [ ] [Prototypes in JavaScript](https://betterprogramming.pub/prototypes-in-javascript-5bba2990e04b) 需自备梯子 ### new `new` 操作符可以帮助我们构建出一个实例，并且绑定上 `this`。 From 001cad3412c8bb1f5ace13d2fb7f18d96cea09fd Mon Sep 17 00:00:00 2001 From: yck Date: Wed, 15 Sep 2021 17:51:47 +0800 Subject: [PATCH 34/81] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7349515..c7300d5 100644 --- a/README.md +++ b/README.md @@ -156,11 +156,11 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 文档 - [ ] [原型](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) - [ ] 推荐文章 - - [ ] [JavaScript 深入之从原型到原型链](https://github.com/mqyqingfeng/Blog/issues/2) - [ ] [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/ch5.md) - [ ] [深入理解 JavaScript 原型](https://mp.weixin.qq.com/s/1UDILezroK5wrcK-Z5bHOg) - [ ] [深度解析原型中的各个难点](https://juejin.cn/post/6844903575974313992) - [ ] [Prototypes in JavaScript](https://betterprogramming.pub/prototypes-in-javascript-5bba2990e04b) 需自备梯子 + ### new `new` 操作符可以帮助我们构建出一个实例，并且绑定上 `this`。 From d588afd234f4ceb2006d717fc0efa47a0076d4ae Mon Sep 17 00:00:00 2001 From: yck Date: Wed, 15 Sep 2021 17:54:59 +0800 Subject: [PATCH 35/81] Update README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 5b1b0b3..697e6e5 100644 --- a/README.md +++ b/README.md @@ -209,15 +209,13 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) ### 迭代器与生成器 - -更多用例详见 忍者秘籍 P125 - [ ] 文档 - - [ ] [迭代器与生成器](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators) + - [ ] [迭代器与生成器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) - [ ] 推荐文章 - [ ] [[译] 什么是 JavaScript 生成器？如何使用生成器？](https://juejin.cn/post/6844903616357072910) - - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5) - - [ ] [A Simple Guide to ES6 Iterators in JavaScript with Examples](https://codeburst.io/a-simple-guide-to-es6-iterators-in-javascript-with-examples-189d052c3d8e) + - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5)，需自备梯子 + - [ ] [A Simple Guide to ES6 Iterators in JavaScript with Examples](https://codeburst.io/a-simple-guide-to-es6-iterators-in-javascript-with-examples-189d052c3d8e)，需自备梯子 ### 节流与防抖 From d042b3902cd7b7858efe5afb08f00849f2731762 Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 09:55:30 +0000 Subject: [PATCH 36/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a89494c..068cbcb 100644 --- a/README.md +++ b/README.md @@ -218,9 +218,9 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) - + ### 迭代器与生成器 - + - [ ] 文档 - [ ] [迭代器与生成器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) - [ ] 推荐文章 From 592baafe9996be643884b1793a0584b60e5e10f1 Mon Sep 17 00:00:00 2001 From: jingwenlong Date: Wed, 15 Sep 2021 21:16:06 +0800 Subject: [PATCH 37/81] =?UTF-8?q?feat:=20css=20flex=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 068cbcb..a09cb26 100644 --- a/README.md +++ b/README.md @@ -250,6 +250,15 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) +## CSS +### flex +- [ ] 文档 + - [ ] [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) +- [ ] 推荐文章 + - [ ] [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) + - [ ] [Flexbox布局中不为人知的细节](https://juejin.cn/post/6938292463605907492) + + ## React ### 合成事件 From 5b4fe92e4c3c94ca57de6db77ee70ee05f119135 Mon Sep 17 00:00:00 2001 From: liuc Date: Wed, 15 Sep 2021 22:47:55 +0800 Subject: [PATCH 38/81] feat: Promise --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 068cbcb..838301f 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ - [事件循环](#事件循环) - [继承](#继承) - [垃圾回收](#垃圾回收) + - [Promise](#Promise) - [组件库](#组件库) - [跨端框架](#跨端框架) - [微前端](#微前端) @@ -250,6 +251,21 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) +### Promise + +Promise 是由社区最早提出和实现的异步编程的一种解决方案。 + +- [ ] 文档 + - [ ] [Promise-MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) + - [ ] [Promises/A+ 规范](https://promisesaplus.com/) +- [ ] 推荐文章 + - [ ] [Promise 你真的用明白了么？](https://juejin.cn/post/6869573288478113799) + - [ ] [45道Promise面试题](https://juejin.cn/post/6844904077537574919) + - [ ] [剖析Promise内部结构](https://github.com/xieranmaya/blog/issues/3) + - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) + - [ ] [最简实现Promise，支持异步链式调用（20行）](https://juejin.cn/post/6844904094079926286) + + ## React ### 合成事件 From 7c04104e8fa7a8e2f33d6e140730b7fed6884a6e Mon Sep 17 00:00:00 2001 From: KieSun Date: Wed, 15 Sep 2021 15:00:56 +0000 Subject: [PATCH 39/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a09cb26..a19c57b 100644 --- a/README.md +++ b/README.md @@ -251,13 +251,14 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) ## CSS + ### flex + - [ ] 文档 - [ ] [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) - [ ] 推荐文章 - [ ] [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - - [ ] [Flexbox布局中不为人知的细节](https://juejin.cn/post/6938292463605907492) - + - [ ] [Flexbox 布局中不为人知的细节](https://juejin.cn/post/6938292463605907492) ## React From 99b67645ad278b9821040e22b51ac290fde0e5aa Mon Sep 17 00:00:00 2001 From: yck Date: Wed, 15 Sep 2021 23:03:27 +0800 Subject: [PATCH 40/81] Update README.md --- README.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 838301f..3c32584 100644 --- a/README.md +++ b/README.md @@ -256,15 +256,11 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 Promise 是由社区最早提出和实现的异步编程的一种解决方案。 - [ ] 文档 - - [ ] [Promise-MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) + - [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [ ] [Promises/A+ 规范](https://promisesaplus.com/) - [ ] 推荐文章 - - [ ] [Promise 你真的用明白了么？](https://juejin.cn/post/6869573288478113799) - - [ ] [45道Promise面试题](https://juejin.cn/post/6844904077537574919) - - [ ] [剖析Promise内部结构](https://github.com/xieranmaya/blog/issues/3) - - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) - [ ] [最简实现Promise，支持异步链式调用（20行）](https://juejin.cn/post/6844904094079926286) - + - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) ## React From dedeae87aa075c55e3e132cc2490e2aeae4bff64 Mon Sep 17 00:00:00 2001 From: zhanghao Date: Wed, 15 Sep 2021 23:22:24 +0800 Subject: [PATCH 41/81] =?UTF-8?q?feat:=20=E6=9F=AF=E9=87=8C=E5=8C=96?= =?UTF-8?q?=EF=BC=88Currying=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c4dff3c..7a5cdf9 100644 --- a/README.md +++ b/README.md @@ -206,7 +206,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 节流与防抖 节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。 -防抖指在事件被触发后一定时间后再执行回调函数，如果在一定时间内，该事件又被重复触发，则重启计时。 +防抖指在事件被触发一定时间后再执行回调函数，如果在一定时间内该事件又被重复触发，则重启计时。 - [ ] 推荐文章 - [ ] [函数防抖与函数节流](https://zhuanlan.zhihu.com/p/38313717) @@ -214,6 +214,16 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example) - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript) +### 柯里化（Currying） + +柯里化是一种将使用多个参数的函数转换成使用一个参数的函数的技术，那么柯里化函数就是将一个多参数的函数转换成多个单参数的函数。 + +- [ ] 推荐文章 + - [ ] [JavaScript专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42) + - [ ] [柯里化（Currying）](https://zh.javascript.info/currying-partials) + - [ ] [Understanding Currying in JavaScript](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339)，另有 [中文翻译版](https://www.cnblogs.com/GeniusLyzh/p/9937829.html) + + ### 垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 From 3e7707fbed6f689d48b374e06b38cf5153f1fef6 Mon Sep 17 00:00:00 2001 From: zhanghao-zhoushan Date: Wed, 15 Sep 2021 15:23:12 +0000 Subject: [PATCH 42/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 7a5cdf9..7cbee35 100644 --- a/README.md +++ b/README.md @@ -219,11 +219,10 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 柯里化是一种将使用多个参数的函数转换成使用一个参数的函数的技术，那么柯里化函数就是将一个多参数的函数转换成多个单参数的函数。 - [ ] 推荐文章 - - [ ] [JavaScript专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42) + - [ ] [JavaScript 专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42) - [ ] [柯里化（Currying）](https://zh.javascript.info/currying-partials) - [ ] [Understanding Currying in JavaScript](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339)，另有 [中文翻译版](https://www.cnblogs.com/GeniusLyzh/p/9937829.html) - ### 垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 From dcc8add29fe02f9d178997910acdb94b7f86afe0 Mon Sep 17 00:00:00 2001 From: xuwu Date: Wed, 15 Sep 2021 23:36:20 +0800 Subject: [PATCH 43/81] =?UTF-8?q?docs:=20=E6=8E=92=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 88 ++++++++++++++++++++----------------------------------- 1 file changed, 32 insertions(+), 56 deletions(-) diff --git a/README.md b/README.md index a19c57b..3bf403f 100644 --- a/README.md +++ b/README.md @@ -75,16 +75,16 @@ - [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/) - [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) -## JS +### JS -### 数据类型 +#### 数据类型 JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增的 `bigint`。 - [ ] 文档： - [ ] [JavaScript 数据类型和数据结构](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) -### 类型判断 +#### 类型判断 类型判断有好几种方式，分别为： @@ -101,7 +101,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 专题之类型判断(上)](https://github.com/mqyqingfeng/Blog/issues/28) - [ ] [JavaScript 专题之类型判断(下)](https://github.com/mqyqingfeng/Blog/issues/30) -### 类型转换 +#### 类型转换 类型转换算是 JS 中情况繁杂且容易出错，但是开发中还经常会遇到的知识点。强行全部记忆容易遗忘，推荐记忆及练习开发中的常见情况。 @@ -115,7 +115,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 深入之头疼的类型转换(上)](https://github.com/mqyqingfeng/Blog/issues/159) - [ ] [JavaScript 深入之头疼的类型转换(下)](https://github.com/mqyqingfeng/Blog/issues/164) -### this +#### this `this` 算是不少初学者容易搞混的一个知识点，但是它很重要，务必掌握。 @@ -128,7 +128,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 > 务必自己总结规则！ -### 闭包 +#### 闭包 - [ ] 文档 - [ ] [闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) @@ -137,7 +137,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 的静态作用域链与“动态”闭包链](https://juejin.cn/post/6957913856488243237) - [ ] [知乎中关于闭包的讨论](https://www.zhihu.com/question/34210214) -### 作用域 +#### 作用域 作用域是指程序中定义变量的区域，该位置决定了变量的生命周期，也就是变量和函数的可访问范围。 @@ -151,7 +151,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [You Don't Know JS Yet: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures) - [ ] [The battle between function scope and block scope](https://www.deadcoderising.com/2017-04-11-es6-var-let-and-const-the-battle-between-function-scope-and-block-scope/) -### 原型 +#### 原型 - [ ] 文档 - [ ] [原型](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes) @@ -161,7 +161,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [深度解析原型中的各个难点](https://juejin.cn/post/6844903575974313992) - [ ] [Prototypes in JavaScript](https://betterprogramming.pub/prototypes-in-javascript-5bba2990e04b) 需自备梯子 -### new +#### new `new` 操作符可以帮助我们构建出一个实例，并且绑定上 `this`。 @@ -171,7 +171,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JS 的 new 到底是干什么的？](https://zhuanlan.zhihu.com/p/23987456) - [ ] [JavaScript 深入之 new 的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) -### 变量提升 +#### 变量提升 变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 @@ -182,7 +182,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) -### Class(类) +#### Class(类) `class` 只是原型链的语法糖，与其它语言中的类不是同一样东西。 @@ -195,7 +195,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [给 ES6 class 说句公道话](https://juejin.cn/post/6924108426125508616) - [ ] [应该在 JavaScript 中使用 Class 吗？](https://zhuanlan.zhihu.com/p/158956514) -### 事件循环 +#### 事件循环 大家都知道 JS 是一门单线程的非阻塞的脚本语言。这也就意味着，代码在执行的任何时候只有一个主线程来处理所有的任务。所以弄懂事件循环机制对我们学习 JS 至关重要。 @@ -208,7 +208,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] 事件循环可视化 - [ ] [Loupe](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) -### 继承 +#### 继承 继承是面向对象语言（Object-Oriented Language）三大特征之一，在 JS 中也占有非常重要的地位。而想要实现继承有多种方式，它们都有各自的优缺点。 @@ -219,7 +219,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [JavaScript 中的继承](https://medium.com/@happymishra66/inheritance-in-javascript-21d2b82ffa6f)，需自备梯子 - [ ] [JS 类继承](https://javascript.info/class-inheritance)，另有 [中文翻译版](https://zh.javascript.info/class-inheritance) -### 迭代器与生成器 +#### 迭代器与生成器 - [ ] 文档 - [ ] [迭代器与生成器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) @@ -228,7 +228,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [Understanding Generators in ES6 JavaScript with Examples](https://codeburst.io/understanding-generators-in-es6-javascript-with-examples-6728834016d5)，需自备梯子 - [ ] [A Simple Guide to ES6 Iterators in JavaScript with Examples](https://codeburst.io/a-simple-guide-to-es6-iterators-in-javascript-with-examples-189d052c3d8e)，需自备梯子 -### 节流与防抖 +#### 节流与防抖 节流指连续触发事件的情况下，在某个时间段内，函数只会执行一次。 防抖指在事件被触发后一定时间后再执行回调函数，如果在一定时间内，该事件又被重复触发，则重启计时。 @@ -239,7 +239,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [Debounce – How to Delay a Function in JavaScript](https://www.freecodecamp.org/news/javascript-debounce-example) - [ ] [Debouncing and Throttling in JavaScript](https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript) -### 垃圾回收 +#### 垃圾回收 JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动释放内存，这个过程被称为垃圾回收。另外我们主要学习 V8 引擎下的垃圾回收机制。 @@ -250,9 +250,11 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [GC in v8](https://github.com/lrlna/sketchin/blob/master/guides/garbage-collection-in-v8.md) - [ ] [JavaScript 工作原理：内存管理 + 处理常见的 4 种内存泄漏](https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec)，另有[中文版](https://juejin.cn/post/6844903519078580238) -## CSS +### HTML -### flex +### CSS + +#### Flex - [ ] 文档 - [ ] [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) @@ -274,17 +276,7 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) -## 跨端框架 - -跨端的最主要的含义就是一套代码多端运行，减少重复劳动 - -目前看来，国内比较流行的是小程序, H5, App 三端跨的框架， [uniapp](https://github.com/dcloudio/uni-app) 及 [taro](https://github.com/NervJS/taro) 是其中做的比较出彩的两个框架。当然在 taro3.0 之前（以下主要是说小程序），taro 跟 uniapp 都是使用编译时做更多的事情，编译成小程序能够运行的代码。 - -而在 taro3.0 之后变成了与 [remax](https://github.com/remaxjs/remax) 相同的思想，在运行时做更多的事情，保证了原框架代码能够完全使用，而不需要为了转换成其他小程序时做兼容。 - -- [awesome-remax](https://github.com/remaxjs/awesome-remax) -- [美团自研 react 跨端](https://tech.meituan.com/2021/06/10/react-native-hybrid-practice-dsl-in-meituan.html) -- [京东 taro](https://juejin.cn/post/6844904036743774216) +## Vue ## 组件库 @@ -339,41 +331,25 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [How We Build Micro Frontends](https://blog.bitsrc.io/how-we-build-micro-front-ends-d3eeeac0acfc) - [Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit](https://blog.bitsrc.io/revolutionizing-micro-frontends-with-webpack-5-module-federation-and-bit-99ff81ceb0) -## 十五万字面试资料 +## 跨端框架 -[在线阅读](https://yuchengkai.cn/home/) +跨端的最主要的含义就是一套代码多端运行，减少重复劳动 -- [解决 90% 的大厂基础面试题](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488553&idx=1&sn=62d8a99b5554751221b45b3c411ad325) -- [解决 90% 的大厂前端网络面试题](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488796&idx=1&sn=dec4fdb3e596ad87b02419f69c174113) +目前看来，国内比较流行的是小程序, H5, App 三端跨的框架， [uniapp](https://github.com/dcloudio/uni-app) 及 [taro](https://github.com/NervJS/taro) 是其中做的比较出彩的两个框架。当然在 taro3.0 之前（以下主要是说小程序），taro 跟 uniapp 都是使用编译时做更多的事情，编译成小程序能够运行的代码。 -## 前端工程化文章 +而在 taro3.0 之后变成了与 [remax](https://github.com/remaxjs/remax) 相同的思想，在运行时做更多的事情，保证了原框架代码能够完全使用，而不需要为了转换成其他小程序时做兼容。 -- [这才是你需要了解的性能优化呀！](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247489161&idx=1&sn=f029ea01370364f49fe61451b2d247ff) -- [绝了，没想到一个 source map 居然涉及到那么多知识盲区](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488867&idx=1&sn=cac0ae95c560cca820658a8c3af3f8e5) -- [揭秘自动化部署系统的核心原理](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488166&idx=1&sn=f62669f6c9331c95badbef2815a8d1b5) -- [你知道 monorepo 居然有那么多坑么？](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488604&idx=1&sn=6ded0f2ddaedb71bd5d12890cf462726) -- [从零打造性能检测库](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247487811&idx=2&sn=40d02e839fb5400c5b82858d422fb738) -- [还在看那些老掉牙的性能优化文章么？这些最新性能指标了解下](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247486142&idx=1&sn=b75b87a109c28cc6c32046d0fb234aab) +- [awesome-remax](https://github.com/remaxjs/awesome-remax) +- [美团自研 react 跨端](https://tech.meituan.com/2021/06/10/react-native-hybrid-practice-dsl-in-meituan.html) +- [京东 taro](https://juejin.cn/post/6844904036743774216) -## React 原理 +## 面试 -[在线阅读](https://github.com/KieSun/react-interpretation)，另外笔者最近也在准备更新这部分内容，有兴趣的读者可以持续关注。 +## 日常充电 -## 前端进阶文章 +## Github 优秀学习资料 -- [这些 JS 新语法有点东西啊！](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247489249&idx=1&sn=9a3cedafd021afe8ed3ef81bcd0583c2) -- [这个 React 小细节居然很多人都写错了？](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247489054&idx=1&sn=f025d5dfd81656e5cffd7eb598b0954b) -- [反直觉！大部分人并不知道浏览器到底是如何下载资源的](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488074&idx=1&sn=21dc9b18cf52d875dec5dc38b34900fe) -- [好家伙，这些写 CSS 的新姿势你还不知道？](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488007&idx=1&sn=8578ba4a4278de3286feeb18535c75a2) -- [这个异步问题你肯定遇到过，但是会解决的并不多](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247487988&idx=1&sn=6b56888236e0cc8b59e7bf63ff882a21) -- [前端前沿观察，Cookie 居然可以这样整了](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247486890&idx=1&sn=3f92d1290e62549731b9d840aed68cc9) -- [Promise 你可能真的还没用明白（续集进阶版）](https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247486584&idx=1&sn=26c5d27b34cc98f952715581b8c74027) - -## 更多文章 - -因为笔者文章实在太多，足足已经写了 150 篇+ 原创，更多文章欢迎大家到【[公众号](#个人信息)】里阅读。 - -## 个人信息 +## 作者信息 | 微信扫码关注公众号，订阅更多精彩内容 | 加笔者微信进群与大厂大佬讨论技术 | | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | From 285e5363ecc99222dfc2fe28d3bf37d741b73ea6 Mon Sep 17 00:00:00 2001 From: xuwu Date: Wed, 15 Sep 2021 23:49:31 +0800 Subject: [PATCH 44/81] feat: toc --- README.md | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 3bf403f..3279c9e 100644 --- a/README.md +++ b/README.md @@ -28,12 +28,8 @@ ## 目录 -- [Fucking Frontend](#fucking-frontend) - - [这是什么？](#这是什么) - - [如何使用](#如何使用) - - [目录](#目录) - - [学习路径](#学习路径) - - [前端核心知识点](#前端核心知识点) +- [前端核心学习路径](#前端核心学习路径) + - [前端核心三板斧](#前端核心三板斧) - [JS](#js) - [数据类型](#数据类型) - [类型判断](#类型判断) @@ -47,18 +43,24 @@ - [Class(类)](#class类) - [事件循环](#事件循环) - [继承](#继承) + - [迭代器与生成器](#迭代器与生成器) + - [节流与防抖](#节流与防抖) - [垃圾回收](#垃圾回收) - - [组件库](#组件库) - - [跨端框架](#跨端框架) - - [微前端](#微前端) - - [十五万字面试资料](#十五万字面试资料) - - [前端工程化文章](#前端工程化文章) - - [React 原理](#react-原理) - - [前端进阶文章](#前端进阶文章) - - [更多文章](#更多文章) - - [个人信息](#个人信息) + - [HTML](#html) + - [CSS](#css) + - [Flex](#flex) +- [React](#react) + - [合成事件](#合成事件) +- [Vue](#vue) +- [组件库](#组件库) +- [微前端](#微前端) +- [跨端框架](#跨端框架) +- [面试](#面试) +- [日常充电](#日常充电) +- [Github 优秀学习资料](#github-优秀学习资料) +- [作者信息](#作者信息) -## 学习路径 +## 前端核心学习路径 前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行选择学习内容。 @@ -66,9 +68,9 @@ > 为了保证大家学到的知识是正确的，下文中的文档资料笔者都使用了英文版本。因为在审核资料的过程中笔者发现不少中文文档都存在翻译错误或者过时的情况。 -## 前端核心知识点 +### 前端核心三板斧 -前端核心知识点分为三块，分别为 HTML、CSS、JS，其中最重要的当然是 JS 了。 +前端核心三板斧分为三块，分别为 HTML、CSS、JS，其中最重要的当然是 JS 了。 如果你还是一位初学者，推荐先自行完整阅读一至二本书后再按照该计划学习。关于书籍笔者推荐以下两本： From 43f0d812b9a84e28a980c1d45e6dd8a45c1eebc1 Mon Sep 17 00:00:00 2001 From: rookielzy Date: Thu, 16 Sep 2021 10:00:50 +0800 Subject: [PATCH 45/81] feat: CSS Grid --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index 3279c9e..351d4d2 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ - [HTML](#html) - [CSS](#css) - [Flex](#flex) + - [Grid](#grid) - [React](#react) - [合成事件](#合成事件) - [Vue](#vue) @@ -264,6 +265,14 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [ ] [Flexbox 布局中不为人知的细节](https://juejin.cn/post/6938292463605907492) +#### grid + +- [ ] 文档 + - [ ] [grid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid) +- [ ] 推荐文档 + - [ ] [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) + - [ ] [最强大的 CSS 布局 —— Grid 布局](https://juejin.cn/post/6854573220306255880) + ## React ### 合成事件 From 3b7977f98ab0687c7b2ea2504c23fce721af7f71 Mon Sep 17 00:00:00 2001 From: liuc Date: Thu, 16 Sep 2021 10:20:21 +0800 Subject: [PATCH 46/81] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=20Promise=20?= =?UTF-8?q?=E6=8E=A8=E8=8D=90=E6=96=87=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 3c32584..d8bef68 100644 --- a/README.md +++ b/README.md @@ -259,6 +259,9 @@ Promise 是由社区最早提出和实现的异步编程的一种解决方案。 - [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [ ] [Promises/A+ 规范](https://promisesaplus.com/) - [ ] 推荐文章 + - [ ] [深入浅出Promises](https://medium.com/@keshidong.dev/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BApromise-69bcafbe4496) + - [ ] [The JavaScript Promise Tutorial](https://adrianmejia.com/promises-tutorial-concurrency-in-javascript-node/)，另有[译文](https://cloud.tencent.com/developer/article/1696283?from=article.detail.1825559) + - [ ] [Promise 中的三兄弟 .all(), .race(), .allSettled()](https://segmentfault.com/a/1190000020034361) - [ ] [最简实现Promise，支持异步链式调用（20行）](https://juejin.cn/post/6844904094079926286) - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) From e8a37351466b35fdcf412948a3995917bdd2cbc1 Mon Sep 17 00:00:00 2001 From: yck Date: Thu, 16 Sep 2021 10:44:53 +0800 Subject: [PATCH 47/81] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 7cbee35..251f5a6 100644 --- a/README.md +++ b/README.md @@ -216,12 +216,12 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 柯里化（Currying） -柯里化是一种将使用多个参数的函数转换成使用一个参数的函数的技术，那么柯里化函数就是将一个多参数的函数转换成多个单参数的函数。 +柯里化就是将接收多个参数的函数转换成接收一个参数的函数。 - [ ] 推荐文章 - - [ ] [JavaScript 专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42) - [ ] [柯里化（Currying）](https://zh.javascript.info/currying-partials) - - [ ] [Understanding Currying in JavaScript](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339)，另有 [中文翻译版](https://www.cnblogs.com/GeniusLyzh/p/9937829.html) + - [ ] [JavaScript 专题之函数柯里化](https://github.com/mqyqingfeng/Blog/issues/42) + - [ ] [Understanding Currying in JavaScript](https://blog.bitsrc.io/understanding-currying-in-javascript-ceb2188c339)，需自备梯子，另有 [中文翻译版](https://www.cnblogs.com/GeniusLyzh/p/9937829.html) ### 垃圾回收 From c84b4ba2e3dfe3edfb4800b8085f6ce13ca3be22 Mon Sep 17 00:00:00 2001 From: yhy <1281491236@qq.com> Date: Thu, 16 Sep 2021 14:08:42 +0800 Subject: [PATCH 48/81] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20=20react=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9F=BA=E7=A1=80=E7=9F=A5=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index b30ba83..414d0ed 100644 --- a/README.md +++ b/README.md @@ -296,6 +296,15 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) +### 组件 +组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思 + +- [ ] 文档 + - [ ] [React 官方文档](https://zh-hans.reactjs.org/docs/components-and-props.html) +- [ ] 推荐文章 + - [ ] [寫 React Components 該注意的6個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) + - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) + - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) ## Vue ## 组件库 From db0823221c922d5d3e1814383032bd050fd7512f Mon Sep 17 00:00:00 2001 From: yhy <1281491236@qq.com> Date: Thu, 16 Sep 2021 14:41:44 +0800 Subject: [PATCH 49/81] =?UTF-8?q?feat:=20=E6=9B=B4=E6=94=B9=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E8=A1=A8=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 414d0ed..aee0c84 100644 --- a/README.md +++ b/README.md @@ -296,12 +296,13 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [What’s the Difference Between Synthetic React Events and JavaScript Events?](https://betterprogramming.pub/whats-the-difference-between-synthetic-react-events-and-javascript-events-ba7dbc742294)，需自备梯子 - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) -### 组件 -组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思 +### 如何编写一个组件 +组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达。创建一个组件通常使用 Class 和函数式 Functional两种方式，两者创建的组件在用法和生命周期上有一定的区别，但是可以互相引用。 - [ ] 文档 - - [ ] [React 官方文档](https://zh-hans.reactjs.org/docs/components-and-props.html) + - [ ] [React 官方文档](https://reactjs.org/docs/components-and-props.html) - [ ] 推荐文章 + - [ ] [[译]React函数组件和类组件的差异](https://jishuin.proginn.com/p/763bfbd4cad4) - [ ] [寫 React Components 該注意的6個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) From 573be50e4a7f4165e88a62d36a61ef914427038a Mon Sep 17 00:00:00 2001 From: yck Date: Thu, 16 Sep 2021 14:53:41 +0800 Subject: [PATCH 50/81] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aee0c84..0b0434b 100644 --- a/README.md +++ b/README.md @@ -297,7 +297,6 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [React 17 removes event pooling in the modern browsers](https://blog.saeloun.com/2021/04/06/react-17-removes-event-pooling-in-modern-system.html) ### 如何编写一个组件 -组件是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达。创建一个组件通常使用 Class 和函数式 Functional两种方式，两者创建的组件在用法和生命周期上有一定的区别，但是可以互相引用。 - [ ] 文档 - [ ] [React 官方文档](https://reactjs.org/docs/components-and-props.html) @@ -306,6 +305,7 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [寫 React Components 該注意的6個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) + ## Vue ## 组件库 From 67b912142a0c5750f21b2dd836f091a22ce31a4a Mon Sep 17 00:00:00 2001 From: KieSun Date: Thu, 16 Sep 2021 06:54:10 +0000 Subject: [PATCH 51/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0b0434b..d4550ec 100644 --- a/README.md +++ b/README.md @@ -301,8 +301,8 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] 文档 - [ ] [React 官方文档](https://reactjs.org/docs/components-and-props.html) - [ ] 推荐文章 - - [ ] [[译]React函数组件和类组件的差异](https://jishuin.proginn.com/p/763bfbd4cad4) - - [ ] [寫 React Components 該注意的6個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) + - [ ] [[译]React 函数组件和类组件的差异](https://jishuin.proginn.com/p/763bfbd4cad4) + - [ ] [寫 React Components 該注意的 6 個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) From 912517b062298c30b232cf6fc64892a2c91eab7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Thu, 16 Sep 2021 21:03:35 +0800 Subject: [PATCH 52/81] =?UTF-8?q?CSS=E7=9B=92=E5=AD=90=E6=A8=A1=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/README.md b/README.md index 57cb80a..fcf86bc 100644 --- a/README.md +++ b/README.md @@ -142,6 +142,29 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 ### 变量提升 +变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 + +- [ ] 文档 + - [ ] [JS 变量提升](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) +- [ ] 推荐文章 + - [ ] [JavsScript 变量提升和函数提升](https://towind.fun/2021/05/10/js-hoisting/) + - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/) + - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) + +### CSS盒子模型 + +在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。 + +- [ ] 文档 + - [ ] [HTML盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) +- [ ] 推荐文章 + - [ ] [CSS盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341) + - [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/) + - [ ] [CSS盒模型详解（图文教程）](https://www.cnblogs.com/qianguyihao/p/7256371.html) + + + + 变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 - [ ] 文档 From 1975295593998568268b7f418fee8692699d5452 Mon Sep 17 00:00:00 2001 From: rudy-lc Date: Thu, 16 Sep 2021 13:13:11 +0000 Subject: [PATCH 53/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index fcf86bc..05fce6b 100644 --- a/README.md +++ b/README.md @@ -151,19 +151,16 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) -### CSS盒子模型 +### CSS 盒子模型 -在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。 +在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。 - [ ] 文档 - - [ ] [HTML盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) + - [ ] [HTML 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - [ ] 推荐文章 - - [ ] [CSS盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341) + - [ ] [CSS 盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341) - [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/) - - [ ] [CSS盒模型详解（图文教程）](https://www.cnblogs.com/qianguyihao/p/7256371.html) - - - + - [ ] [CSS 盒模型详解（图文教程）](https://www.cnblogs.com/qianguyihao/p/7256371.html) 变量提升（Hoisting）可以将变量和函数在编译阶段放入内存，从而在执行阶段时在声明前使用。 From 85d559523287e825852629f34664f8c1545c1323 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Thu, 16 Sep 2021 22:20:04 +0800 Subject: [PATCH 54/81] =?UTF-8?q?CSS=E7=9B=92=E5=AD=90=E6=A8=A1=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d7f13fd..6fd0ef8 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。 - [ ] 文档 - - [ ] [HTML 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) + - [ ] [CSS 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - [ ] 推荐文章 - [ ] [CSS 盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341) - [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/) From 67b0a178e647befceb561478fcafc9eb7259de60 Mon Sep 17 00:00:00 2001 From: yck Date: Thu, 16 Sep 2021 22:44:29 +0800 Subject: [PATCH 55/81] Update README.md --- README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 6fd0ef8..6a0e3de 100644 --- a/README.md +++ b/README.md @@ -185,17 +185,6 @@ JS 数据类型分为两大类及八种数据类型，注意别漏了 ES6 新增 - [ ] [我用了两个月的时间才理解 let](https://fangyinghang.com/let-in-js/) - [ ] [JavaScript Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) -#### CSS 盒子模型 - -在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。 - -- [ ] 文档 - - [ ] [CSS 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) -- [ ] 推荐文章 - - [ ] [CSS 盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341) - - [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/) - - [ ] [CSS 盒模型详解（图文教程）](https://www.cnblogs.com/qianguyihao/p/7256371.html) - #### Class(类) `class` 只是原型链的语法糖，与其它语言中的类不是同一样东西。 @@ -277,6 +266,17 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 ### CSS +#### CSS 盒子模型 + +在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。 + +- [ ] 文档 + - [ ] [CSS 盒子模型](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) +- [ ] 推荐文章 + - [ ] [CSS 盒模型之内边距、边框、外边距 十九问](https://juejin.cn/post/6880111680153059341) + - [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/) + - [ ] [CSS 盒模型详解（图文教程）](https://www.cnblogs.com/qianguyihao/p/7256371.html) + #### Flex - [ ] 文档 From 05fd465177278693d088dac80fb5d5e52d254246 Mon Sep 17 00:00:00 2001 From: liuc Date: Thu, 16 Sep 2021 23:53:18 +0800 Subject: [PATCH 56/81] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20Promise=20?= =?UTF-8?q?=E6=8E=A8=E8=8D=90=E6=96=87=E7=AB=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d8bef68..5aa39b7 100644 --- a/README.md +++ b/README.md @@ -259,9 +259,9 @@ Promise 是由社区最早提出和实现的异步编程的一种解决方案。 - [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [ ] [Promises/A+ 规范](https://promisesaplus.com/) - [ ] 推荐文章 - - [ ] [深入浅出Promises](https://medium.com/@keshidong.dev/%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BApromise-69bcafbe4496) - - [ ] [The JavaScript Promise Tutorial](https://adrianmejia.com/promises-tutorial-concurrency-in-javascript-node/)，另有[译文](https://cloud.tencent.com/developer/article/1696283?from=article.detail.1825559) - - [ ] [Promise 中的三兄弟 .all(), .race(), .allSettled()](https://segmentfault.com/a/1190000020034361) + - [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81)，需自备梯子 + - [ ] [ES6 Promise](https://zhuanlan.zhihu.com/p/23907711) + - [ ] [promise-fun](https://github.com/sindresorhus/promise-fun) - [ ] [最简实现Promise，支持异步链式调用（20行）](https://juejin.cn/post/6844904094079926286) - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) From 25dcbae53abd063328217a80c1d8337b146367d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= Date: Fri, 17 Sep 2021 07:15:29 +0800 Subject: [PATCH 57/81] =?UTF-8?q?CSS=E9=80=89=E6=8B=A9=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 6a0e3de..08dce04 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ - [CSS](#css) - [Flex](#flex) - [Grid](#grid) + - [CSS 盒子模型](#CSS-盒子模型) + - [CSS 选择器](#CSS-选择器) - [React](#react) - [合成事件](#合成事件) - [Vue](#vue) @@ -277,6 +279,18 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 - [ ] [CSS Box Model](https://www.w3.org/TR/css-box-3/) - [ ] [CSS 盒模型详解（图文教程）](https://www.cnblogs.com/qianguyihao/p/7256371.html) +#### CSS 选择器 + +CSS中，选择器用来指定网页上我们想要样式化的HTML元素。CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。 + +CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。 + +- [ ] 文档 + - [ ] [CSS选择器](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) +- [ ] 推荐文章 + - [ ] [30个你必须熟记的CSS选择器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048) + - [ ] [深入解析CSS样式优先级](https://cloud.tencent.com/developer/article/1545341) + #### Flex - [ ] 文档 From 1e994d75fb5792c578613d6e75faf85338eb0b92 Mon Sep 17 00:00:00 2001 From: rudy-lc Date: Thu, 16 Sep 2021 23:15:55 +0000 Subject: [PATCH 58/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 08dce04..f8aeeee 100644 --- a/README.md +++ b/README.md @@ -281,15 +281,15 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 #### CSS 选择器 -CSS中，选择器用来指定网页上我们想要样式化的HTML元素。CSS选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。 +CSS 中，选择器用来指定网页上我们想要样式化的 HTML 元素。CSS 选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。 -CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。 +CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。 - [ ] 文档 - - [ ] [CSS选择器](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) + - [ ] [CSS 选择器](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) - [ ] 推荐文章 - - [ ] [30个你必须熟记的CSS选择器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048) - - [ ] [深入解析CSS样式优先级](https://cloud.tencent.com/developer/article/1545341) + - [ ] [30 个你必须熟记的 CSS 选择器](https://code.tutsplus.com/zh-hans/tutorials/the-30-css-selectors-you-must-memorize--net-16048) + - [ ] [深入解析 CSS 样式优先级](https://cloud.tencent.com/developer/article/1545341) #### Flex From 426b84b76ac2f13cf5be601bbc99458166bb3f06 Mon Sep 17 00:00:00 2001 From: yck Date: Fri, 17 Sep 2021 08:11:58 +0800 Subject: [PATCH 59/81] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5aa39b7..45b4605 100644 --- a/README.md +++ b/README.md @@ -260,10 +260,10 @@ Promise 是由社区最早提出和实现的异步编程的一种解决方案。 - [ ] [Promises/A+ 规范](https://promisesaplus.com/) - [ ] 推荐文章 - [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81)，需自备梯子 - - [ ] [ES6 Promise](https://zhuanlan.zhihu.com/p/23907711) - - [ ] [promise-fun](https://github.com/sindresorhus/promise-fun) - [ ] [最简实现Promise，支持异步链式调用（20行）](https://juejin.cn/post/6844904094079926286) - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) +- [ ] Github + - [ ] [promise-fun](https://github.com/sindresorhus/promise-fun) ## React From 05706ce96db1cb13db6924e717542eb0b1519211 Mon Sep 17 00:00:00 2001 From: KieSun Date: Fri, 17 Sep 2021 00:13:47 +0000 Subject: [PATCH 60/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 5b7ce9e..b7a3e7f 100644 --- a/README.md +++ b/README.md @@ -273,12 +273,12 @@ Promise 是由社区最早提出和实现的异步编程的一种解决方案。 - [ ] [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [ ] [Promises/A+ 规范](https://promisesaplus.com/) - [ ] 推荐文章 - - [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81)，需自备梯子 - - [ ] [最简实现Promise，支持异步链式调用（20行）](https://juejin.cn/post/6844904094079926286) - - [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) +- [Callbacks Vs Promises and basics of JS](https://theflyingmantis.medium.com/callbacks-vs-promises-and-basics-of-js-80d3d1515e81)，需自备梯子 +- [ ] [最简实现 Promise，支持异步链式调用（20 行）](https://juejin.cn/post/6844904094079926286) +- [ ] [100 行代码实现 Promises/A+ 规范](https://mp.weixin.qq.com/s/qdJ0Xd8zTgtetFdlJL3P1g) - [ ] Github - - [ ] [promise-fun](https://github.com/sindresorhus/promise-fun) - +- [ ] [promise-fun](https://github.com/sindresorhus/promise-fun) + ### HTML ### CSS From 9edffd800a875285d7a85d49f9759f65d3031ca6 Mon Sep 17 00:00:00 2001 From: ahwgs Date: Fri, 17 Sep 2021 09:44:36 +0800 Subject: [PATCH 61/81] feat: add electron --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index b30ba83..a158590 100644 --- a/README.md +++ b/README.md @@ -298,6 +298,28 @@ JavaScrip 在变量被创建时分配内存，并在对象不再使用时自动 ## Vue +## Electron + +Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。 + +文档 + +- [Electron 官网](https://www.electronjs.org/) +- [Electron 中文教程](https://weishuai.gitbooks.io/electron-/content/) + +推荐文章 + +- [分享这半年的 Electron 应用开发和优化经验](https://juejin.cn/post/6844904029231775758) +- [用 JS 开发跨平台桌面应用，从原理到实践](https://juejin.cn/post/6844903862302670862) +- [Building a desktop application with Electron](https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658) 需翻墙访问 + +推荐开源项目 + +- [Electron 资源](https://github.com/sindresorhus/awesome-electron) +- [Electron Playground](https://github.com/tal-tech/electron-playground) +- [electron-vue-cloud-music](https://github.com/xiaozhu188/electron-vue-cloud-music) +- [electron-builder](https://github.com/electron-userland/electron-builder) + ## 组件库 组件库顾名思义指的就是将多个公共模块或者可复用的组件提取整合生成的一个仓库 From 89ee6b95a6ea280ba4ded13ea7663fcbc4412870 Mon Sep 17 00:00:00 2001 From: yhy <18771350464@163.com> Date: Fri, 17 Sep 2021 15:41:19 +0800 Subject: [PATCH 62/81] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8F=97?= =?UTF-8?q?=E6=8E=A7=E5=92=8C=E9=9D=9E=E5=8F=97=E6=8E=A7=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index bea95ee..0e41e34 100644 --- a/README.md +++ b/README.md @@ -345,7 +345,15 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 - [ ] [寫 React Components 該注意的 6 個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) +### 受控组件和非受控组件 +* 受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新 +* 非受控组件：是一个存储其自己的内部状态，并且您使用查询DOM ref，当你需要它来找到它的当前值，这有点像传统的HTML +- [ ] 文档 + - [ ] [React 官方文档](https://reactjs.org/docs/uncontrolled-components.html) +- [ ] 推荐文章 + - [ ] [受控和非受控组件真的那么难理解吗](https://juejin.cn/post/6858276396968951822) + - [ ] [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/controlled-components-and-uncontrolled-components/) ## Vue ## Electron From e743871da8dff3e90229f68e2671c8ac77870210 Mon Sep 17 00:00:00 2001 From: yhy <18771350464@163.com> Date: Fri, 17 Sep 2021 15:54:26 +0800 Subject: [PATCH 63/81] =?UTF-8?q?test:=20=E6=B5=8B=E8=AF=95=E5=90=88?= =?UTF-8?q?=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0e41e34..5ca79c8 100644 --- a/README.md +++ b/README.md @@ -346,7 +346,7 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) ### 受控组件和非受控组件 -* 受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新 +* 受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新 * 非受控组件：是一个存储其自己的内部状态，并且您使用查询DOM ref，当你需要它来找到它的当前值，这有点像传统的HTML - [ ] 文档 From 3bece915dc6e6cc621943823f203974a5e971b8c Mon Sep 17 00:00:00 2001 From: KieSun Date: Fri, 17 Sep 2021 08:00:18 +0000 Subject: [PATCH 64/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 5ca79c8..fd34704 100644 --- a/README.md +++ b/README.md @@ -345,15 +345,18 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 - [ ] [寫 React Components 該注意的 6 個地方與技巧](https://medium.com/@chihsuan/%E5%AF%AB-react-components-%E8%A9%B2%E6%B3%A8%E6%84%8F%E7%9A%846%E5%80%8B%E5%9C%B0%E6%96%B9%E8%88%87%E6%8A%80%E5%B7%A7-faa2bb87a18e) - [ ] [编写高效且可读组件的 5 个最佳实践](https://www.infoq.cn/article/ry4icky5crb1pokvi0ql) - [ ] [designing-react-components-best-practices](https://www.thisdot.co/blog/designing-react-components-best-practices) -### 受控组件和非受控组件 -* 受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新 -* 非受控组件：是一个存储其自己的内部状态，并且您使用查询DOM ref，当你需要它来找到它的当前值，这有点像传统的HTML -- [ ] 文档 +### 受控组件和非受控组件 + +- 受控组件：在 HTML 中，表单元素（如 input、 textarea 和 select ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 或者 props 来更新 +- 非受控组件：是一个存储其自己的内部状态，并且您使用查询 DOM ref，当你需要它来找到它的当前值，这有点像传统的 HTML + +* [ ] 文档 - [ ] [React 官方文档](https://reactjs.org/docs/uncontrolled-components.html) -- [ ] 推荐文章 +* [ ] 推荐文章 - [ ] [受控和非受控组件真的那么难理解吗](https://juejin.cn/post/6858276396968951822) - [ ] [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/controlled-components-and-uncontrolled-components/) + ## Vue ## Electron From e246e4b9cd673d33565f15e8d4904a9fd7db9aa2 Mon Sep 17 00:00:00 2001 From: rookielzy Date: Fri, 17 Sep 2021 16:58:12 +0800 Subject: [PATCH 65/81] =?UTF-8?q?feat:=20=E6=80=A7=E8=83=BD=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index fd34704..5d04028 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,7 @@ - [合成事件](#合成事件) - [Vue](#vue) - [组件库](#组件库) +- [性能优化](#性能优化) - [微前端](#微前端) - [跨端框架](#跨端框架) - [面试](#面试) @@ -404,6 +405,19 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 - [基于 lerna 和 yarn workspace 的 monorepo 工作流](https://zhuanlan.zhihu.com/p/71385053) - [FusionNext 可配置能力从 Sass 体系升级为支持 Css Variable](https://zhuanlan.zhihu.com/p/257159028) +## 性能优化 + +性能优化与用户体验密切相关，是前端进阶中必不可少的一部分。 + +推荐文章: + +- [前端性能优化之旅](https://github.com/alienzhou/fe-performance-journey) +- [前端性能优化 24 条建议（2020）](https://juejin.cn/post/6892994632968306702) +- [Web Vitals](https://web.dev/learn-web-vitals/) +- [Metrics](https://web.dev/metrics/) +- [Fast load times](https://web.dev/fast/) +- [Front-End Performance Checklist 2021](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/) + ## 微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 From 5bc8280ed48c595a229ce4590f9e053f62042196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=AF=A1?= <1849613717@qq.com> Date: Fri, 17 Sep 2021 17:22:10 +0800 Subject: [PATCH 66/81] =?UTF-8?q?HTML=20=E8=AF=AD=E4=B9=89=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index fd34704..ac3fe4d 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ - [垃圾回收](#垃圾回收) - [Promise](#Promise) - [HTML](#html) + - [HTML 语义化](#HTML-语义化) - [CSS](#css) - [Flex](#flex) - [Grid](#grid) @@ -281,6 +282,16 @@ Promise 是由社区最早提出和实现的异步编程的一种解决方案。 ### HTML +#### HTML 语义化 + +html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。在没有引入样式 CCS 样式的时候也能以一种可以分辨出来大致表示内容的文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 + +- [ ] 文档 + - [ ] [HTML 中的语义](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html) +- [ ] 推荐文章 + - [ ] [IFE-NOTE：页面结构语义化](https://rainylog.com/post/ife-note-1/) + - [ ] [关于 HTML 语义和前端架构](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) + ### CSS #### CSS 盒子模型 From b35f6c271fb2527182b0448eb62d48f73fe9dcdd Mon Sep 17 00:00:00 2001 From: yck Date: Fri, 17 Sep 2021 18:00:55 +0800 Subject: [PATCH 67/81] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 3530e38..04b38e6 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ **此资料适用于初中级进阶、高级查漏补缺。** +**内容每天都在更新，大家可以持续关注。** + ## 如何使用 前端学习路径笔者会以计划的方式呈现，从基础到进阶内容都会涉及，并且会附带上笔者的一些解释以便读者们将知识连贯起来，从而建立自己的知识体系而不是单独记忆松散的知识点。 From c3db12d3df44caead0d33898f57e9105a8fdb235 Mon Sep 17 00:00:00 2001 From: rookielzy Date: Fri, 17 Sep 2021 21:00:10 +0800 Subject: [PATCH 68/81] feat: TypeScript --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index 04b38e6..a5b7bc8 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,7 @@ - [React](#react) - [合成事件](#合成事件) - [Vue](#vue) +- [TypeScript](#TypeScript) - [组件库](#组件库) - [性能优化](#性能优化) - [微前端](#微前端) @@ -373,6 +374,24 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 ## Vue +## TypeScript + +TypeScript 是为开发大型应用而设计的，并且 TypeScript 可转译成 JavaScript。由于 TypeScript 是 JavaScript 的严格超集，任何现有的 JavaScript 程序都是合法的 TypeScript 程序。 + +文档 + +- [TypeScript 官方文档](https://www.typescriptlang.org/docs/) + +推荐文章 + +- [TypeScript 入门教程](https://ts.xcatliu.com/) +- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/) 另有[中文版](https://jkchao.github.io/typescript-book-chinese/) + +推荐开源项目 + +- [type-challenges](https://github.com/type-challenges/type-challenges) +- [TypeScript exercises](https://github.com/typescript-exercises/typescript-exercises) + ## Electron Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。 From f96731e764e3e3eb9091d1ac82e73978125d696e Mon Sep 17 00:00:00 2001 From: xuwu Date: Fri, 17 Sep 2021 21:48:57 +0800 Subject: [PATCH 69/81] =?UTF-8?q?feat:=20=E4=B9=A6=E7=B1=8D=E6=8E=A8?= =?UTF-8?q?=E8=8D=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 04b38e6..da2788a 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,25 @@ - [Github 优秀学习资料](#github-优秀学习资料) - [作者信息](#作者信息) +## 书籍推荐 + +### 初级 + +- [JavaScript高级程序设计（第4版）](https://book.douban.com/subject/35175321/) + +### 进阶 + +- [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) +- [你不知道的 JS 三卷](https://book.douban.com/subject/26351021/)，该书英文版是开源的，并且作者已经在写第二版，有能力阅读英文的读者推荐直接看 [原著](https://github.com/getify/You-Dont-Know-JS) +- [CSS揭秘](https://book.douban.com/subject/26745943/) + +### 高级 + +- [JavaScript 悟道](https://book.douban.com/subject/35469273/) +- [JavaScript语言精髓与编程实践（第3版）](https://book.douban.com/subject/35085910/) + +以上书籍主要还是推荐了 JS 方面的，其它比如说框架、TS 等等技术会在各自章节为大家介绍。 + ## 前端核心学习路径 前端知识点很多这是公认的事情，但是我们确实没必要把所有知识都去学习，那样只会贪多嚼不烂。我们能把核心知识点、热门技术以及工作中需要用到的知识学好就已经能打败大部分前端工程师了，剩下的大家可以自行选择学习内容。 @@ -85,6 +104,8 @@ - [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/) - [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) +![Z0qdJz](https://yck-1254263422.file.myqcloud.com/uPic/Z0qdJz.png) + ### JS #### 数据类型 From 34819c461306055d0880d924267022e05119db66 Mon Sep 17 00:00:00 2001 From: KieSun Date: Fri, 17 Sep 2021 13:49:28 +0000 Subject: [PATCH 70/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index da2788a..19a3126 100644 --- a/README.md +++ b/README.md @@ -72,18 +72,18 @@ ### 初级 -- [JavaScript高级程序设计（第4版）](https://book.douban.com/subject/35175321/) +- [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/) ### 进阶 - [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) - [你不知道的 JS 三卷](https://book.douban.com/subject/26351021/)，该书英文版是开源的，并且作者已经在写第二版，有能力阅读英文的读者推荐直接看 [原著](https://github.com/getify/You-Dont-Know-JS) -- [CSS揭秘](https://book.douban.com/subject/26745943/) +- [CSS 揭秘](https://book.douban.com/subject/26745943/) ### 高级 - [JavaScript 悟道](https://book.douban.com/subject/35469273/) -- [JavaScript语言精髓与编程实践（第3版）](https://book.douban.com/subject/35085910/) +- [JavaScript 语言精髓与编程实践（第 3 版）](https://book.douban.com/subject/35085910/) 以上书籍主要还是推荐了 JS 方面的，其它比如说框架、TS 等等技术会在各自章节为大家介绍。 From c151cdd11732427e98627352c94f2c662518ff52 Mon Sep 17 00:00:00 2001 From: xuwu Date: Fri, 17 Sep 2021 22:14:21 +0800 Subject: [PATCH 71/81] =?UTF-8?q?feat:=20=E5=A6=82=E4=BD=95=E9=AB=98?= =?UTF-8?q?=E6=95=88=E8=87=AA=E5=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f6079f0..b512f67 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,12 @@ - [Github 优秀学习资料](#github-优秀学习资料) - [作者信息](#作者信息) +## 如何高效自学 + +![Z0qdJz](https://yck-1254263422.file.myqcloud.com/uPic/Z0qdJz.png) + +这个学习方法笔者百试百灵，学习任何技术都会用上这个思路，并且不容易遗忘。 + ## 书籍推荐 ### 初级 @@ -105,8 +111,6 @@ - [JavaScript 高级程序设计（第 4 版）](https://book.douban.com/subject/35175321/) - [JavaScript 忍者秘籍（第 2 版）](https://book.douban.com/subject/30143702/) -![Z0qdJz](https://yck-1254263422.file.myqcloud.com/uPic/Z0qdJz.png) - ### JS #### 数据类型 From c170ea9e8f9d1d6745ef7d96a9e8bf5414fffc60 Mon Sep 17 00:00:00 2001 From: xuwu Date: Fri, 17 Sep 2021 22:21:36 +0800 Subject: [PATCH 72/81] =?UTF-8?q?feat:=20=E5=A6=82=E4=BD=95=E9=AB=98?= =?UTF-8?q?=E6=95=88=E8=87=AA=E5=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b512f67..e4790c7 100644 --- a/README.md +++ b/README.md @@ -73,7 +73,7 @@ ![Z0qdJz](https://yck-1254263422.file.myqcloud.com/uPic/Z0qdJz.png) -这个学习方法笔者百试百灵，学习任何技术都会用上这个思路，并且不容易遗忘。 +这个学习方法笔者百试百灵，学习任何技术都会用上这个思路。另外我们还能通过这个思路拓宽自己的技术栈，将各个知识联系起来建立自己的知识体系，并且通过这种学习方式学到的知识也不容易遗忘。 ## 书籍推荐 From aab71afdac1841f5353bc9367702a18b7f197c24 Mon Sep 17 00:00:00 2001 From: yck Date: Sat, 18 Sep 2021 09:54:26 +0800 Subject: [PATCH 73/81] Update README.md --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index e4790c7..3c930cc 100644 --- a/README.md +++ b/README.md @@ -523,6 +523,12 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 ## Github 优秀学习资料 +## 生产力工具 + +### 流程图 + +- [whimsical](https://whimsical.com/) + ## 作者信息 | 微信扫码关注公众号，订阅更多精彩内容 | 加笔者微信进群与大厂大佬讨论技术 | From c1eaceb41ad83783891d1f061914a0a3efc49a0b Mon Sep 17 00:00:00 2001 From: jingwenlong Date: Mon, 20 Sep 2021 18:25:58 +0800 Subject: [PATCH 74/81] =?UTF-8?q?fix:=20=E6=9B=B4=E6=AD=A3flex=E3=80=81gri?= =?UTF-8?q?d=E6=96=87=E6=A1=A3=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3c930cc..38fbe81 100644 --- a/README.md +++ b/README.md @@ -349,7 +349,7 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 #### Flex - [ ] 文档 - - [ ] [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) + - [ ] [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) - [ ] 推荐文章 - [ ] [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [ ] [Flexbox 布局中不为人知的细节](https://juejin.cn/post/6938292463605907492) @@ -357,7 +357,7 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 #### grid - [ ] 文档 - - [ ] [grid](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid) + - [ ] [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) - [ ] 推荐文档 - [ ] [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) - [ ] [最强大的 CSS 布局 —— Grid 布局](https://juejin.cn/post/6854573220306255880) From 8061333c36c9a1e73903ed91b3415e84d62e5f26 Mon Sep 17 00:00:00 2001 From: xuwu Date: Mon, 20 Sep 2021 18:39:49 +0800 Subject: [PATCH 75/81] =?UTF-8?q?feat:=20react=20=E5=8E=9F=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 38fbe81..6e9cd1f 100644 --- a/README.md +++ b/README.md @@ -397,6 +397,12 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 - [ ] [受控和非受控组件真的那么难理解吗](https://juejin.cn/post/6858276396968951822) - [ ] [[译]受控组件 & 非受控组件](https://www.baobangdong.cn/controlled-components-and-uncontrolled-components/) +### 原理 + +- [react-source-code-debug](https://github.com/neroneroffy/react-source-code-debug)，学习如何调试源码 +- [react-illustration-series](https://github.com/7kms/react-illustration-series)，图解react源码，用大量配图的方式，致力于将react原理表述清楚 +- [just-react](https://github.com/BetaSu/just-react)，「React技术揭秘」，一本自顶向下的React源码分析书 + ## Vue ## TypeScript From e5592667f2df5800179c6bcc7fe6dbbb592e6986 Mon Sep 17 00:00:00 2001 From: KieSun Date: Mon, 20 Sep 2021 10:40:15 +0000 Subject: [PATCH 76/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6e9cd1f..27bc94a 100644 --- a/README.md +++ b/README.md @@ -400,8 +400,8 @@ CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合 ### 原理 - [react-source-code-debug](https://github.com/neroneroffy/react-source-code-debug)，学习如何调试源码 -- [react-illustration-series](https://github.com/7kms/react-illustration-series)，图解react源码，用大量配图的方式，致力于将react原理表述清楚 -- [just-react](https://github.com/BetaSu/just-react)，「React技术揭秘」，一本自顶向下的React源码分析书 +- [react-illustration-series](https://github.com/7kms/react-illustration-series)，图解 react 源码，用大量配图的方式，致力于将 react 原理表述清楚 +- [just-react](https://github.com/BetaSu/just-react)，「React 技术揭秘」，一本自顶向下的 React 源码分析书 ## Vue From 9df2e2a4ca16b6f581e2c5d3c41a6b4fbc9cbb32 Mon Sep 17 00:00:00 2001 From: unknown <2388560359@qq.com> Date: Mon, 20 Sep 2021 20:32:16 +0800 Subject: [PATCH 77/81] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=9B=91=E6=8E=A7?= =?UTF-8?q?=E7=9B=B8=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 38fbe81..23c29ca 100644 --- a/README.md +++ b/README.md @@ -517,6 +517,27 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 - [美团自研 react 跨端](https://tech.meituan.com/2021/06/10/react-native-hybrid-practice-dsl-in-meituan.html) - [京东 taro](https://juejin.cn/post/6844904036743774216) +## 监控 + +当业务进入稳定，最需要做的肯定是对于业务线上的各种性能，异常，常规业务进行监控，避免在上线之后成为瞎子。 + +目前市场比较出名的监控系统： + +- [sentry](https://sentry.io/welcome/) +- [ali node](https://www.aliyun.com/product/nodejs) +- [bugly](https://bugly.qq.com/v2/) +- [mixpanel](https://mixpanel.com/) +- [听云](https://www.tingyun.com/) + + +推荐文章： + +- [美团 可视化埋点方案](https://tech.meituan.com/2019/08/15/mtflexbox-automation-buried-point-exploration.html) +- [如何进行web性能监控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) +- [蚂蚁金服如何把前端性能监控做到极致?](https://www.infoq.cn/article/dxa8am44oz*lukk5ufhy) +- [知乎 如何做前端异常监控 回复](https://www.zhihu.com/question/29953354) + + ## 面试 ## 日常充电 From db9844dce54bef1afc7d0a88ae43e3f84eae3246 Mon Sep 17 00:00:00 2001 From: KieSun Date: Mon, 20 Sep 2021 12:47:43 +0000 Subject: [PATCH 78/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 39dac33..037d3c5 100644 --- a/README.md +++ b/README.md @@ -535,15 +535,13 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 - [mixpanel](https://mixpanel.com/) - [听云](https://www.tingyun.com/) - 推荐文章： - [美团 可视化埋点方案](https://tech.meituan.com/2019/08/15/mtflexbox-automation-buried-point-exploration.html) -- [如何进行web性能监控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) +- [如何进行 web 性能监控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) - [蚂蚁金服如何把前端性能监控做到极致?](https://www.infoq.cn/article/dxa8am44oz*lukk5ufhy) - [知乎 如何做前端异常监控 回复](https://www.zhihu.com/question/29953354) - ## 面试 ## 日常充电 From 62dbf8b95b52e3256c68265160b0477fbf2c79f4 Mon Sep 17 00:00:00 2001 From: xuwu Date: Mon, 20 Sep 2021 20:59:57 +0800 Subject: [PATCH 79/81] =?UTF-8?q?feat:=20update=20=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 037d3c5..99607f8 100644 --- a/README.md +++ b/README.md @@ -525,7 +525,7 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 ## 监控 -当业务进入稳定，最需要做的肯定是对于业务线上的各种性能，异常，常规业务进行监控，避免在上线之后成为瞎子。 +当业务进入稳定，最需要做的肯定是对于业务线上的各种性能、异常及常规业务进行监控，避免在上线之后成为瞎子。 目前市场比较出名的监控系统： @@ -535,12 +535,16 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 - [mixpanel](https://mixpanel.com/) - [听云](https://www.tingyun.com/) +推荐开源库： + +- [rrweb](https://github.com/rrweb-io/rrweb)，提供像素级的录制与回放，帮助正确定位问题是如何发生的 + 推荐文章： -- [美团 可视化埋点方案](https://tech.meituan.com/2019/08/15/mtflexbox-automation-buried-point-exploration.html) +- [美团可视化埋点方案](https://tech.meituan.com/2019/08/15/mtflexbox-automation-buried-point-exploration.html) - [如何进行 web 性能监控？](http://www.alloyteam.com/2020/01/14184/#prettyPhoto) - [蚂蚁金服如何把前端性能监控做到极致?](https://www.infoq.cn/article/dxa8am44oz*lukk5ufhy) -- [知乎 如何做前端异常监控 回复](https://www.zhihu.com/question/29953354) +- [如何做前端异常监控？](https://www.zhihu.com/question/29953354) ## 面试 From 88e41deba18dfe5f897e7adfd54d3bbcbe994b13 Mon Sep 17 00:00:00 2001 From: xuwu Date: Mon, 20 Sep 2021 21:04:16 +0800 Subject: [PATCH 80/81] =?UTF-8?q?feat:=20=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 99607f8..048e701 100644 --- a/README.md +++ b/README.md @@ -538,6 +538,7 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 推荐开源库： - [rrweb](https://github.com/rrweb-io/rrweb)，提供像素级的录制与回放，帮助正确定位问题是如何发生的 +- [monitor](https://github.com/clouDr-f2e/monitor)，👀 一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、并上报服务端的SDK 推荐文章： From 69fe76b454530753a6332de7c2fca59161d4f00a Mon Sep 17 00:00:00 2001 From: KieSun Date: Mon, 20 Sep 2021 13:04:37 +0000 Subject: [PATCH 81/81] Commit from GitHub Actions (markdown-autodocs) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 048e701..12f52b0 100644 --- a/README.md +++ b/README.md @@ -538,7 +538,7 @@ Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建 推荐开源库： - [rrweb](https://github.com/rrweb-io/rrweb)，提供像素级的录制与回放，帮助正确定位问题是如何发生的 -- [monitor](https://github.com/clouDr-f2e/monitor)，👀 一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、并上报服务端的SDK +- [monitor](https://github.com/clouDr-f2e/monitor)，👀 一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、并上报服务端的 SDK 推荐文章：