- 博客(256)
- 收藏
- 关注
RSS订阅原创 ES5、ES6 如何实现继承
继承是指子类型具备父类型的属性和行为，使代码得以复用，做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。ES6 中 class 的继承、原型链继承、寄生组合式继承等。
2024-08-30 15:19:04
970
原创 jsx语法转换生成虚拟DOM
它的本质是什么吗？运行中它会做如何的转换？jsx内部又是怎么生成了虚拟DOM？虚拟DOM又是如何挂载到真实DOM上去的？
2024-08-08 19:41:48
657
原创 Fiber原理
在完成一部分任务之后，将控制权交回浏览器，让浏览器有时间在进行页面的渲染。从编码角度来看，Fiber 是 React 内部所定义的一种数据结构（链表），它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的虚拟 DOM。在这样的机制下，如果 JS 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿。，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber 节点。
2024-08-07 20:21:20
578
原创 JavaScript 异步编程
如果内部的 await 等待的异步任务之间没有依赖关系，且需要获取这些异步操作的结果，可以使用 Promise.allSettled() 同时执行这些任务并获得结果。setInterval 会按设定的时间间隔固定调用，其中 setInterval 里面的代码的执行时间也包含在内，所以实际间隔小于设定的时间间隔。发布/订阅模式是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。当后台运行的代码结束，就调用回调函数，通知工作已经完成。
2024-08-07 19:22:15
821
原创 二叉搜索树的第 k 大的节点
它是一棵空树，或者是具有下列性质的二叉树： 若它的左子树不空，则左子树上所有结点的值均小于它的根结点的值；若它的右子树不空，则右子树上所有结点的值均大于它的根结点的值；它的左、右子树也分别为二叉排序树。利用二叉搜索树的特性进行中序遍历。先遍历左节点，然后根节点，最后遍历右节点，得到的是一个递增序列，那么序列的倒序为递减序列。因此这道题我们可以转变为求二叉搜索树中序遍历倒序的第 k 个数。给定一棵二叉搜索树，请找出其中第 k 大的节点。思路还是二叉树的中序遍历，利用栈的方式进行遍历。
2024-08-01 19:37:28
236
原创 “八股文”在实际工作中是助力、阻力还是空谈？
八股文”一词在现代职场，特别是在IT行业中，引起了广泛的讨论。这种固定格式的知识体系在程序员面试中尤为常见，经常被用来考察应聘者对基础理论和技术框架的掌握程度。但在实际工作中，“八股文”的作用究竟是助力、阻力，还是纯粹的空谈？我们可以从几个不同的角度来探讨这一问题。
2024-07-31 11:38:59
446
原创 大文件的分片上传、断点续传及其相关拓展
这里套用唐僧的一句话，你不说我怎么知道呢。其实就是time-slice概念，React中Fiber架构的核心理念，利用浏览器的空闲时间，计算大的diff过程，中途又任何的高优先级任务，比如动画和输入，都会中断diff任务， 虽然整个计算量没有减小，但是大大提高了用户的交互体验。慢启动策略：由于文件大小不一，我们每个切片的大小设置成固定的也有点略显笨拙，我们可以参考TCP协议的慢启动策略， 设置一个初始大小，根据上传任务完成的时候，来动态调整下一个切片的大小， 确保文件切片的大小和当前网速匹配。
2024-07-25 17:06:53
972
原创 如何减少白屏的时间
DNS 解析是一个开销较大的过程，一次 DNS 解析通常需要耗费几十到上百毫秒，而在移动端网络或其他弱网环境下 DNS 解析延迟会更加严重，对 DNS 解析优化则可以减少这一步骤的耗时。DNS 解析优化是性能优化重要的一环，DNS 的作用是根据域名获取对应的 IP 地址，获取之后后续的 HTTP 流程才能进行下去。骨架屏是在需要等待加载内容的位置提供一些图形组合占位，提前给用户描述页面的基础结构，等待数据加载完成之后，再替换成实际的内容。骨架屏可以在数据加载前，提前渲染页面，缩短白屏时间，提升用户体验。
2024-07-24 16:26:00
558
原创 详细讲解下 算法中的 堆栈
在程序的内存管理上，堆内存是用于动态分配的内存。在图算法中，如 Dijkstra 算法和 Prim 算法，堆结构用来管理和更新节点的优先级，以快速找到下一个最短路径的候选节点或最小生成树的下一个节点。在图和树的遍历中，深度优先搜索（DFS）算法使用栈来记住每个分支上的节点，这样可以在达到末端后回溯到上一个节点。：从堆中删除元素通常指删除根节点，在删除后，通常将最后一个元素移动到根位置，然后通过下沉操作重新调整堆。：在堆中插入新元素时，新元素被放在树的末端，然后通过一系列上浮操作调整以保持堆的性质。
2024-07-18 20:37:45
544
原创 前端路由实现
对于Web开发来说，路由的实质是URL 到对应的处理程序的映射。前端路由根据具体实现方式的不同，可以分为Hash 路由 和 History 路由两种，这两种实现方式各有其优势和局限性。
2024-07-16 20:29:25
387
原创 垃圾回收机制
在垃圾回收阶段，检查并按需复制 From-Space 中的可访问对象到 To-Space 或老生代，并释放 From-Space 中的不可访问对象占用的内存空间；V8 对新生代内存空间采用了 Scavenger 算法，该算法使用了 semi-space（半空间） 的设计：将堆一分为二，始终只使用一半的空间：From-Space 为使用空间，To-Space 为空闲空间。整理是将可访问对象，往内存一端移动的过程。即新生代中的对象为存活时间较短的对象，老生代中的对象为存活时间较长或常驻内存的对象。
2024-07-09 16:05:26
758
原创 设计模式-访问者模式
访问者模式是一种行为设计模式，它允许你向一个对象结构（通常是一个复杂的对象组合）添加更多操作而无需修改这些对象的类。这种模式是通过创建一个外部的访问者类来实现的，这个类实现了对各种元素（组成对象的部分）的操作。访问者模式在 JavaScript 中可能不像在Java 或 C#中那样常见，因为JavaScript的灵活性允许我们在运行时添加或更改对象的行为。在处理复杂的对象结构，特别是当这些结构在多个不同的上下文中以不同的方式被处理时，访问者模式提供了一种清晰和可维护的方式来分离操作和对象本身。
2024-06-27 10:58:18
399
原创 useImmer和useState 有什么区别
useImmer 和 useState 是 React 中用于状态管理的两种钩子（hook），它们虽然在功能上相似，但在处理状态更新的方式以及适用的场景上有所不同。简约性 vs. 功能性：useState 适用于管理简单状态或者当你需要完全控制状态更新逻辑的场景。useImmer 适合复杂或深层嵌套的状态，简化代码并减少错误。性能：对于非常简单的状态更新，useState 可能会更高效一些，因为 useImmer 需要通过 Immer 库进行额外的处理来保证不可变性。易用性。
2024-06-26 18:52:18
448
原创 设计模式-模板模式
模板方法模式是一种行为设计模式，它在父类中定义了一个操作的算法框架，允许子类在不改变算法结构的情况下重定义算法的某些步骤。这种模式是基于继承的，通过抽象类将通用的代码抽取到超类中，同时通过具体类实现或者改写算法中的某些特定步骤。模板方法模式在JavaScript中可以用来定义一个操作中的算法骨架，同时允许子类提供某些步骤的具体实现。这种模式可以帮助我们将复杂类的通用行为抽象化，同时提供足够的灵活性来在子类中定义特定的行为。
2024-06-25 11:32:32
414
原创 设计模式-策略模式
策略模式是一种行为设计模式，它使得你可以在运行时选择算法或行为的模式。在JavaScript中，策略模式通常用于定义一系列算法，将每个算法封装起来，并使它们可以相互替换。策略模式使得算法可以独立于使用它们的客户端变化。在JavaScript中，策略模式通过定义一系列算法或行为，并在运行时根据需要进行切换，来提供灵活的控制。这种模式有助于代码的组织和维护，使得各种算法或行为的更改更加独立和灵活。
2024-06-25 11:25:32
525
原创 设计模式-状态模式
状态模式是一种行为设计模式，它允许一个对象在其内部状态改变时改变它的行为。这个模式将每个状态的行为封装到相应的类中，并使得对象可以在运行时切换状态。
2024-06-24 15:52:37
504
原创 设计模式-观察者模式
观察者模式是一种设计模式，它定义了对象之间的一对多依赖关系，使得当一个对象改变状态时，所有依赖于它的对象都会得到通知并自动更新。这种模式经常用于实现分布式事件处理系统，其中对象需要在状态改变时对其他对象发出通知。
2024-06-24 15:33:19
582
原创 设计模式-备忘录模式
备忘录模式是一种行为设计模式，允许捕获和存储一个对象的当前状态，并在以后将其恢复到这个状态。这种模式在功能如撤销机制或者保存和加载游戏状态的场景中非常有用。备忘录模式为状态的保存和恢复提供了一种优雅的解决方案，使得不会破坏原始类的封装性和责任分明。
2024-06-21 11:45:49
577
原创 设计模式-中介者模式
在这个示例中，ChatRoom是中介者，负责处理所有的消息发送逻辑。类代表各个组件，它们通过ChatRoom进行通信。这样，参与者之间的通信逻辑就被集中到了ChatRoom中，使得每个参与者的实现更简单，也更容易管理和扩展。
2024-06-20 11:32:46
432
原创 设计模式-解释器模式
解释器模式（Interpreter Pattern）是一种行为设计模式，它提供了评估语言的语法或表达式的方式。在解释器模式中，定义了一种语言的文法表示并通过解释这些表示来实现对语言的处理。这个模式在实现简单的脚本语言、表达式求值、语法解析等场景中非常有用。解释器模式的核心概念抽象表达式（Abstract Expression）：声明一个抽象的解释操作，这个接口是所有具体表达式的共有接口。终结符表达式（Terminal Expression）
2024-06-11 15:42:48
1126
原创 设计模式-命令模式
在 JavaScript 中，命令模式是一种行为设计模式，它将请求封装为一个对象，从而允许你用不同的请求、队列或者日志来参数化其他对象，支持可撤销的操作。命令模式的核心思想是将请求的发送者和接收者解耦，使得发送者不需要知道具体的接收者是谁以及具体的操作是什么。JavaScript 中的命令模式通过将请求封装为对象，实现了请求发送者与接收者的解耦。这种模式非常适合需要对操作进行参数化、排队执行或支持撤销和重做功能的场景。通过命令对象的抽象，系统可以灵活地扩展和维护，增强了代码的可读性和可。
2024-06-11 14:03:25
938
原创 设计模式-责任链模式
在 JavaScript 中，责任链模式是一种行为设计模式，它使多个对象都有机会处理请求，从而将请求的发送者和接收者解耦。这个模式将接收对象链在一起，并沿着这条链传递请求，直到一个对象处理它为止。责任链模式通过将请求的发送者和接收者解耦来提高系统的灵活性。在 JavaScript 中，通过使用类（或者构造函数）和方法链接，可以灵活地实现这一模式。这种模式特别适用于处理具有多个步骤或多级审批的场景，每个步骤可以独立于其他步骤变化，降低了系统各部分之间的耦合度。
2024-06-07 16:50:09
1055
原创 设计模式-代理模式
在JavaScript中，代理模式是一种结构型设计模式，它为其他对象提供一个代理或占位符以控制对这个对象的访问。这种模式是用来创建具有代理功能的对象的，使得客户无需修改代码就能使用代理对象来间接访问某个对象。使用代理模式可以实现多种功能，如安全控制、延迟初始化、网络请求、日志记录等代理模式在 JavaScript 中是非常有用的，特别是在现代前端框架和Node.js中。它提供了一个强大的方式来增强程序的灵活性，加强对对象的访问控制。通过使用。
2024-06-07 15:11:07
591
原创 程序员应该有什么职业素养？
职业素养是职业成功的重要组成部分，尤其对于程序员来说，除了专业技能外，一系列的非技术职业素养同样关键。这些素养帮助程序员更好地适应快速变化的工作环境提升个人价值，并与他人有效合作。持续学习和适应新技术技术不断进步，新的工具和框架层出不穷。程序员需要保持好奇心和学习热情，定期通过在线课程、技术会议、专业书籍等方式更新自己的知识库。例如，学习新出现的编程语言特性，或者掌握如何使用最近流行的开发工具和框架。解决问题的能力程序员的核心职责是解决问题。
2024-06-04 11:32:38
289
原创 设计模式-享元模式
享元模式（Flyweight Pattern）是一种用于效率和内存优化的结构型设计模式。这种模式通过共享尽可能多的相似对象来减少内存使用，特别适合于处理大量对象时，每个对象都消耗大量内存的场景。总的来说，享元模式在处理大量相似对象时提供了一种有效的内存优化策略。然而，它的使用应当谨慎，需要正确评估和设计内部状态和外部状态，以确保不会对应用程序的逻辑造成负面影响。在 JavaScript 等动态语言中，享元模式可以帮助管理内存消耗，尤其是在客户端浏览器环境中，这对提升用户体验和应用性能都是非常有益的。
2024-05-29 11:17:16
901
原创 设计模式-外观模式
外观模式（Facade Pattern）是软件工程中用于提供一个统一的接口来访问复杂子系统的结构型设计模式。这个模式的主要目的是隐藏系统的复杂性，并为客户端提供一个可以访问系统的接口。它通常涉及一个单一的类，这个类提供了客户端所需的方法，而这些方法则将客户端的请求委托给系统中的一个或多个模块处理。外观模式是一个非常实用的设计模式，适用于那些需要定义简单接口来访问复杂系统的情况，尤其是在整合和维护大型软件系统时非常有效。在实际应用中，它帮助我们隐藏了系统的复杂性，提供了一个清晰和简单的接口给系统的使用者。
2024-05-29 10:18:22
932
原创 React 为什么使用map来渲染列表 而不是其他循环方法
总之，.map()在React中被推荐用于渲染列表主要是因为它符合React的声明式和函数式编程范式，能够高效地从数据生成组件，并且代码更加简洁、易于维护。当然，在某些特定情况下，可能会需要使用for循环或其他方法，但这些情况比较少见。
2024-05-27 17:28:03
615
1
原创 封装公用组件-小程序登陆（Taro）
可以包裹在组件外面，来判断是否登陆，如果没有登陆，即可跳转登陆页面，公用组件state = {};//登陆后存起来的信息.data;if (!cookies?.length) {content: '请先登录',});if (!res?return;url: '登陆文件的地址',});render() {使用组件return (
2024-05-24 16:38:49
267
原创 设计模式-适配器模式
适配器模式（Adapter Pattern）是一种结构型设计模式，它允许不兼容的接口能够一起工作。这种模式通常用于使现有的类与其他类一起工作，而无需修改它们的源代码。在 JavaScript 中，适配器模式可以用来确保不同的类或对象之间能够通过一个统一的接口进行交互。适配器模式使得你能够将不兼容的接口桥接到一起工作，而无需改动现有的代码。这提供了很大的灵活性和更简洁的集成方式。在 JavaScript 中，适配器通常是通过创建新的类（适配器），继承或组合目标类或接口，并在内部调用待适配类的方法来实现的。
2024-05-23 16:18:11
797
原创 前端模块化规范
ESM 加载模块的方式同样取决于所处的环境，Node.js 同步加载，浏览器端异步加载。UMD 加载模块的方式取决于所处的环境，Node.js 同步加载，浏览器端异步加载。文件都是独立的模块，每个模块都有独立的作用域，模块里的本地变量都是私有的。规范下的代码不通用的问题，同时还支持将模块挂载到全局，是跨平台的解决方案。通过异步的方式加载模块，每加载一个模块实际就是加载对应的 JS 文件。通过异步的方式加载模块，每加载一个模块实际就是加载对应的 JS 文件。，降低学习使用成本，提高开发效率。
2024-04-26 17:01:14
839
原创 谈谈微前端
是一种架构理念，它将较大的前端应用拆分为若干个可以独立交付的前端应用。在合理拆分应用的前提下，微前端能降低应用之间的耦合度，提升每个团队的自治能力。另外，在保证子应用和主应用同源的前提下，将子应用的路由变化同步到主应用中，从而保证刷新页面后，路由地址正常。开发，可以天然契合微前端的一些特性：技术栈无关，应用间隔离。方案引入子应用的好处是浏览器兼容性强，接入成本低，样式及脚本天然隔离。，实现运行时依赖共享的能力。的宿主环境，可以采用快照的思路：对进入子应用前的。合理划分应用，可以避免频繁的跨应用通信。
2024-04-17 17:05:57
670
原创 浏览器的重排重绘
以及对布局信息的访问等，都有可能导致重排和重绘。而重排和重绘的过程在主线程中进行，这意味着不合理的重排重绘会导致渲染卡顿，用户交互滞后等性能问题。图中所示步骤为浏览器渲染的关键路径。浏览器从获取文档、样式、脚本等内容，到最终渲染结果到屏幕上，通常需要经过如图所示的步骤。被修改，会导致浏览器重复执行图中的步骤。步骤），从而降低浏览器渲染耗费的时间，将内容尽快渲染到屏幕上。面板来查看产生重排重绘任务占用主线程的情况和调用代码。获取布局信息时，会导致重排。的过程，且重排必定导致重绘。理想情况下，浏览器需要在。
2024-04-10 17:07:23
423
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人