前端学习周报-2022年第7周

# 0.前言

年前杜老师给我指定了一个计划：升级IDE的VSCode基础版本。为了能够简单看懂VSCode源码，于是在上周我阅读了大量的文章以及许许多多优秀的博客。但是这些知识点过于零碎，无法单独形成一篇单独的笔记，所以干脆单独再开出一栏前端学习周报（反正也没人看，哈哈哈哈哈😁），用于记录每周的前端学习心得，希望能一直坚持下去。

# 1.VSCode源码研读

VSCode作为当下最为流行的代码编辑器，自2005年推出以后就立马干掉了，诸如Sublime Text以及Atom等编辑的市场份额。并且长期霸榜开源项目老大哥的座椅，截止目前github上已经获得了12.8万的star。实际上，早期的VSCode是并是不开源的，所以我们部门早期开发的IDE是基于Eclipse，其实并不是因为Eclipse好用，主要原因是开源。当VScode开源后，于是立马就转变为VSCode这一套体系。

本周阅读有关VSCode源码的文章有：

codeteengager：[北京赞同]技术博客 (opens new window)

在学习资料这一栏，提供了Electron技术专家liuliu（《深入浅出Electron》与《Electron实战》的作者）写的九篇技术博客：
匠心博客 (opens new window)

匠心博客实际上不是主要记录VSCode源码的，实际上这名博主涉猎的范围很多，包括小程序、Nodejs进阶、Andriod进阶、服务开发、前端可视化等等，可以点击此链接 (opens new window)快速查看。

匠心博客中提供了更多的优秀的博文链接，有如下的一些博文值得关注：

# 小茗同学系列文章
# 大表哥系列文章（知乎+notion）

这个人水平比较高，但是没有基础的读起来比较难懂的，而且整个系列没有liuliu写的细，但是对于IOC这部分的内容写的非常好。
# 小胡子哥系列文章

小胡子哥此人博客非常nice，而且他本人也是阿里系技术专家，目前任职于蚂蚁金服，之前在淘宝干了5年，前端技术大牛，小胡子哥的博客主要着重在于VSCode代码调试部分：
其他优秀内容：

Wendell字节跳动的前端工程师，写的两篇文章：
- vscode 源码解析 - 细数 vscode 中的那些服务 (opens new window)
- vscode 源码解析 - 依赖注入 (opens new window)

# 2.其余知识点

在VSCode是使用gulp进行构建的，所以我又去了解了下gulp相关内容：

在VSCode中大量使用的依赖注入的原理+装饰器，而装饰器内容写的最好的还是要看Ts官网对这部分的文章，写的非常好：https://www.typescriptlang.org/docs/handbook/decorators.html (opens new window)

# 3. JavaScript基础

在判断数组或者字符串是否包含某一个元素，有两个方法indexOf和includes，基础用法都知道就不说了，如果要判断是否存在的话，还是建议使用includes，看下面两个例子，includes可以对undefined和NaN进行判断：

var ary = [,,];
console.log(ary.indexOf(undefined))//-1
console.log(ary.includes(undefined))//true

var ary = [NaN];
console.log(ary.indexOf(NaN))//-1 indexOf不能判断NaN
console.log(ary.includes(NaN))//true includes可以

1
2
3
4
5
6
7

在工作遇到一个问题，需要对数组[1,[2,3]]中是否存在某一个数值，然后我是这么写的：

const arr = ...
arr.flat().includes(num)

1
2

结果报错，不存在flat这个函数，通过在Chrome输入：Array.prototype.flat()也是查无此函数，通过查阅MDN发现支持的Chrome支持的最低的版本号是64，而行内提供的Chrome版本号为60，此时最新的Chrome是95，这是我在工作中遇到的第一个需要对函数进行 polyfill 处理的案例。

# 4.精神氮泵

最近看了几个视频，一个视频是小透明明TM出的两期有关钟南山的视频：

钟南山在35岁之前一事无成，35岁以后拼了命的为自己喜欢的事业进行奋斗，现实比起史泰龙拍的洛奇热血多了。李健有次在视频 (opens new window)中也提到了：三十而立是不正确的，三十岁其实很难立起来。所以我们这个岁数的人也无需太焦虑，羡慕别人高工资，人生的道路很长，坚持自己喜欢的事情，不要有peer pressure。

有关对年轻人对内卷、买房、结婚、工作方面的内容，其实挺推荐储殷教授的观点，大嘴但是朴实。

还有第二个视频 (opens new window)，是关于金一南将军讲述的自己的人生经历：36岁学习外语，41岁学习电脑，46岁副高职称，47岁走上讲坛。金一南将军形容自己是疲于追赶末班车的人，他总结的经验是：不要后悔不要厌弃自己干的任何工作。

以上几位大佬的人生经历告诉我们：不要在意短期的得失成败，放在人生的长河中可能这些都不算什么。输的未必输了，赢的未必赢的长久，不以得失论成败，亦不以成败论英雄 (opens new window)。

# 5.计划

近2个月来，由于自己看了很多的技术博客，脑子里有很多东西可以写出来形成笔记，接下来的博客计划有：

[ ] 基于TDD驱动的Promise源码
[ ] JavaScript修改指针三个函数：apply/bind/call（多种polyfill实现）
[ ] 实现深拷贝的几种方式（递归循环的多个版本，包括循环引用版本）
[ ] 设计模式：EventHub事件发布订阅模式。
[ ] 实现函数柯里化（代码简单，理念难）
[ ] async和await语法糖基础：iterator和generator（这部分需要梳理）
[ ] 实现图片懒加载（其中，判断是否在可视区域已经完成，应该会给出三种图片懒加载写法）
[ ] 继承相关知识点：
1. 四种继承方式:原型链继承/构造函数继承/组合继承/寄生式继承
2. 其中需要讲解Object.create()和instanceOf()的原理，以及getPrototypeOf
3. 高级版
  - React还是用的ES6中的类继承，而Vue使用的是组合继承，mixin函数实现。
  - 使用装饰器的方式，实现继承操作等等。

未来待进一步学习的内容：

[ ] react-redux源码：看了好几遍了，案例需要花费时间做起来了。
[ ] redux源码：一直没有时间看，看看链表的实际使用场景。
[ ] vite源码：哎，这部分内容真的是头大，还是等node和koa学的稍微好一点再看这部分内容吧，其实node学好了，需要优先把HTTP缺失的内容补上，争取看懂findxc对于OPTIIONS的内容看懂。
[ ] React 17：任重道远，全栈萧程的博客。React 18有时间再关注吧，感觉18的重点还是在服务端改进。
[ ] 前端工程化：Node、webpack源码部分（AST解析）、脚手架相关。

# 6.总结

目前已经工作了半年了，以上的内容够我学习半年了，如果能很踏实的搞懂这些知识点的话，感觉应该会成长不少，加油吧后浪！

编辑

上次更新: 2022/04/06, 15:04:00

← 在Linux中安装node package.json中^和~的含义→