详解 Webpack devtools

2022-10-08
阅读 7 分钟
1.3k
最近在开发一个低代码平台,主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发,而第三方组件想要接入平台,需要经过我们特定的打包工具来 build。构建之后的组件,会合并成单个的 js 文件,而且代码会被压缩会混淆,这个时候如果需要调试,那就会极其痛苦。想要有一个好的调试环境,就要涉及 SourceMap 的输出,...

什么是 LFU 算法?

2022-03-28
阅读 3 分钟
3.6k
上次的文章介绍了 LRU 算法,今天打算来介绍一下 LFU 算法。在上篇文章中有提到, LFU(Least frequently used:最少使用)算法与 LRU 算法只是在淘汰策略上有所不同,LRU 倾向于保留最近有使用的数据,而 LFU 倾向于保留使用频率较高的数据。

什么是 LRU 算法?

2022-03-14
阅读 3 分钟
5.7k
缓存 是我们写代码过程中常用的一种手段,是一种空间换时间的做法。就拿我们经常使用的 HTTP 协议,其中也存在强缓存和协商缓存两种缓存方式。当我们打开一个网站的时候,浏览器会查询该请求的响应头,通过判断响应头中是否有 Cache-Control、Last-Modified、ETag 等字段,来确定是否直接使用之前下载的资源缓存,而不是...

关于 Promise 的执行顺序

2022-01-21
阅读 3 分钟
5.2k
最近看到一个 Promise 相关的很有意思的代码: {代码...} 第一次看到这个代码的时候,以为的输出结果会是:1,2,3,4,但是被实际的输出结果打脸 。如图所示,实际的输出结果为:1,2,4,3。代码分析为了搞清楚实际的输出结果为什么是:1,2,4,3,我们来一步步分析代码的执行。我们知道,Promise 实例化时,传入的回调会立即...

新一代的编译工具 SWC

2022-01-13
阅读 4 分钟
10.8k
最近前端圈掀起了一阵 rust 风,凡是能用 rust 重写的前端工具就用 rust 重写,今天介绍的工具就是通过 rust 实现的 babel:swc,一个将 ES6 转化为 ES5 的工具。

你不知道的 Node.js Util

2021-11-16
阅读 6 分钟
4.4k
从类型判断说起在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题。举几个简单的🌰: {代码...} 后来,大家发现可以使用 Object.prototype.toString() 方法来进行变量类型的判断。 {代码...} 对 toString() 方法进行代理,可以得到一个类型字符串,我们就可以...

介绍一个请求库 — Undici

2021-10-20
阅读 5 分钟
9.1k
在浏览器中,如果想发起一个请求,我们以前会使用到 xhr,不过这种底层 api,往往调用方式比较简陋。为了提高开发效率, jQuery 的 $.ajax 可能是最好的选择,好在后来出现了更加现代化的 fetch api 。

用 JavaScript 做数独

2021-09-06
阅读 8 分钟
5.2k
最近看到老婆天天在手机上玩数独,突然想起 N 年前刷 LeetCode 的时候,有个类似的算法题(37.解数独),是不是可以把这个算法进行可视化。说干就干,经过一个小时的实践,最终效果如下:怎么解数独解数独之前,我们先了解一下数独的规则:数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每...
封面图

React 中 setState 是一个宏任务还是微任务?

2021-08-03
阅读 5 分钟
7k
能问出这个问题,面试官应该对 React 不是很了解,也是可能是看到面试者简历里面有写过自己熟悉 React,面试官想通过这个问题来判断面试者是不是真的熟悉 React 🤣。

在命令行里也能用 React

2021-07-29
阅读 10 分钟
4.1k
react 模块主要提供了组件的生命周期、虚拟 DOM Diff、Hooks 等能力,以及将 JSX 转换为虚拟 DOM 的 h 方法。而 react-dom 主要对外暴露一个 render 方法,将虚拟 DOM 转化为真实 DOM。

JavaScript 异步编程史

2021-06-02
阅读 5 分钟
2.8k
早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总是会让人觉得 Web 应用的体验感比不上客户端应用。

Web Components 上手指南

2021-02-24
阅读 9 分钟
5.7k
现在的前端开发基本离不开 React、Vue 这两个框架的支撑,而这两个框架下面又衍生出了许多的自定义组件库:Element(Vue)Ant Design(React)这些组件库的出现,让我们可以直接使用已经封装好的组件,而且在开源社区的帮助下,出现了很多的模板项目( vue-element-admin、Ant Design Pro ),能让我们快速的开始一个项...
封面图

普普通通打工人的2020

2021-01-04
阅读 4 分钟
3.9k
今天早上起来,看了下日期,没想到 2020 只剩下两天了,过去得如此快,甚至都还没想好怎么跨年😥。本来想看看之前立的 flag 有多少实现了,结果发现自己今年根本没立 flag,哈哈哈。仔细回顾了一下今年,发现还是挺丰富的,做了几件大事:

Vue3 Teleport 组件的实践及原理

2020-12-01
阅读 7 分钟
6.2k
Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件:Teleport。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。

CommonJS 是如何导致打包后体积增大的?

2020-11-18
阅读 5 分钟
4.4k
本文概要:为了确保打包工具(webpack之类的)能够对你的项目代码进行优化,请避免在项目中使用 CommonJS 模块,并且整个项目都应该使用 ESM(ECMAScript Module) 的模块语法。

Vue3 模板编译优化

2020-11-11
阅读 8 分钟
4.5k
Vue3 正式发布已经有一段时间了,前段时间写了一篇文章(《Vue 模板编译原理》)分析 Vue 的模板编译原理。今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异,以及 VDOM 下 Diff 算法的优化。

小程序依赖分析实践

2020-11-02
阅读 12 分钟
5.4k
因为最近一直在做小程序业务,而且小程序对包体大小特别敏感,所以就想着能不能做一个类似的工具,用来查看当前小程序各个主包与分包之间的依赖关系。经过几天的折腾终于做出来了,效果如下:

React 架构的演变 - Hooks 的实现

2020-10-27
阅读 6 分钟
5k
React Hooks 可以说完全颠覆了之前 Class Component 的写法,进一步增强了状态复用的能力,让 Function Component 也具有了内部状态,对于我个人来说,更加喜欢 Hooks 的写法。当然如果你是一个使用 Class Component 的老手,初期上手时会觉得很苦恼,毕竟之前沉淀的很多 HOC、Render Props 组件基本没法用。而且之前的 ...

Vue 3 的组合 API 如何请求数据?

2020-10-20
阅读 11 分钟
26.3k
之前在学习 React Hooks 的过程中,看到一篇外网文章,通过 Hooks 来请求数据,并将这段逻辑抽象成一个新的 Hooks 给其他组件复用,我也在我的博客里翻译了一下:《在 React Hooks 中如何请求数据?》,感兴趣可以看看。虽然是去年的文章,在阅读之后一下子就掌握了 Hooks 的使用方式,而且数据请求是在业务代码中很常用...

React 架构的演变 - 更新机制

2020-10-12
阅读 19 分钟
5.4k
前面的文章分析了 Concurrent 模式下异步更新的逻辑,以及 Fiber 架构是如何进行时间分片的,更新过程中的很多内容都省略了,评论区也收到了一些同学对更新过程的疑惑,今天的文章就来讲解下 React Fiber 架构的更新机制。

React 架构的演变 - 从递归到循环

2020-09-30
阅读 10 分钟
4.7k
这篇文章是 React 架构演变的第二篇,上一篇主要介绍了更新机制从同步修改为异步,这一篇重点介绍 Fiber 架构下通过循环遍历更新的过程,之所以要使用循环遍历的方式,是因为递归更新过程一旦开始就不能暂停,只能不断向下,直到递归结束或者出现异常。

React 架构的演变 - 从同步到异步

2020-09-24
阅读 16 分钟
5.1k
写这篇文章的目的,主要是想弄懂 React 最新的 fiber 架构到底是什么东西,但是看了网上的很多文章,要不模棱两可,要不就是一顿复制粘贴,根本看不懂,于是开始认真钻研源码。钻研过程中,发现我想得太简单了,React 源码的复杂程度远超我的想象,于是打算分几个模块了剖析,今天先讲一讲 React 的更新策略从同步变为异...

Webpack5 跨应用代码共享 - Module Federation

2020-09-15
阅读 11 分钟
16.6k
Webpack 5 的消息尽管已经出来了许久,但是正式版一直还未发布。Webpack 5 的 ChangeLog 中,除了常规的性能优化、编译提速之外,有一个比较让人期待的功能就是 Module Federation。Module Federation 可以强行翻译成「模块联邦」,但是听起来很是怪异,我在某个前端群也抛出了这个问题,没想到大家的回复也是五花八门。...

面向未来的前端构建工具-vite

2020-09-08
阅读 17 分钟
6.8k
如果近期你有关注 Vue 的动态,就能发现 Vue 作者最近一直在捣鼓的新工具 vite。vite 1.0 目前已经进入了 rc 版本,马上就要正式发布 1.0 的版本了。几个月前,尤雨溪就已经在微博介绍过了 vite ,是一个基于浏览器原生 ESM 的开发服务器。

手把手教你实现 Promise

2020-09-02
阅读 15 分钟
9.6k
很多 JavaScript 的初学者都曾感受过被回调地狱支配的恐惧,直至掌握了 Promise 语法才算解脱。虽然很多语言都早已内置了 Promise ,但是 JavaScript 中真正将其发扬光大的还是 jQuery 1.5 对 $.ajax 的重构,支持了 Promise,而且用法也和 jQuery 推崇的链式调用不谋而合。后来 ES6 出世,大家才开始进入全民 Promise ...

你不知道的 TypeScript 高级类型

2020-08-28
阅读 8 分钟
21.4k
对于有 JavaScript 基础的同学来说,入门 TypeScript 其实很容易,只需要简单掌握其基础的类型系统就可以逐步将 JS 应用过渡到 TS 应用。

从零开始实现VS Code基金插件

2020-08-25
阅读 15 分钟
4.9k
随着7月一波牛市行情,越来越多的人投身A股行列,但是股市的风险巨大,有人一夜暴富,也有人血本无归,所以对于普通人来说基金定投是个不错的选择,本人也是基金定投的一枚小韭菜。

Vue模板编译原理

2020-08-21
阅读 16 分钟
4.2k
写过 Vue 的同学肯定体验过, .vue 这种单文件组件有多么方便。但是我们也知道,Vue 底层是通过虚拟 DOM 来进行渲染的,那么 .vue 文件的模板到底是怎么转换成虚拟 DOM 的呢?这一块对我来说一直是个黑盒,之前也没有深入研究过,今天打算一探究竟。

前端模块化的今生

2019-12-02
阅读 8 分钟
7.3k
众所周知,早期 JavaScript 原生并不支持模块化,直到 2015 年,TC39 发布 ES6,其中有一个规范就是 ES modules(为了方便表述,后面统一简称 ESM)。但是在 ES6 规范提出前,就已经存在了一些模块化方案,比如 CommonJS(in Node.js)、AMD。ESM 与这些规范的共同点就是都支持导入(import)和导出(export)语法,只是...

前端模块化的前世

2019-10-09
阅读 10 分钟
5.6k
随着前端项目的越来越庞大,组件化的前端框架,前端路由等技术的发展,模块化已经成为现代前端工程师的一项必备技能。无论是什么语言一旦发展到一定地步,其工程化能力和可维护性势必得到相应的发展。