一步步带你搞懂虚拟 DOM 的工作原理

2022-07-20
阅读 13 分钟
7.7k
React 和 Vue 中都有虚拟 DOM 的概念,我们应该如何理解和掌握虚拟 DOM 的精髓呢?我推荐大家学习 Snabbdom 这个项目。Snabbdom 是一个虚拟 DOM 实现库,推荐的原因一是代码比较少,核心代码只有几百行;二是 Vue 就是借鉴此项目的思路来实现虚拟 DOM 的;三是这个项目的设计/实现和扩展思路值得参考。
封面图

webpack 拆包:关于 splitChunks 的几个重点属性解析

2022-07-11
阅读 9 分钟
10.3k
先来举个简单的栗子,wepack 设置中有 3 个入口文件:a.js、b.js 和 c.js,每个入口文件都同步 import 了 m1.js,不设置 splitChunks,配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容,打包输出是这样的:
封面图

TypeScript 中令人迷惑的对象类型:Object、{} 和 object

2022-06-17
阅读 1 分钟
1.1k
JS 中所有对象的原型链缺省都继承自 Object.prototype,原始值有包装类型。所以 number、string、boolean、symbol、对象和函数都可以赋值给 Object 类型。
封面图

你可能不了解的 Promise 微任务类型

2022-05-27
阅读 4 分钟
2.9k
先来看一道示例题。按照以往的理解,我以为输出顺序是 2 1 3 4。然后通过调试发现 promise1 在初始化后状态依然是 pending,感觉自己在理解 Promise 微任务方面还是存在不足。研究了下 ECMA 规范,终于把这个问题搞清楚了。
封面图

这篇手写 Promise 你一定要康康

2022-04-11
阅读 10 分钟
2.5k
最近重温了一下 Q/Promise 的设计讲解,结合自己的理解和一些小优化,决定也来写一篇手写 Promise 的文章。本文的内容适合对 Promise 的使用有一定了解的童鞋,因为过程中不会过多解释 Promise 的基础操作。我们从一个基础版本开始,渐进式地完成这个 Promise,在过程中分享我的理解和观点。内容可能有点长,废话不多说...

把递归函数改为非递归的通用套路

2021-09-17
阅读 6 分钟
4.4k
这里指的通用套路是把递归执行改为在一个函数中循环执行。出于好奇心想找出一种把递归改为非递归的通用方式,并学习其中的思路。在网上找了几篇文章,结合函数调用栈的理解,感觉自己总结的应该比较全面了,所以记录下来跟大家交流下。

技巧与思维可兼得——读 TypeScript of Redux 有感

2021-01-14
阅读 8 分钟
2.7k
Redux 是一个非常经典的状态管理库,在 2019 年接近年底的时候这个项目用 TypeScript 重写了。网上有很多分析 Redux JavaScript 代码实现的文章,然而 TypeScript 部分的却很少。我在看重写的 TypeScript 代码时发现有很多地方比较有意思,也启发我提炼了一些东西,所以整理成了这篇博客,欢迎一起来讨论和学习。

Vue2响应式原理解析(完结篇):侦听属性和总结

2020-10-05
阅读 4 分钟
1.7k
Hi 大家好,假期快乐鸭~ 咳咳,在前面两篇我们从设计出发讲了一下 Vue2 的响应式原理和实现,还有计算属性的详细解析等等。这一篇呢就是这个系列的最后一篇了,我们来聊一下侦听属性和 vm.$watch,再回到设计来总结一下 Vue2 的响应式。如果没有看过前面两篇的朋友先看了前面的再来哈,传送门:Vue2响应式原理解析(一)...

Vue2响应式原理解析(二):计算属性揭秘

2020-08-30
阅读 5 分钟
3.2k
Hi,大家好~ 在上一篇 Vue2响应式原理解析(一):从设计出发 中我讲了一下 Vue2 是如何抽象和设计响应式的, data 是如何实现响应式的,包括依赖收集和双向依赖记录的设计思路和关键代码。在这一篇中,我们来一起康康 Vue 中非常强大的响应式功能:计算属性。我主要会从功能需求的角度来分析计算属性的实现和关键代码,...

Vue2响应式原理解析(一):从设计出发

2020-08-17
阅读 5 分钟
4.2k
Vue 的响应式系统是 Vue 最有意思的特性之一,data 只需要返回一个普通的字面量对象,在运行时修改它的属性就会引起界面的更新。现在都是数据驱动界面开发,这种设计对于程序员开发来说非常爽,关注点只用放在数据变化的逻辑上。并且 Vue 把这个特性抽象成了一个独立的 observer 模块,可以单独剥离使用,比如小程序开发...

微信小程序开发中自动更新 iconfont 样式文件的小工具:mp-iconfont-cli

2020-04-26
阅读 1 分钟
2.4k
在微信小程序开发中,使用 iconfont 需要引用本地的文件。每次 iconfont 项目发生变更时,需要去下载最新的 css 文件,并且还要手动删除掉里面对于小程序无用的 src url(*) 兼容节点,然后保存为 wxss 文件。整个过程比较繁琐,这个小工具可以帮你自动完成这些工作。项目地址:[链接]

带你撸一个实用的 hook 模块

2019-09-12
阅读 4 分钟
3k
本质上来说 hook 模式类似与责任链模式,hook 建立了特定事件与事件处理程序之间的一对多关系,当事件需要处理时,沿着事件处理程序链条挨个执行。但不同的设计可能会有不同的处理行为,在本文中,链条靠前的处理程序有权决定是否需要交给下个处理程序接着处理还是直接返回最终结果。

Babel 7 转码的正确姿势

2019-08-16
阅读 3 分钟
2.5k
Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法,升级到 Babel 7 的时候又折腾了一把,所以决定把自己的心得和理解记录下来,希望能帮助到有需要的童鞋。

小技巧:字符串数组初始化

2019-08-14
阅读 1 分钟
2.8k
后续的处理是需要遍历这整个数组去完成某些功能,不关心这些字符串的相对顺序。但我们在维护这个字符串数组的时候会感觉有些不方便,比如太长、没有分类等。

掌握 Javascript 类型转换:隐式转换救救孩子

2019-06-13
阅读 5 分钟
2.7k
在上一篇中我们聊过了 JS 类型转换的规则和我发现的一些常见书籍中关于类型转换的一些小错误,当碰到显示类型转换的时候大家可以按照这些规则去拆解出答案。但 JS 中存在一些很隐晦的隐式类型转换,这一篇就来谈下我对隐式类型转换的一些总结。

掌握 Javascript 类型转换:从规则开始

2019-06-06
阅读 4 分钟
2.8k
Javascript 里的类型转换是一个你永远绕不开的话题,不管你是在面试中还是工作写代码,总会碰到这类问题和各种的坑,所以不学好这个那是不行滴。关于类型转换我也看过不少的书和各种博客、帖子,也查过规范和做过各种测试,这里就谈谈我的总结和理解吧。

Web 前端单元测试到底要怎么写?看这一篇就够了

2018-08-08
阅读 15 分钟
23.7k
随着 Web 应用的复杂程度越来越高,很多公司越来越重视前端单元测试。我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用,但在实际项目中单元测试要怎么下手?测试用例应该包含哪些具体内容呢?

Babel转码关于 "super" 的注意事项

2018-07-11
阅读 3 分钟
2.4k
这位楼主说他觉得 this.x 的值不是3,下面有网友说把代码粘贴到 chrome 控制台一试就是这结果没错,后来楼主说是他想错了。我也顺便把代码粘贴到 chome 下执行后答案也确实是3。

With TypeScript 2.8+ :更好的 React 组件开发模式

2018-06-12
阅读 11 分钟
6.4k
近两年来一直在关注 React 开发,最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程,但如何将 TypeScript 更好地应用到 React 组件开发模式的文章却几乎没有(也可能是我没找到),特别是 TS 的一些新特性,如:条件类型、条件类型中的类型引用等。这些新特性如何应用到 React 组件开发?没...