SF
自然醒的笔记本
自然醒的笔记本
注册登录
关注博客
注册登录
主页
关于
RSS
详解 Webpack devtools
Shenfq
2022-10-08
阅读 7 分钟
1.6k
最近在开发一个低代码平台,主要用于运营搭建 H5 活动。这中间涉及到第三方组件的开发,而第三方组件想要接入平台,需要经过我们特定的打包工具来 build。构建之后的组件,会合并成单个的 js 文件,而且代码会被压缩会混淆,这个时候如果需要调试,那就会极其痛苦。想要有一个好的调试环境,就要涉及 SourceMap 的输出,...
什么是 LFU 算法?
Shenfq
2022-03-28
阅读 3 分钟
3.9k
上次的文章介绍了 LRU 算法,今天打算来介绍一下 LFU 算法。在上篇文章中有提到, LFU(Least frequently used:最少使用)算法与 LRU 算法只是在淘汰策略上有所不同,LRU 倾向于保留最近有使用的数据,而 LFU 倾向于保留使用频率较高的数据。
什么是 LRU 算法?
Shenfq
2022-03-14
阅读 3 分钟
6.1k
缓存 是我们写代码过程中常用的一种手段,是一种空间换时间的做法。就拿我们经常使用的 HTTP 协议,其中也存在强缓存和协商缓存两种缓存方式。当我们打开一个网站的时候,浏览器会查询该请求的响应头,通过判断响应头中是否有 Cache-Control、Last-Modified、ETag 等字段,来确定是否直接使用之前下载的资源缓存,而不是...
关于 Promise 的执行顺序
Shenfq
2022-01-21
阅读 3 分钟
5.7k
最近看到一个 Promise 相关的很有意思的代码: {代码...} 第一次看到这个代码的时候,以为的输出结果会是:1,2,3,4,但是被实际的输出结果打脸 。如图所示,实际的输出结果为:1,2,4,3。代码分析为了搞清楚实际的输出结果为什么是:1,2,4,3,我们来一步步分析代码的执行。我们知道,Promise 实例化时,传入的回调会立即...
新一代的编译工具 SWC
Shenfq
2022-01-13
阅读 4 分钟
11.9k
最近前端圈掀起了一阵 rust 风,凡是能用 rust 重写的前端工具就用 rust 重写,今天介绍的工具就是通过 rust 实现的 babel:swc,一个将 ES6 转化为 ES5 的工具。
全新的 Vue3 状态管理工具:Pinia
Shenfq
2021-12-15
阅读 4 分钟
14.3k
Vue3 发布已经有一段时间了,它采用了新的响应式系统,而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统,官方的状态管理库 Vuex 也在适配中,为此官方提出了一个 Vuex 5 的全新提案。
你不知道的 Node.js Util
Shenfq
2021-11-16
阅读 6 分钟
4.5k
从类型判断说起在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题。举几个简单的🌰: {代码...} 后来,大家发现可以使用 Object.prototype.toString() 方法来进行变量类型的判断。 {代码...} 对 toString() 方法进行代理,可以得到一个类型字符串,我们就可以...
介绍一个请求库 — Undici
Shenfq
2021-10-20
阅读 5 分钟
10k
在浏览器中,如果想发起一个请求,我们以前会使用到 xhr,不过这种底层 api,往往调用方式比较简陋。为了提高开发效率, jQuery 的 $.ajax 可能是最好的选择,好在后来出现了更加现代化的 fetch api 。
用 JavaScript 做数独
Shenfq
2021-09-06
阅读 8 分钟
5.7k
最近看到老婆天天在手机上玩数独,突然想起 N 年前刷 LeetCode 的时候,有个类似的算法题(37.解数独),是不是可以把这个算法进行可视化。说干就干,经过一个小时的实践,最终效果如下:怎么解数独解数独之前,我们先了解一下数独的规则:数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每...
使用 GTD 优化自己的工作和生活
Shenfq
2021-08-11
阅读 3 分钟
3.7k
算起来工作已经四个年头了,刚开始工作就在使用 TODO 工具,比如 OneNote、奇妙清单(现在叫:微软 TODO)、滴答清单。但是,在用的过程中很多 TODO 直到项目结束了,依然是 TODO。
你给开源项目提过 PR 吗?
Shenfq
2021-08-05
阅读 3 分钟
4.5k
这件事还得从好几年前(2019年)说起,那时候在折腾一个虚拟 DOM 的玩具(参考之前的文章:🔗虚拟DOM到底是什么?),作为一个标准的前端工程,构建工具、Lint 工具、代码格式化都是必不可少的。
React 中 setState 是一个宏任务还是微任务?
Shenfq
2021-08-03
阅读 5 分钟
7.7k
能问出这个问题,面试官应该对 React 不是很了解,也是可能是看到面试者简历里面有写过自己熟悉 React,面试官想通过这个问题来判断面试者是不是真的熟悉 React 🤣。
在命令行里也能用 React
Shenfq
2021-07-29
阅读 10 分钟
4.4k
react 模块主要提供了组件的生命周期、虚拟 DOM Diff、Hooks 等能力,以及将 JSX 转换为虚拟 DOM 的 h 方法。而 react-dom 主要对外暴露一个 render 方法,将虚拟 DOM 转化为真实 DOM。
Webpack 热更新原理
Shenfq
2021-07-22
阅读 12 分钟
8.9k
用过 webpack 的同学应该都知道,有一个特别好用的『热更新』,在不刷新页面的情况下,就能将代码推到浏览器。今天的文章将会探寻一下 webpack 热更新的秘密。如何配置热更新我们先安装一些我们需要的包: {代码...} 然后,我们需要弄明白,webpack 从版本 webpack@4 之后,需要通过 webpack CLI 来启动服务,提供了打包...
我与思否的回忆丨思否 9 周年
Shenfq
2021-06-16
阅读 2 分钟
2.4k
最近听说思否已经九周年了,打开了我在的个人主页,发现第一次加入思否还是 2016 年的事情,那个时候还是大三,每天都在学校埋头苦学前端技术。
JavaScript 异步编程史
Shenfq
2021-06-02
阅读 5 分钟
2.9k
早期的 Web 应用中,与后台进行交互时,需要进行 form 表单的提交,然后在页面刷新后给用户反馈结果。在页面刷新过程中,后台会重新返回一段 HTML 代码,这段 HTML 中的大部分内容与之前页面基本相同,这势必造成了流量的浪费,而且一来一回也延长了页面的响应时间,总是会让人觉得 Web 应用的体验感比不上客户端应用。
下一代的模板引擎:lit-html
Shenfq
2021-04-01
阅读 9 分钟
10.9k
其实早在 Google 提出 Web Components 的时候,就在此基础上发布了 Polymer 框架。只是这个框架一直雷声大雨点小,内部似乎也对这个项目不太满意,然后他们团队又开发了两个更加现代化的框架(或者说是库?): lit-html、lit-element,今天的文章会重点介绍 lit-html 的用法以及优势。
读《贫穷的本质》引发的一些思考
Shenfq
2021-03-09
阅读 3 分钟
3.9k
最近在看了 《贫穷的本质》这本书,然后结合书中的观点和最近工作的一些思考,写了这么一篇文章,和大家分享一下我的一些想法。书的最后,给大家总结了五点,穷人之所以一直贫穷的原因,因为看的是翻译的书籍,这里我用我自己的话来复述一下:穷人通常缺少信息来源,相信那些错误的事情;穷人在生活中有更多需要考虑的因...
Web Components 上手指南
Shenfq
2021-02-24
阅读 9 分钟
6k
现在的前端开发基本离不开 React、Vue 这两个框架的支撑,而这两个框架下面又衍生出了许多的自定义组件库:Element(Vue)Ant Design(React)这些组件库的出现,让我们可以直接使用已经封装好的组件,而且在开源社区的帮助下,出现了很多的模板项目( vue-element-admin、Ant Design Pro ),能让我们快速的开始一个项...
MobX 上手指南
Shenfq
2021-01-25
阅读 5 分钟
9.2k
之前用 Redux 比较多,一直听说 Mobx 能让你体验到在 React 里面写 Vue 的感觉,今天打算尝试下 Mobx 是不是真的有写 Vue 的感觉。
介绍两种 CSS 方法论
Shenfq
2021-01-06
阅读 5 分钟
4.8k
说起 CSS 命名规范,大家应该都很熟悉,或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法,旨在帮助开发人员创建更好的且结构一致的 CSS 模块。
Node.js 服务性能翻倍的秘密(二)
Shenfq
2021-01-05
阅读 7 分钟
4.2k
前一篇文章介绍了 fastify 通过 schema 来序列化 JSON,为 Node.js 服务提升性能的方法。今天的文章会介绍 fastify 使用的路由库,翻阅其源码(lib/route.js)可以发现,fastify 的路由库并不是内置的,而是使用了一个叫做 find-my-way 的路由库。
Node.js 服务性能翻倍的秘密(一)
Shenfq
2021-01-05
阅读 7 分钟
4.9k
用过 Node.js 开发过的同学肯定都上手过 koa,因为他简单优雅的写法,再加上丰富的社区生态,而且现存的许多 Node.js 框架都是基于 koa 进行二次封装的。但是说到性能,就不得不提到一个知名框架: fastify ,听名字就知道它的特性就是快,官方给出的Benchmarks甚至比 Node.js 原生的 http.Server 还要快。
普普通通打工人的2020
Shenfq
2021-01-04
阅读 4 分钟
4k
今天早上起来,看了下日期,没想到 2020 只剩下两天了,过去得如此快,甚至都还没想好怎么跨年😥。本来想看看之前立的 flag 有多少实现了,结果发现自己今年根本没立 flag,哈哈哈。仔细回顾了一下今年,发现还是挺丰富的,做了几件大事:
Vue3 Teleport 组件的实践及原理
Shenfq
2020-12-01
阅读 7 分钟
6.8k
Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件:Teleport。这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置。
CommonJS 是如何导致打包后体积增大的?
Shenfq
2020-11-18
阅读 5 分钟
4.6k
本文概要:为了确保打包工具(webpack之类的)能够对你的项目代码进行优化,请避免在项目中使用 CommonJS 模块,并且整个项目都应该使用 ESM(ECMAScript Module) 的模块语法。
Vue3 模板编译优化
Shenfq
2020-11-11
阅读 8 分钟
4.7k
Vue3 正式发布已经有一段时间了,前段时间写了一篇文章(《Vue 模板编译原理》)分析 Vue 的模板编译原理。今天的文章打算学习下 Vue3 下的模板编译与 Vue2 下的差异,以及 VDOM 下 Diff 算法的优化。
小程序依赖分析实践
Shenfq
2020-11-02
阅读 12 分钟
5.6k
因为最近一直在做小程序业务,而且小程序对包体大小特别敏感,所以就想着能不能做一个类似的工具,用来查看当前小程序各个主包与分包之间的依赖关系。经过几天的折腾终于做出来了,效果如下:
React 架构的演变 - Hooks 的实现
Shenfq
2020-10-27
阅读 6 分钟
5.3k
React Hooks 可以说完全颠覆了之前 Class Component 的写法,进一步增强了状态复用的能力,让 Function Component 也具有了内部状态,对于我个人来说,更加喜欢 Hooks 的写法。当然如果你是一个使用 Class Component 的老手,初期上手时会觉得很苦恼,毕竟之前沉淀的很多 HOC、Render Props 组件基本没法用。而且之前的 ...
Vue 3 的组合 API 如何请求数据?
Shenfq
2020-10-20
阅读 11 分钟
27.8k
之前在学习 React Hooks 的过程中,看到一篇外网文章,通过 Hooks 来请求数据,并将这段逻辑抽象成一个新的 Hooks 给其他组件复用,我也在我的博客里翻译了一下:《在 React Hooks 中如何请求数据?》,感兴趣可以看看。虽然是去年的文章,在阅读之后一下子就掌握了 Hooks 的使用方式,而且数据请求是在业务代码中很常用...
1
(current)
2
3
下一页
1
(current)
下一页