- 博客(183)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 你不知道的javascript （丛书系列&电子博客版本）
要注意的是，这里的有些代码假定最新版本的 JavaScript（通常称为“ES6”，ECMAScript 的第六个版本 —— ECMAScript 是 JS 语言规范的官方名称）中引入的功能是存在的。==和===之间的不同通常被描述为，==检查值的等价性而===检查值和类型两者的等价性。描述它们的合理方式是，==在允许强制转换的条件下检查值的等价性，而===是在不允许强制转换的条件下检查值的等价性；因为这些值实际上是通过引用持有的，==和===比较都将简单地检查这个引用是否相同，而不是它们底层的值。
2023-03-20 12:31:55
793
原创 数据结构与算法学习推荐
输入：beginWord = "hit", endWord = "cog", wordList = ["hot","dot","dog","lot","log","cog"]输出：[["hit","hot","dot","dog","cog"],["hit","hot","lot","log","cog"]]解释：存在 2 种最短的转换序列："hit" -> "hot" -> "dot" -> "dog" -> "cog""hit" -> "hot" -> "lot" -> "log" -> "cog"
2023-01-14 20:33:38
913
2
原创 选择Object 还是Map
对于多数Web 开发任务来说，选择Object 还是Map 只是个人偏好问题，影响不大。不过，对于在乎内存和性能的开发者来说，对象和映射之间确实存在显著的差别。
2023-01-31 10:58:46
586
原创 Typescript 基础知识
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。
2022-12-01 22:30:32
1064
原创 如何学习Typescript？（推荐）
完整的Typescript，由简单到复杂，复杂重点类型操作、联合类型等通过动画和照片形式展示，更容易理解。丰富题目：分位简单，中等、苦难，有简到难。在线编辑器，用于练习，极其方便。
2022-11-11 17:20:05
241
原创 TS代码整洁之道（下）
格式化是让代码整洁的一个简单却又重要手段（我在项目组见过，有多年工作经验的老司机也未对代码格式化），但是，格式定义却没有什么硬性规定。争论那种格式更好都是徒劳，浪费时间，在格式化上这点上，最重要的就是要统一，项目或公司级的统一格式规范。确实，很多国内外公司都有自己的代码格式规范。试想，如果一个接口是一个大而全的抽象，那么实现这个接口就会成为一种负担，因为需要实现一些不需要的方法。这个原则的定义是：“如果 S 是 T 的一个子类型，那么类型 T 的对象可以被替换为类型 S 的对象，而不会改变程序的正确性”。
2022-10-27 19:32:49
676
原创 TS代码整洁之道（上）
可能因为我们一直关注需求和模型，代码往往被忽略。虽然现在有很多低代码平台可以批量生产代码，但是代码层面的抽象和其呈现的细节是无法被忽视的。我们可能都碰到过类的情况：项目初期迅速迭代，随着项目日渐复杂，维护迭代成本逐渐变大，对A处代码的修改都会影响C和D处代码，甚至你不知道会不会影响其他地方代码。随着混乱增加，团队的生产力下降，开发效率降低，开发成本回增高。为了解决以上因“糟糕”代码带来的各种问题，在读完《Clean Code》后总结一下代码整洁之道，核心围绕“净”。
2022-10-27 19:29:39
2094
原创 使用 CSS object-fit 属性裁剪图片
曾经是否想要一张图片精确地适配某个尺寸大小、但同时还要保持它的长宽比、避免出现图片被压扁的情况？在很长一段时间内，使用 CSS 很难做到这一点。但现在object-fit属性就能解决这个问题了！除了这三个值，object-fitcontaincoverfillnonescale-downcontainnone下面有一张图片， 它的原始尺寸是：宽 1200px，高 674px。我们设置成一半大小显示，即 600px * 337px。如果在不改变高度的情况下，将宽度再设置为 300px。
2022-09-23 14:45:11
2512
原创 【React源码】(十八)React 算法之调和算法
本节介绍了 React 源码中,fiber构造循环阶段用于生成下级子节点的函数(函数中的算法被称为调和算法), 并演示了可迭代节点比较的图解示例. 该算法十分巧妙, 其核心逻辑把newChildren序列分为 2 步遍历, 先遍历公共序列, 再遍历非公共部分, 同时复用oldFiber序列中的节点....
2022-08-26 16:47:23
352
原创 【React源码】(十七)React 算法之深度优先遍历
由于react内部使用了和fiber两大树形结构, 所以有不少关于节点访问的逻辑.本节主要介绍了DFS的概念和它在react源码中的使用情况. 其中fiber树的DFS遍历, 涉及到的代码多, 分布广, 涵盖了reconciler阶段的大部分工作, 是reconciler阶段工作循环的核心流程.除了DFS之外, 源码中还有很多逻辑都是查找树中的节点(如: 向上查找父节点等). 对树形结构的遍历在源码中的比例很高, 了解这些算法技巧能够更好的理解react源码....
2022-08-26 16:43:08
572
原创 【React源码】(十六)React 合成事件
从架构上来讲,打通了从外部原生事件到内部fiber树的交互渠道, 使得react能够感知到浏览器提供的原生事件, 进而做出不同的响应, 修改fiber树, 变更视图等.监听原生事件: 对齐DOM元素和fiber元素收集listeners: 遍历fiber树, 收集所有监听本事件的listener函数.派发合成事件: 构造合成事件, 遍历listeners进行派发....
2022-08-26 16:40:18
441
1
原创 【React 源码】（十五）React Context 原理
Context的实现思路还是比较清晰, 总体分为 2 步.在消费状态时,节点调用获取最新状态.在更新状态时, 由节点负责查找所有节点, 并设置消费节点的父路径上所有节点的, 保证消费节点可以得到更新.
2022-08-26 16:25:57
705
原创 【React源码】(十四）Hook 原理(副作用 Hook)
本节分析了副作用Hook从创建到销毁的全部过程, 在react内部, 依靠和effect.tag实现了对effect的精准识别. 在commitRoot阶段, 对不同类型的effect进行处理, 先后调用和。
2022-08-26 16:22:53
526
原创 【React源码】(十三)Hook 原理(状态 Hook)
本节深入分析状态Hook即useState的内部原理, 从同步,异步更新理解了update对象的合并方式, 最终结果存储在供给function使用.
2022-08-25 15:20:09
966
原创 【React源码】(十三) Hook 原理(概览)
本节首先引入了官方文档上对于Hook的解释, 了解Hook的由来, 以及Hook相较于class的优势. 然后从fiber视角分析了fiber与hook的内在关系, 通过函数, 把Hook链表挂载到了之上. 利用fiber树内部的双缓冲技术, 实现了Hook从current到转移, 进而实现了Hook状态的持久化.
2022-08-25 15:16:09
1249
原创 【React源码】（十二）Hook源码分析 状态与副作用
本节从fiber视角出发, 总结了fiber节点中可以影响最终渲染结果的 2 类属性(状态和副作用).并且归纳了class和function组件中, 直接或间接更改fiber属性的常用方式. 最后从fiber树构造和渲染的角度对class的生命周期函数与function的Hooks函数进行了比较.
2022-08-25 15:10:51
381
原创 【React源码】(十一)fiber 树渲染
本节分析了fiber 树渲染的处理过程, 从宏观上看fiber 树渲染位于reconciler 运作流程中的输出阶段, 是整个reconciler 运作流程的链路中最后一环(从输入到输出). 本节根据源码, 具体从渲染前, 渲染, 渲染后三个方面分解了函数. 其中最核心的渲染逻辑又分为了 3 个函数, 这 3 个函数共同处理了有副作用fiber节点, 并通过渲染器react-dom把最新的 DOM 对象渲染到界面上.
2022-08-25 15:08:11
518
原创 【React源码】(十)fiber 树构造(对比更新)
本节演示了更新阶段fiber树构造(对比更新)的全部过程, 跟踪了创建过程中内存引用的变化情况. 与初次构造最大的不同在于fiber节点是否可以复用, 其中bailout逻辑是fiber子树能否复用的判断依据.
2022-08-24 11:30:11
473
原创 【react 源码】（九）fiber 树构造(初次创建) 难 难 难
本节演示了初次创建fiber树的全部过程, 跟踪了创建过程中内存引用的变化情况.fiber树构造循环负责构造新的fiber树, 构造过程中同时标记, 最终把所有被标记的fiber节点收集到一个副作用队列中, 这个副作用队列被挂载到根节点上(). 此时的fiber树和与之对应的DOM节点都还在内存当中, 等待commitRoot阶段进行渲染.
2022-08-24 11:21:29
568
原创 【React 源码】(八)fiber 树构造(基础准备)
本节是fiber树构造的准备篇, 首先在宏观上从不同的视角(任务调度循环,fiber树构造循环)介绍了fiber树构造在React体系中所处的位置, 然后深入包分析fiber树构造过程中需要使用到的全局变量, 并解读了双缓冲技术和优先级(车道模型)的使用, 最后解释栈帧管理的实现细节. 有了这些基础知识,fiber树构造的具体实现过程会更加简单清晰.
2022-08-24 11:07:09
618
原创 浏览器中的页面循环系统（三）async await使用同步方式写异步代码
好了，今天就介绍到这里，下面我来总结下今天的主要内容。Promsie 的编程模型依然充斥着大量的 then 方法，虽然解决了回调地狱的问题，但是在语义方面依然存在缺陷，代码中充斥着大量的 then 函数，这就是 async / await 出现的原因。使用 async / await 可以实现同步代码的风格来编写异步代码，这是因为 async / await 的基础技术使用了生成器和 Promise，生成器是协程的实现，利用生成器能实现生成器函数的暂停和恢复。
2022-08-23 15:15:40
373
原创 浏览器中的页面循环系统（二）Webapi：setTimeout是怎么实现的
首先，为了支持定时器的实现，浏览器增加了延时队列。其次，由于消息队列排队和一些系统级别的限制，通过 setTimeout 设置的回调任务并非总是可以实时地被执行，这样就不能满足一些实时性要求较高的需求了。最后，在定时器使用过程中，还存在一些陷阱，需要你多加注意。通过分析和讲解，你会发现函数 setTimeout 在时效性上面有很多先天的不足，所以对于一些时间精度要求比较高的需求，应该有针对性地采取一些其他的方案。
2022-08-23 15:11:08
544
原创 浏览器中的页面循环系统（一）消息队列和事件循环：页面是怎么活起来的
如果有一些确定好的任务，可以使用一个单线程来按照顺序处理这些任务，这是第一版线程模型。要在线程执行过程中接收并处理新的任务，就需要引入循环语句和事件系统，这是第二版线程模型。如果要接收其他线程发送过来的任务，就需要引入消息队列，这是第三版线程模型。如果其他进程想要发送任务给页面主线程，那么先通过 IPC 把任务发送给渲染进程的 IO 线程，IO 线程再把任务发送给页面主线程。消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。
2022-08-23 15:06:45
347
原创 【React源码】(七）React 调度原理(scheduler)
本节主要分析了scheduler包中调度原理, 也就是React两大工作循环中的任务调度循环. 并介绍了时间切片和可中断渲染等特性在任务调度循环中的实现.scheduler包是React运行时的心脏, 为了提升调度性能, 注册task之前, 在包中做了节流和防抖等措施.
2022-08-23 14:55:17
1344
原创 【React源码】(六)React 中的优先级管理
本文介绍了 react 源码中有关优先级的部分, 并梳理了 3 种优先级之间的区别和联系. 它们贯穿了reconciler 运作流程中的 4 个阶段, 在 react 源码中所占用的代码量比较高, 理解它们的设计思路, 为接下来分析调度原理和fiber构造打下基础.
2022-08-23 14:46:06
886
原创 【React 源码】(五)React 应用的启动过程
本章节介绍了react应用的 3 种启动方式. 分析了启动后创建了 3 个关键对象, 并绘制了对象在内存中的引用关系. 启动过程最后调用进入包,进而调用函数, 与reconciler运作流程中的输入阶段相衔接.
2022-08-22 15:55:54
1375
原创 【React 源码】(四）reconciler 运作流程
本节从宏观上分析了reconciler 运作流程, 并将其分为了 4 个步骤, 基本覆盖了包的核心逻辑.
2022-08-22 15:49:57
420
原创 【react源码】(三)React 应用中的高频对象
本章主要浏览了 react 运行链路中出现的高频对象, 并对它们的数据结构做出了单独解释. 提前了解这些对象的数据结构, 更加有利于之后对 react 源码的深入分析. 在后续对整个运行核心的解读中会多次引用到这些对象, 并对其在运行时的具体作用深入解读....
2022-08-19 10:11:23
607
原创 【React源码】(二)React 工作循环 (workLoop)
本节从宏观角度描述了react源码中的两大工作循环. 通过这两个大循环概括出react运行的主干逻辑.和Scheduler包代码量多且逻辑复杂, 但实际上大部分都是服务于这个主干. 了解这两大循环, 更容易理解react的整体运行链路....
2022-08-19 10:04:02
516
原创 【React源码】（一）React 应用的宏观包结构(web 开发)
React 工程目录的 packages 下包含 35 个包(@17.0.2版本). 其中与web开发相关的核心包共有 4 个, 本系列近 20 篇文章, 以这 4 个包为线索进行展开, 深入理解 react 内部作用原理.
2022-08-17 20:10:06
559
1
原创 useState 原理详解
useState 的原理一点也不复杂，我也会努力,让只要使用过 React 的人，就能看明白。Anyway，今天就让我来带大家阅读一下它的源码，一块梳理一下 useState 的原理吧！
2022-08-16 17:41:54
3381
3
转载 禁止H5页面在iOS系统中滑动回弹效果
次主要针对移动端H5页面在iOS端产生的橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。
2022-07-21 16:46:16
10111
6
原创 【前端小知识(一)】环形进度条方案 源码+效果
最近看到在一个网站是看到了这个这种样式发现它是div+css实现的一般的话是用画布实现的、所以我仿照这个思路写了一个弧形进度条
2022-04-14 16:41:51
1586
2
原创 V8工作原理（二）：垃圾回收：垃圾数据如何自动回收
垃圾回收：垃圾数据如何自动回收有些数据被使用之后，可能就不再需要了，我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中，那么内存会越用越多，所以我们需要对这些垃圾数据进行回收，以释放有限的内存空间
2022-03-19 13:17:20
494
原创 超全面的前端切图技巧读这篇就够了
相信每个前端都经历过用PS手动切图的原始手法，有时候偷懒，还会直接用QQ截图，现在想想真是初生牛犊不怕虎😅当时就在想，如果能有一款神器，帮我解放切图这种“体力活”该多好！于是，它来了👇摹客，前端必备开发神器摹客作为新一代的产品协作设计平台，快速简单的智能标注和自动切图功能，将原本枯燥的体力活进行了极大的削减，而它所拥有的“绝技”却远远不止这些：
2022-03-17 19:16:07
3462
原创 web前端录屏技术方案与实现详解
随着互联网技术飞速发展，网页录屏技术已趋于成熟。例如可将录屏技术运用到在线考试中，实现远程监考、屏幕共享以及录屏等；而在我们开发人员研发过程中，对于部分偶发事件，异常监控系统仅仅只能告知程序出错，而不能清晰的告知错误的复现路径，而录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术，希望可以帮助你对网页录屏有一个初步认识。
2022-03-17 19:12:06
6405
原创 V8工作原理（一）：栈空间和堆空间：数据是如何存储的
对于前端开发者来说，JavaScript 的内存机制是一个不被经常提及的概念 ，因此很容易被忽视。特别是一些非计算机专业的同学，对内存机制可能没有非常清晰的认识，甚至有些同学根本就不知道 JavaScript 的内存机制是什么
2022-03-16 14:45:39
607
前端面试宝典V3.0.docx
2021-03-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人