Dream
Dream copied to clipboard
KieSun
我是 yck，✍️ 这里是写博客以及记录学习的地方
深度解析原型中的各个难点
本文不会过多介绍基础知识，而是把重点放在原型的各个难点上。  大家可以先仔细分析下该图，然后让我们进入主题 ## `prototype` 首先来介绍下 `prototype` 属性。这是一个显式原型属性，只有函数才拥有该属性。基本上所有函数都有这个属性，但是也有一个例外 ```js let fun = Function.prototype.bind() ``` 如果你以上述方法创建一个函数，那么可以发现这个函数是不具有 `prototype ` 属性的。 #### prototype 如何产生的 当我们声明一个函数时，这个属性就被自动创建了。 ```js function Foo() {} ``` 并且这个属性的值是一个对象（也就是原型），只有一个属性 `constructor` ...
这是我的剖析 React 源码的第三篇文章，如果你没有阅读过之前的文章，请务必先阅读一下 [第一篇文章](https://github.com/KieSun/Dream/issues/18) 中提到的一些注意事项，能帮助你更好地阅读源码。 ## 文章相关资料 - [React 16.8.6 源码中文注释](https://github.com/KieSun/react-interpretation)，这个链接是文章的核心，文中的具体代码及代码行数都是依托于这个仓库 - [热身篇](https://github.com/KieSun/Dream/issues/18) - [render 流程（一）](https://github.com/KieSun/Dream/issues/19)  此篇文章内容衔接 [render 流程（一）](https://github.com/KieSun/Dream/issues/19)，当然不看上一篇文章也没什么问题，因为内容并没有强相关。 现在请大家打开 [我的代码](https://github.com/KieSun/react-interpretation) 并定位到 react-dom 文件夹下的 src 中的 ReactDOM.js 文件，今天的内容会从这里开始。 ##...
面试数十人有感
平时会接一些模拟面试的服务，几个月下来也面试几十个人了，来和大家聊聊面试了这些人的感想。 ## 万丈高楼起于垒土 基础对于每个人都是很重要的一步。无论你做的是什么领域的东西，计算机科学中的必修课必须是要学好的。就前端而言，OS、数据结构与算法、网络这几块内容是必须要掌握的基础的，这些基础不扎实，你的天花板势必不高。但是其实在面试的过程中，我发现无论是社招的还是校招的，基本上基础都不大行。我认为，对于校招生来说，基础不好基本和大厂绝缘了；对于社招来说，基础不好虽然也同样能干活，但是天花板不高会导致你的技术成长会随着年龄增长变得越来越低，最后结果也基本是停留于二三线公司。 所以任何一个想要在技术这条路上走的更远的人，都应该好好学习计算机科学。如果你已经脱离学校了并且英语还行，我强烈推荐 CS61 系列，如果你能将这三门课完整的学习下来也基本有大部分科班本科的素养了。 说完计算机基础，那么来说说前端的基础吧。在面试的过程中，发现大部分人问基础知识点还是能够说出来的，但是仅限于知道。对于如何将多个知识点串联起来或者知识点的更深层次的问题就很少有人能够答好。 打个比方，跨域这种问烂的问题想必大家都能答出点东西。这个也是我常会问的一个问题，当然我还会配合几个问题去问。比如问什么浏览器要引入跨域这个机制；跨域请求到底有没有正常发出去并收到响应；是否了解跨域预检。对于以上三个问题，能够答出的人并不多，更多人只是知道我该如何去解决跨域，但是对于为什么要有跨域反而知道的并不多。这也侧面反应了大部分人并没有深入挖掘知识的意识，只是停留于表面。 对于基础而言，我认为所有人都应该好好夯实。如果你是转行的，那么首先应该把前端基础学好，然后有空的时候去补计算机基础；如果你是科班出来的，首先肯定是学好计算机基础，然后才是前端基础，这样你才能站得高，成长得快。 ## 框架 现在框架已经是前端绕不开的话题了。很多人会纠结于我该挑选哪个框架或者哪个框架牛逼等等，首先在学习框架前，我觉得你应该先打好基础，而不是好高骛远的先使用框架。再者，几大热门的框架底层的思想都是一致的，并没有哪个好哪个差之分。 在面试的过程中，框架原理其实是绕不开的题目了。但是说实话，面试下来的结果却是很少有人熟悉框架原理，只是停留于会用框架。这其实是一个不好的现象，打个比方，一个机器建造出来可以通过说明书的方式让流水线工人去使用，就算一批工人走了，还可以再去招一批，你并没有什么核心竞争力。但是对于会修理机器的或者会造机器的人来说，找工作会很好找，因为这是核心技术人才。放到编程里也是一样的，单纯会使用 API 的人并不会成为稀缺人才，充其量一个中级开发。但是如果你熟悉 API 底层的原理，那么也许你就可以晋升成为高级开发，从而提高个人的核心竞争力。并且一旦你熟悉了底层原理，你的眼界也会高于别人，不会纠结于我该选择什么框架，不会担心个人的经验是否会很大程度影响找工作。 所以，在这里我想讲的是：学习一件事物，熟练使用它是基本，在熟练使用以后，应该转而去学习他底层的原理机制，甚至自己去实现一个类似的东西。当你这样去做的时候，永远不需要担心自己是否会淘汰，因为你已经领先所有只会用 API 的人了，这部分绝对是最多的。 最后，对于每个想在面试中获得好的结果的人来说，都应该做到以下几点： - 夯实自己的基础，基础决定了大楼的高度 - 有深入挖掘知识的思想，对于每个知识点都应该考虑一下这玩意怎么实现的，为什么要有这玩意 - 不要做框架 API 的熟练工，尽量去了解框架底层的原理机制...
现在大部分搞前端的应该还是这样写 CSS 的： ```html .mock { margin: auto; font-size: 16px; // ... } mock ``` 以上代码就是举个例子，大部分情况应该都是写一个类，然后整一堆样式进去。 但是这种方式写多了以后，你应该会感受到一些痛点，比如说： - 取名困难，节点结构一多，取名真的是个难事。当然了，我们可以用一些规范或者选择器的方式去规避一些取名问题。 - 需要用 JS 控制样式的时候又得多写一个类，尤其交互多的场景。 - 组件复用大家都懂，但是样式复用少之又少，这样就造成了冗余代码变多。 - 全局污染，这个其实现在挺多工具都能帮我们自动解决了。 - 死代码问题。JS 我们通过...
如何正确的使用你的时间
你是否时常会焦虑时间过的很快，没时间学习，本文将会分享一些个人的见解。 # 花时间补基础，读文档 在工作中我们时常会花很多时间去 debug，但是你是否发现很多问题最终只是你基础不扎实或者文档没有仔细看。 基础是你技术的基石，一定要花时间打好基础，而不是追各种新的技术。一旦你的基础扎实，学习各种新的技术也肯定不在话下，因为新的技术，究其根本都是相通的。 文档同样也是一门技术的基础。一个优秀的库，开发人员肯定已经把如何使用这个库都写在文档中了，仔细阅读文档一定会是少写 bug 的最省事路子。 # 学会搜索 如果你还在使用百度搜索编程问题，请尽快抛弃这个垃圾搜索引擎。同样一个关键字，使用百度和谷歌，谷歌基本完胜的。即使你使用中文在谷歌中搜索，得到的结果也往往是谷歌占优，所以如果你想迅速的通过搜索引擎来解决问题，那一定是谷歌。 # 学点英语 说到英语，一定是大家所最不想听的。其实我一直认为程序员学习英语是简单的，因为我们工作中是一直接触着英语，并且看懂技术文章，文档所需要的单词量是极少的。我时常在群里看到大家发出一个问题的截图问什么原因，其实在截图中英语已经很明白的说明了问题的所在，如果你的英语过关，完全不需要浪费时间来提问和搜索。所以我认为学点英语也是节省时间中很重要的一点。 那么如何去学习呢，chrome 装个翻译插件，直接拿英文文档或文章读，不会的就直接划词翻译，然后记录下这个单词并背诵。每天花半小时看点英文文档和文章，坚持两个月，你的英语水平不说别的，看文档和文章绝对不会有难题了。这一定是一个很划算的个人时间投资，花点时间学习英语，能为你将来的技术之路铺平很多坎。 # 画个图，想一想再做 你是否遇到过这种问题，需求一下来，看一眼，然后马上就按照设计稿开始做了，可能中间出个问题导致你需要返工。 如果你存在这样的问题，我很推荐在看到设计稿和需求的时候花点时间想一想，画一画。考虑一下设计稿中是否可以找到可以拆分出来的复用组件，是否存在之前写过的组件。该如何组织这个界面，数据的流转是怎么样的。然后画一下这个页面的需求，最后再动手做。 # 利用好下班时间学习 说到下班时间，那可能就有人说了公司很迟下班，这其实是国内很普遍的情况。但是我认为正常的加班是可以的，但是强制的加班就是在损耗你的身体和前途。 可以这么说，大部分的 996 公司，加班的这些时间并不会增加你的技术，无非就是在写一些重复的业务逻辑。也许你可以拿到更多的钱，但是代价是身体还有前途。程序员是靠技术吃饭的，如果你长久呆在一个长时间加班的公司，不能增长你的技术还要吞噬你的下班学习时间，那么你一定会废掉的。如果你遇到了这种情况，只能推荐尽快跳槽到非 996 的公司。 那么如果你有足够的下班时间，一定要花上...
> 这是重学 JS 系列的第二篇文章，写这个系列的初衷也是为了夯实自己的 JS 基础。既然是重学，肯定不会从零开始介绍一个知识点，如有遇到不会的内容请自行查找资料。 ## 原型 继承得靠原型来实现，当然原型不是这篇文章的重点，我们来复习一下即可。 其实原型的概念很简单： - 所有对象都有一个属性 `__proto__` 指向一个对象，也就是原型 - 每个对象的原型都可以通过 `constructor` 找到构造函数，构造函数也可以通过 `prototype` 找到原型 - 所有函数都可以通过 `__proto__` 找到 `Function` 对象 - 所有对象都可以通过 `__proto__` 找到...
Promise 关于 API 这块大家应该都能熟练使用，但是和微任务相关的你可能还存在知识盲区。 ## 前置知识 在开始正文前，我们先把本文涉及到的一些内容提前定个基调。 ### Promise 哪些 API 涉及了微任务？ Promise 中只有涉及到状态变更后才需要被执行的回调才算是微任务，比如说 `then`、 `catch` 、`finally` ，其他所有的代码执行都是宏任务（同步执行）。  上图中蓝色为同步执行，黄色为异步执行（丢到微任务队列中）。 ### 这些微任务何时被加入微任务队列？ 这个问题我们根据 ecma 规范来看： - 如果此时 Promise 状态为 pending，那么成功或失败的回调会分别被加入至...
性能优化相关的文章其实网上挺多，但是大部分都是在讲如何优化性能，也就是讲方法论。但是在实际工作中，如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标（也可以认为是性能指标），每个指标分别根据以下几点讲解： 指标本身的作用、测量、推荐时间区间等如何指标进行优化，该内容会在文末统一讲解 FP & FCP 首次绘制，FP（First Paint），这个指标用于记录页面第一次绘制像素的时间。 首次内容绘制，FCP（First Contentful Paint），这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。 这两个指标看起来大同小异，但是 FP 发生的时间一定小于等于 FCP，如下图是掘金的指标： FP 指的是绘制像素，比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此时 DOM 内容还没开始绘制，可能需要文件下载、解析等过程，只有当 DOM 内容发生变化才会触发，比如说渲染出了一段文字，此时就会记录下 FCP 指标。因此说我们可以把这两个指标认为是和白屏时间相关的指标，所以肯定是最快越好。 上图是官方推荐的时间区间，也就是说如果 FP...
经常有读者问我这问题，表示前端要学的实在太多了，然后给我列举了一大堆技术栈：什么三大框架、各种全家桶、小程序、umi、flutter、SSR、Node 等等，反正是把前端技术栈列举了一遍~ 前端东西确实蛮多，但也没必要什么都想学。一旦你有这个想法，多半会像个无头苍蝇乱飞。这个看看，那个学点，到头来啥东西都没学好。 这样的例子其实我在读者里看到好些了，学习确实看起来是在学习，啥资料都收藏了，今天看会这个技术的视频，明天拿上另一个技术的书读起来，但是这种学习方式相当低效，另外啥资料都收集还会造成一个时间完全不够用的假象。如果没有一个学习的目标规划，只能事倍功半（可能连半都没有）。因为编程这个事情其中一部分就是靠大量的编码，如果你今天学这明天看那，没有大量的练习让你去训练自己到最后就是啥都不学不好。 先了解自己到底要什么 知道自己要什么是学习之前必须搞定的，否则就是无头苍蝇四处乱来了。 如果你真的没有什么思路的话，我这里推荐三个路子： 基础，反正无论什么场景下我都会推荐先学好基础，基础不好谈别的就是耍流氓公司中用的或者将来要用的技术栈，觉得哪个还学的不好就先学哪个看大公司的招聘要求（切记要看大公司的，因为大公司的要求不会是需要你学一大堆，只有小公司才会需要你这也会那也会），然后挑出要求中你还不熟练的开学 深度还是广度？ 其实这个问题个人觉得没有绝对答案，两者各有好处。 挖掘深度有助于你成为一个领域中的专家，虽然绝大部分人是没有这个机会的啦，但是比一部分人我们肯定是做得到的，所以挖掘深度归结到底能帮助你成为行业内不那么容易淘汰的人。 挖掘广度有助于帮助你触类旁通，了解更多的概念等等，另外个人体感也会有学的越多就越快的感觉。当然这个挖掘广度不是前文说的那种啥都要去学的做法，而是在学习一个方向的时候顺带把有联系的内容也学上一点。 举个例子今天你打算开始学 Redux（React 的状态管理库），那么在学习 Redux 的过程中，你可以考虑顺带学习一下它的竞品对比 Redux 的优势缺陷是什么等等。这里需要注意的是没有让你把它的竞品也全部学一遍，而是了解竞品的优势及缺陷（这是广度），挖掘深度是好好学 Redux 直到能造出一样的轮子（这是挖掘深度到很后面了）。 建立知识体系 构建知识体系相当重要，否则不管你学到什么都是单独的一块知识，和其他内容不存在联系的话很容易忘记。 大家应该之前有在网上看到过前端知识脑图这类的东西，这个其实就算是一种次点（因为这种只是一个细分领域下的划分，没有和更多的细分领域产生联系）的知识体系，当然能先掌握它也是很棒的。 更好的方式是你学到的知识尽可能的要与别的知识连接起来，能与越多的知识联系起来越好。 举个例子今天面试官问了你一个理论知识，这时候如果你能先讲出理论知识，又能讲出有关联的理论知识，最后用工作中的实例去描述这个知识，这种就算是一个不错的知识体系实践。你既将这个理论知识与别的理论知识连接了起来，又能与实战中的例子产生关联。 那么我们该如何建立自己的知识体系呢？方法很简单： 把自己学到的知识用自己的话写成笔记画脑图，把笔记浓缩到脑图中学到新的知识重复一和二步骤，然后思考新学习到的内容是否可以与别的知识产生联系，能产生联系就用箭头双向连接起来 不要想着啥都学 文章开头列举的很多技术栈比如：flutter、SSR、umi...