前言

webpack 配置文件中最常见同时也是配置最繁琐的就是 loader 和 plugin。本文是我个人对 loader 和 plugin 理解的总结。可能有不准确的地方，后续会再次修改。

什么是 Loader ?

Loader 翻译过来可以叫加载器。官方文档对 loader 的解释原文如下:

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

loader 是一个转换器，将 A 文件进行编译成 B 文件，属于单纯的文件转换过程；

我总结为如下几点：

1. loader 需要处理的是除了 js 和 json 之外的文件类型。
2. loader 将这类文件转换(transform)为应用可以消费的合法模块。

第一点很好理解。第二点就有点抽象了，什么是“应用可以消费的合法模块”呢？

Read More

题目

这是 leetcode 上一道难度为中等的算法题：

将一个给定字符串 s 根据给定的行数 numRows ，以从上往下、从左到右进行 Z 字形排列。
比如输入字符串为 “ABCDEFGHIJKLMN” 行数为 3 时，排列如下：

1
2
3

A   E   I   M
B D F H J L N
C   G   K

而输出需要从左往右逐行读取，产生出一个新的字符串：”AEIMBDFHJINCGK”。

思路

有很大一部分算法题的思路都源于找到其中的规律。

输入字符串 s 经过转换后有 numRows 行，如果我们遍历 s 的每个字符 c 会发现，c 的行序列总是从 0 开始增长到 numRows - 1, 然后又从 numRows - 1 回到 0，比如上面的例子：

Read More

什么是回文串

最长回文子串是面试中经常问到的算法题。首先得明确什么是回文串？回文串就是正着读和反正读都一样的字符串。

比如 aba 和 acca

回文串的特点

回文串的特点：如果一个字符串 s 是回文串，则 s 去掉头尾的字符后的字符串依然是回文串。比如 acbca 是回文串，则去掉头尾的 a 后的字符串 cbc 也肯定是回文串，再迭代一下,去掉头尾的 c 后形成的字符串 b 也是回文串(单字母的字符串永远是回文串)。

所以寻找回文串的问题核心思想是：从中间开始向两边扩散来判断回文串。

这里要注意的一点是，回文串的长度可能是奇数也可能是偶数，比如 acbca 和 acca 都是回文串。

Read More

最近fucking-algorithm 这个算法教学库特别火。其中介绍了很多算法的“套路”，对算法初学者来说非常适用。以下是我读完 动态规划解题核心框架 一节后的归纳总结。

首先，动态规划问题的一般形式就是求最值

这个总结非常有用。如果工作或者面试中碰巧遇到最值问题，又没有解答头绪的时候，可以尝试着用动态规划的思路去分析一下。我想所谓的算法“套路”，无非就是看到 A 就自然会去联系到 B 的路数吧。

求解动态规划的核心问题是穷举

因为要求最值，肯定要把所有可行的答案穷举出来，然后在其中找最值呗。

Read More

前言

自从 react 推出 hook 后就一直觉得 hook 的实现挺神秘的，这篇文章主要记录下自己对 react hook 底层实现的理解，并用代码模拟下 react hook 的实现原理。

useState

useState 可以说是整个 hook 的基础，它使得函数组件也拥有自己的状态。使用起来很简单:

1

const [count, setCount] = useState(0);

那么我们可以先简单的按自己的理解实现一下 useState 的逻辑：

Read More

envoy

envoy 库的介绍上说它是一个可以被人类理解的 python 子进程。可以看出这个库的主要做用是使得 python 子进程的使用更加便利高效，并且符合人类的使用习惯。

前置知识点

看源码前需要对下面几个 python 原生库的使用有了解：

1. shlex
2. subprocess.Popen
3. threading.Thread

可以参考本文最后的参考资料。我也是边看源码边看查阅资料 🙂 ，感觉这样比较高效

Read More

这篇文章将简单的实现一个 service-worker 的 demo

生命周期

首先熟悉一下 service worker 首次被安装后的生命周期：

HTTPS

service worker 只能部署在 HTTPS 的服务器上。因为它本身可以劫持请求并对请求返回的内容做修改，所以为了防止中间人攻击，保证浏览器收到的 service worker 没有被修改过，service worker 只能注册在部署于 HTTPS 服务器的页面上。但在开发阶段，是可以使用 localhost 的。

Read More

前言

web worker 和 service worker 都属于 **”JavaScript Workers”**。虽然工作方式很类似，但应用场景却差别很大。

什么是 worker

通常来说，一个 worker 是一个 和主线程隔离的单独线程里的 javascript 脚本。
在 html 里用 <script> 标签加载的 js 脚本都是在主线程里加载的。如果主线程的活动很频繁，比如有密集的计算，就会拖慢整个 web 页面甚至使得页面没有响应。

Web workers

Web workers 是最常见的一种 worker，它可以用来处理任何不想占主线程资源的繁重任务，比如密集计算等，并且可以和主线程并行执行。

Web workers 通过 postMessge 来和主线程通信：

Read More

寻找两个正序数组的中位数

Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays.

这是力扣题库中难度指数困难的题，寻找两个正序数组的中位数

这题的难点在于题目要求算法的时间复杂度为**O(log(m+n))**。如果使用归并的方式，归并两个数组，得到归并有序数组后取中位数的方式的话，这样时间复杂度是 **O(m+n)**，达不到题目的要求。

如何把时间复杂度降低到 O(log(m+n)) 呢？如果对时间复杂度的要求有 log，通常都需要用到二分查找，这道题也可以通过二分查找实现。

Read More

tree-shaking 解决的问题

web 端 js 代码正在朝着越来越复杂的方向发展，代码体积也越来越大，于是出现了代码模块化的概念。
但随之也产生了一些问题，比如最终打包的文件会包含一些实际上用不到的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。

官方有标准的说法：Tree-shaking 的本质是消除无用的 js 代码。无用代码消除广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为 DCE（dead code elimination）

先举个 🌰，比如有个 util.js 库如下：

Read More