RSS Feed of Vincent's Bus Station

在 MacOS 下编译 Skia 以及 Wasm 版本

Sat, 06 Jul 2024 00:12:20 GMT

MacOS

Skia 官网对于如何下载和编译 Skia 有详细的说明，但是对于 macOS 下的编译，有一些细节需要注意。在开始编译之前，出来要先安装 depot_tools，还用同步 third_party 依赖库，可以通过下面的命令完成：

python3 tools/git-sync-deps

如果不希望依赖系统库，可以通过下面的命令编译 Skia：

bin/gn gen out/Static --args='is_official_build=false target_cpu="arm64" skia_use_system_libjpeg_turbo=false skia_use_system_harfbuzz=false'`

其中 is_official_build=false 表示不是官方编译，target_cpu="arm64" 表示编译为 arm64 架构，skia_use_system_libjpeg_turbo=false 表示不使用系统的 libjpeg-turbo 库，skia_use_system_harfbuzz=false 表示不使用系统的 harfbuzz 库。

Wasm 版本的 CanvasKit

Skia 提供了一个 Wasm 版本的 CanvasKit，可以在浏览器中使用。编译 Wasm 版本的 CanvasKit 需要使用 gn 工具，可以通过下面的命令编译：

cd skia/modules/canvaskit
./compile.sh

群晖如何在非官方 SSD 上创建储存池

Sat, 02 Sep 2023 12:04:00 GMT

年初因为老的群晖 CPU 烧了，升级了新的带有 M.2 SSD 插槽的群晖。看官方的介绍，说这个 SSD 插槽支持把 SSD 用做缓存或者可以用来做储存池。

直到昨天我插上一条 SSD 才发现原来如果要创建 SSD 分区只能用群晖自己的 SSD。而群晖自己的 SSD 买得比普通牌子贵 2-3 倍，简直是抢钱。

去问了官方客服无解，甚至还说 SSD 没用，简直无语。幸好最后在 Reddit 找到一篇帖子，介绍如何通过 SSD 登录 NAS 创建储存池：

https://www.reddit.com/r/synology/comments/pwrch3/how_to_create_a_usable_poolvolume_to_use_as/

1.  ls /dev/nvme*             (Lists your NVMe drives)
2.  sudo -i                   (Type this, then type your password for Super User)
3.  fdisk -l /dev/nvme0n1     (Lists the partitions on NVMe1)
4.  fdisk -l /dev/nvme1n1     (Lists the partitions on NVMe2)
5.  synopartition --part /dev/nvme0n1 12    (Creates the Syno partitions on NVMe1)
6.  synopartition --part /dev/nvme1n1 12    (Creates the Syno partitions on NVMe2)
7.  fdisk -l /dev/nvme0n1     (Lists the partitions on NVMe1)
8.  fdisk -l /dev/nvme1n1     (Lists the partitions on NVMe2)
9.  cat /proc/mdstat          (Lists your RAID arrays/logical drives)
10. mdadm --create /dev/md4 --level=1 --raid-devices=2 --force /dev/nvme0n1p3 /dev/nvme1n1p3      (Creates the RAID array RAID 1 --level=1 RAID 0 --level=0)
11. cat /proc/mdstat          (Shows the progress of the RAID resync for md3 or md4)
12. mkfs.btrfs -f /dev/md4    (Formats the array as btrfs)
13. reboot                    (Reboots the DS)

最后成功在群晖创建了 SSD 分区：

读懂 WebAssembly 如何表达 C++

Tue, 10 Aug 2021 23:12:00 GMT

本文同步发布到知乎

背景

最近因为项目原因，在项目中使用 Emscripten 将 C++ 代码编译到 WASM 以便在浏览器执行。借助这个过程我也学习了 WASM 上代码执行的方法。借助这个机会，用这篇文章介绍 C++ 是如何借助 WASM 字节码是执行的。

名词解释

WASM: WebAssembly，这个不多介绍了。
WAT: 用来表示 WASM 字节码的一种文本格式。
Emscripten: 用于把 C++ 代码编译成 WASM 的编译器，基于 LLVM。

WebAssembly 字节码执行

这一段主要解释 WASM 字节码执行的过程。如果了解可以跳过。

要想知道 WebAssembly 怎么执行。我们就要知道 WASM 字节码如何表示，有哪些类型和指令。编译完成可以执行的 WASM 程序是一个紧凑的二进制程序。但是我们仍然可以用一种语言来表示 WASM 程序，我们称之为 WAT - WebAssembly Text Format。 WAT 就像汇编之于机器码一样。我们虽然不能直接阅读 WASM 字节码，但是我们可以通过阅读 WAT 来了解程序的执行过程。

基本类型

和 Js 不同，WASM 是强类型的，WASM 程序里面运行的“值”有四个基本类型。其他的类型都由这四个基本类型组合而成。

从字面意思我们可以知道分别代表 32 位和 64 位整数和浮点数。

指令

要了解 WASM 的指令。就要了解 WASM 的“机器模型”。和我们现在运行的物理机不同，WASM 的运行环境是虚拟机，而且是一个栈式的虚拟机。栈式的虚拟机是和寄存器机器区分开的一个概念。下图展示了一个栈式机器执行的过程。前两句分别表示往栈上 push 两个值，最后一句执行加法操作，取栈顶两个值相加，然后结果再推回栈上。

图为栈式虚拟机上 32 位整数的加法操作

本地变量

对于 WASM 程序里面的每个“函数”都有“本地变量”这个概念，在函数的头部定义。每个本地变量都有一个“编号”，而通过相应的指令，我们可以读取，写入这个变量的值，这两个指令分别是 local_set 和 local_get。再配合上类型，比如 i32.local_get 0 就把 0 号本地变量读取出来，然后 push 到栈上。

内存空间

WASM 的内存空间是线性，这个倒是跟我们的物理机很像。 Emscripten 编译出来的产物里面，对于内存空间，同样分了“栈”空间和“堆”空间。这里很容易混淆的一点是。这里的“栈”空间并不是上面说的“栈”式虚拟机的那个栈，而是内存空间上的一个概念。 C 语言的函数里面的本地变量，其实也存在于这个内存栈上（如果没有被编译器优化的话）。

上图展现了一个 Emscripten 编译出来的 C 语言程序的内存空间。Emscripten 默认分配的栈空间是 5M。而栈空间是从内存的高位往低位增长的，这里可以抛出一个问题，这样设计会带来什么好处呢？。而“堆“空间就很容易理解了，这里不展开。

反编译

懂了大概这些概念之后，我们就可以动手了。如果还不了解的话，实际用到的时候再回来看看，会更容易理解。

实验代码

int add(int a, int b) {
    return a + b;
}

工具

反编译的工具这里用的是 WABT: WABT

命令

wasm2wat test_wasm.wasm > test.txt

得到的这个 test.txt 就是反编译后 WAT 格式的代码了。然后你应该能看到类似这样的代码：

(module
  (type (;0;) (func (result i32)))
  (type (;1;) (func (param i32)))
  (type (;2;) (func (param i32) (result i32)))
  (type (;3;) (func))
  (type (;4;) (func (param i32 i32) (result i32)))
  (type (;5;) (func (param i32 i32 i32) (result i32)))
  (type (;6;) (func (param i32 i64 i32) (result i64)))
  (func $__wasm_call_ctors (type 3)
    call $emscripten_stack_init)
  (func $add_int__int_ (type 4) (param i32 i32) (result i32)

这里你可能看不懂，但是也能大概猜出来里面的含义。以 type 开头的意思为分别定义了这些类型。以 func 开头则是代表定义了这些函数。下面我很很自然就看到 add_int 这个函数，这里摘取一部分代码：

(func $add_int__int_ (type 4) (param i32 i32) (result i32)
    (local i32 i32 i32 i32 i32 i32)
    global.get $__stack_pointer
    local.set 2
    i32.const 16
    local.set 3
    local.get 2
    local.get 3

看到这段代码我们要给这些变量编个号码，从 param 开始从 0 开始数，result 不算，遇到一个变量就加一，直到分配完所有变量。

而聪明的你一定就会发现，下面代码里面所谓的 local.get 和 local.set 后面的数字所代表的变量就是这几个变量。接下来看看 debug 模式下如何读取和存储 a 变量。

global.get $__stack_pointer
local.set 2  // 2 <- stack_pointer ; 把栈指针放到 2 号槽
i32.const 16
local.set 3  // 3 <- 16 ; 把数字 16 放到 3 号槽
local.get 2
local.get 3
i32.sub     // 2 号和 3 号相减，推到栈上
local.set 4 // 4 <- stack_pointer - 16 ; 把 stack - 16 放到 4 号槽，这个代表这个函数的基地址，函数内变量都通过基地址 + 偏移来进行访问。这里表示这个函数占用 16 bytes 的栈大小

图为 add 函数的内存布局

Release 模式的优化

Debug 模式下，生成的代码会比较啰嗦，先把参数 a, b 放到内存的这两个位置。然后再重新读出来，然后进行相加。然后再返回。这个时候或许我们会想，其实这里是不是没有必要写到内存，直接相加就可以了。就像我们 native 程序，有些变量直接在寄存器就能相加。所以 Release 模式下是没有写到内存的。

(func (;2;) (type 0) (param i32 i32) (result i32)
    local.get 0
    local.get 1
    i32.add)

以上就是 Release 下生成的代码，不涉及内存操作。

总结

以上讲述了 C++ 如何在借助 WASM 在浏览器里执行。相比机器码，WASM 读起来要易懂得多，我们也可可以借此机会多了解编译器如何理解和编译我们的代码，达到举一反三的效果。

QuickJS 源码解读（二）：基础设施和标准库

Fri, 25 Dec 2020 23:01:00 GMT

上一篇文章里面主要解释了了 QuickJS 虚拟机的运作。第二篇文章打算介绍一下 QuickJS 里面 JavaScript 基础设施的实现。

基础设施

注意，使用 QuickJS 新建 JSContext 的时候，默认是不带基础设施的 (比如说 JSON 解析、Object、等等)。这时候，可以调用以下命令进行添加，这些内建对象的支持都是内置的：

void JS_AddIntrinsicBaseObjects(JSContext *ctx);
void JS_AddIntrinsicDate(JSContext *ctx);
void JS_AddIntrinsicEval(JSContext *ctx);
void JS_AddIntrinsicStringNormalize(JSContext *ctx);
void JS_AddIntrinsicRegExpCompiler(JSContext *ctx);
void JS_AddIntrinsicRegExp(JSContext *ctx);
void JS_AddIntrinsicJSON(JSContext *ctx);
void JS_AddIntrinsicProxy(JSContext *ctx);
void JS_AddIntrinsicMapSet(JSContext *ctx);
void JS_AddIntrinsicTypedArrays(JSContext *ctx);
void JS_AddIntrinsicPromise(JSContext *ctx);
void JS_AddIntrinsicBigInt(JSContext *ctx);
void JS_AddIntrinsicBigFloat(JSContext *ctx);
void JS_AddIntrinsicBigDecimal(JSContext *ctx);

至于这些内置方法，比如 Object 是怎么实现，我们可以直接点开 JS_AddIntrinsicBaseObjects 代码

/* Object */
obj = JS_NewGlobalCConstructor(ctx, "Object", js_object_constructor, 1,
                                ctx->class_proto[JS_CLASS_OBJECT]);
JS_SetPropertyFunctionList(ctx, obj, js_object_funcs, countof(js_object_funcs));
JS_SetPropertyFunctionList(ctx, ctx->class_proto[JS_CLASS_OBJECT],
                            js_object_proto_funcs, countof(js_object_proto_funcs));

这两行分别给 Object 和 Object.prototype 设置了相应的函数，函数的定义在 js_object_proto_funcs 这个静态变量里面。

我们可以跟踪看看 js_object_proto_funcs 分别定义了什么函数：

static const JSCFunctionListEntry js_object_proto_funcs[] = {
    JS_CFUNC_DEF("toString", 0, js_object_toString ),
    JS_CFUNC_DEF("toLocaleString", 0, js_object_toLocaleString ),
    JS_CFUNC_DEF("valueOf", 0, js_object_valueOf ),
    JS_CFUNC_DEF("hasOwnProperty", 1, js_object_hasOwnProperty ),
    JS_CFUNC_DEF("isPrototypeOf", 1, js_object_isPrototypeOf ),
    JS_CFUNC_DEF("propertyIsEnumerable", 1, js_object_propertyIsEnumerable ),
    JS_CGETSET_DEF("__proto__", js_object_get___proto__, js_object_set___proto__ ),
    JS_CFUNC_MAGIC_DEF("__defineGetter__", 2, js_object___defineGetter__, 0 ),
    JS_CFUNC_MAGIC_DEF("__defineSetter__", 2, js_object___defineGetter__, 1 ),
    JS_CFUNC_MAGIC_DEF("__lookupGetter__", 1, js_object___lookupGetter__, 0 ),
    JS_CFUNC_MAGIC_DEF("__lookupSetter__", 1, js_object___lookupGetter__, 1 ),
};

可以看到这些内置方法都是 C 实现的方法。对应的函数都是在 quickjs.c 里面定义。

知道了这些，我们就可以动手修改 QuickJS 代码，比如说我们想改变 Object 的 toString 的表现。让它输出更详细的信息，那我们更改 js_object_toString 的实现就可以了。

标准库

标准库的实现，不是语言的一部分。这一部分的实现内容放在了 quickjs-libc.c 这个文件。这里稍微提一句，Bellard 实现标准库用了不少 POSIX 方法，这样实现起来代码会比较简单，但是同时导致了代码无法在 Windows 上编译（除非用 MingW)，所以想要在 Windows 上独立编译通过的话，需要做不少改动。

我自己也做了一份 Fork，修复了 Windows 的编译问题，同时支持 CMake： https://github.com/vincentdchan/quickjs

需要的可以自取。

console.log

写过 JS 的人估计都用过 console.log 吧。那么在 QuickJS 里面，console.log 怎么实现呢。答案就在 quickjs-libc.c 这个文件的 js_std_add_helpers 这个函数里面：

JSValue global_obj, console, args;
int i;

global_obj = JS_GetGlobalObject(ctx);
console = JS_NewObject(ctx);
JS_SetPropertyStr(ctx, console, "log",
                  JS_NewCFunction(ctx, js_print, "log", 1));
JS_SetPropertyStr(ctx, global_obj, "console", console);

可以看到实现方法就是 js_print 这个函数：

static JSValue js_print(JSContext *ctx, JSValueConst this_val,
                              int argc, JSValueConst *argv)
{
    int i;
    const char *str;

    for(i = 0; i < argc; i++) {
        if (i != 0)
            putchar(' ');
        str = JS_ToCString(ctx, argv[i]);
        if (!str)
            return JS_EXCEPTION;
        fputs(str, stdout);
        JS_FreeCString(ctx, str);
    }
    putchar('\n');
    return JS_UNDEFINED;
}

可以看到底层调用的是 C 语言的 fputs 方法输出到 stdout。如果你想让 console.log 输出到自己的文件，或者数据库，那么你就可以更改 js_print 这个方法了。

我们还可以看到，Bellard 只实现了 console.log，但是没有输出 console.error。那么我们就可以把 console.error 给实现上，输出到 stderr，也是轻而易举了。

setTimout

setTimeout 的实现会稍微复杂一点。要了解 setTimeout 的实现，就要了解 QuickJS 的事件循环。要了解 QuickJS 的事件循环，其实只要看懂一个函数：

/* main loop which calls the user JS callbacks */
void js_std_loop(JSContext *ctx)
{
    JSContext *ctx1;
    int err;

    for(;;) {
        /* execute the pending jobs */
        for(;;) {
            err = JS_ExecutePendingJob(JS_GetRuntime(ctx), &ctx1);
            if (err <= 0) {
                if (err < 0) {
                    js_std_dump_error(ctx1);
                }
                break;
            }
        }

        if (!os_poll_func || os_poll_func(ctx))
            break;
    }
}

QuickJS 里面维护着一个队列。而主循环就是一直从这个队列里面捞任务出来进行处理。 JS_ExecutePendingJob 就是执行一个 JS 任务。这个 JS 任务可能添加了一个系统任务。比如如果代码调用了 setTimeout 那么 QuickJS 会往系统添加一个定时器任务。

随后这个循环调用 os_poll_func 这个方法，会一直阻塞，等到有任务完成，这个函数会往 QuickJS 队列添加一个回调，然后返回。

返回后进入下一次循环，就会执行 setTimeout 的回调，这样就完成了 setTimeout 的调用。

这里和我们熟知的 v8 不一样，v8 使用的是 libuv 作为事件循环的库。而 QuickJS 为了轻量化，简单的封装了一下系统的信号，有兴趣的同学可以深入了解 os_poll_func 函数的实现。

写一个飞快的 JavaScript 打包压缩工具

Sat, 25 Apr 2020 17:35:00 GMT

背景

平时大家在开发 Js 项目的时候，可能已经离不开 webpack 等打包工具了。而 webpack 打包速度大概就是“能用“的水平。大概去年开始，我就开始在构想，如果能写一个极速的打包工具，功能未必需要很强，可能对小项目非常有用。去年我用 C++ 写完 parser 之后，便没什么动力写下去了。但是最近发现有这个想法的不止我一个，Figma 的 CTO 业余之际写了一个打包器 https://github.com/evanw/esbuild，可以说完完全全实现了我想象中的需求，不过他是用 Go 语言实现的。我看到这个项目时心里一想，这不是我去年就想做的事吗，这 push 我赶紧把打包压缩部分完成。

代码

Github 地址：https://github.com/vincentdchan/jetpack.js

优化思路

并行 Parsing

毫无疑问，每一个 js 文件的 parsing 可以在不同线程完成，这就需要支持并行的语言。由于 parsing 的结果是 AST，所以需要可以共享内存的语言（排除通过 messeage parsing 实现多线程的语言）。满足以上两个要求的语言不多。 Evan 选择了 Go，我选择了 C++。

减少遍历次数

要想速度快，就要减少 AST 的遍历次数。最好就是只遍历一次来生成代码，在 Parsing 构建 AST 的时候就收集足够的信息。但是这也意味着只能做比较浅层次的优化，不能做深层次的压缩（死代码消除，tree shaking 都做不了）。

架构

由上述思路我总结出了以下打包的架构：

并行 parse 文件
作用域提升、生成框架代码、重命名变量
并行生成代码
合并输出文件

流程图如下：

打包压缩原理

本章节主要讲如何“最简单“地压缩 Js 代码。本章节假设读者对编译原理有一定了解，知道什么是 AST。如果不懂请直接跳到下文「性能」章节。

字面量替换

字面替换最简单。规则有一下几个：

undefined 替换为 void 0
true 替换为 !0, false 替换为 !1

⚠️ 注意：在 ES 中，undefined 是标识符（Identifier)，而不是关键字，也就是说你可以定义一个叫 undefined 的变量，所以这个时候不能简单地替换为 void 0

常量折叠

计算简单的运算：

var two = 1 + 1;
var foobar = 'foo' + 'bar';

转换成

var two = 2;
var foobar = 'foobar';

⚠️ 注意：这里要注意实现的平台和 js 的差异，比如在 C++ 里面大整数相加可能会溢出，而在 Js 会自动转换成 bigint. 加法问题就如此，其他运算符问题更多。如果要完整实现常量折叠，可能要部分实现 js 引擎。

变量别名

别名就是要给变量重新赋予比较短的变量名。从字母一直排上去，abcd，一个字母用完了用两个字母。实现起来也很简单，用一个计数器，一直加上去就可。最后每个变量分配一个数字，把这个数字映射到相应的英文字母上，有点像 36 进制转换成字母的面试题。不过这里有一点值得注意的是，变量名第一个字母不能是数字，第二个字母开始可以是数字，要考虑到这一点，才能尽可能“压榨”变量名。

为了尽可能地“压榨”变量名，同一级的作用域里面的变量名是可以使用相同的变量名。到下一级的时候，对子作用域进行合并。

举个例子：

function Mother() {
	var e = 'capture';  // d 不能使用跟子作用域同样的变量名，不然子作用域无法捕获这个变量
	function A(a, b, c, d) {
    console.log(e);
	}
	
	function B(a, b, c) {  // B 跟 A 函数同级，分配同样的变量名
	  // ...
	}
}

上述例子中，A 和 B 都没有子作用域了，变量名从 0 开始分配。到给 Mother 下 e 分配变量名时，找到子作用域最大的计数器。分配最多的子作用域 A 分配了 4 个，所以 B 计数器从 5 开始分配，所以给 e 分配了5，所以 e 就得到了这个名字。

所以变量别名就是从 AST 的叶子开始向上构造，一直分配到根结点把所有作用域都分配完为止。

小技巧

这里 esbuild 采用了比较聪明的技巧。它统计了所有变量的引用次数，然后进行排序，引用次数最多的变量分配到的名字就是尽量短的，这样也可以减少编译出来 js 的体积。我在写 jetpack 打包的时候，也借鉴了这种做法。

模块合并

模块合并的办法有很多。webpack 采用的是用 function 把每个函数包起来，放到了一个长长的数组里面，然后实现了自己的 require，esbuild 也采用了类似的方法。

Rollup.js 实现的方法则是作用域提升（Scope hoisting），把模块都放到根作用域。这里我采用的方法也是作用域提升。

假设有 a.js 文件：

export function A() {
  console.log('a');
}

然后有 main.js 文件：

import { A as ExternalA } from './a';

function A() {
  console.log('local A');
}

export function main() {
  A() + ExternalA();
}

使用 jetpack 打包完的结果：

// a.js
function A() {
  console.log('a');
}

// main.js
function A_0() {
  console.log('local A');
}

function main() {
  A_0() + A();
}

export { main };

难点在于作用域合并。实际上在 ES modules 里面不同 modules 之间引用是一个图结构。

C++ 的优化

除了策略上的优化，C++ 还提供了诸多基础数据结构/内存方面的优化。

shared_ptr

AST 的结点全部使用 shared_ptr，有人可能认为这是一个很大的开销。但是早期的时候我实现过一个裸指针版本（不释放内存），并没有测出有明显差距。

使用 shared_ptr 很重要一个原因是，一个子树可能被其他类拥有（打包模块，Scope，ES Module 管理器）。这个时候如果用 unique_ptr 的话就会 gg。只能说 GC 大法好。

对于 C++ 这种没有 GC 的语言有一个毛病就是：析构 AST 非常耗时。AST 够大的话能耗上十几 ms（这个时间跟 gc 比有何优势？），所以因此我也能想出了一个办法：不释放内存……。

最后说一句：GC 大法好。

robin hood hashing

由于打包器中大量使用哈希表，所以提高哈希表速度尤其重要，这里我使用了 robin hood hashing

参见：https://martin.ankerl.com/2019/04/01/hashmap-benchmarks-01-overview/

在 hash 方面我有一个设想，就是像 Lua 一样，对于短字符，在字符串创建的时候把 hash 记下来，这样在多次使用哈希表的时候可以节省 hash 的时间（但是要求字符串是 immutable 的）。为此我专门写了个 String 类，最后的结果是总体速度慢了 2-3x，测出来是 immutable 字符串拼接耗时太多，最后放弃了这个方案。

jemalloc

Parsing 过程中需要大量分配 node，大家都知道很明显 C++ 的 new 并不够快。经过测试在 macOS 下使用 jemalloc 会让 parsing 速度提升 1 倍。使用系统 malloc 会导致 parsing 速度比 Go 慢 1x 左右，慢在 new。

当然了，内存池我也试过的，测出来速度基本和 jemalloc 一样，所以就直接用 jemalloc 了。

性能

总结

写编译器需要快速大量产生 node 结点，大量树和图的结构，这一方面的运算 C++ 并没有什么优势可言。

不得不承认，使用 C++ 你要思考很多东西，做很多很多额外的工作，才能获得比 Go 还快的速度（什么都不想做出来只会比 Go 还慢）。另一方面使用 C++ 会让你额外考虑很多和业务无关的东西，大大降低开发速度，而对于打包器这个场景 C++ 在这一块本身不能提供很大优势。

使用 JS 操作 mac 下文件拓展属性

Sat, 22 Feb 2020 21:00:00 GMT

任何可以使用 JavaScript 来实现的应用都最终都会使用 JavaScript. --Atwood

通过浏览器和 Node.js，JavaScript 可以说上天入地无所不能。现在许多客户端应用程序也使用 Electron 进行开发。但是 Node.js 本身在一些 native 操作上稍有欠缺，比如说 mac 下文件拓展属性。

什么是拓展属性

拓展属性是 mac 下文件系统提供的一种机制。除了基本的文件属性（修改时间、创建时间等），mac 还允许用户和程序自定义属性。这个属性是一个以 key-value 形式储存的键值对。key 是 UTF-8 字符串，value 则是任意形式的数据。

Mac 下一些系统程序也依赖这个拓展属性。比如说我们去 Node.js 官网下载一个 pkg 安装包，然后打开，mac 会弹出这个框。

你可能会好奇，这个对话框上信息很全呀，系统怎么知道我是用 Chrome 从 nodejs.org 下载的呢？实际上是因为 Chrome 在你下载的这个 pkg 文件上设置了一个叫 com.apple.quarantine 的属性。怎么查看这个属性呢，其实可以用命令行看到：

xattr -l node-v13.9.0.pkg

如果你使用命令 xattr 把属性去掉，系统则不会再弹框了：

xattr -d com.apple.quarantine your_file

像 com.apple.metadata:kMDItemWhereFroms 这个属性就告诉了我们这个文件是从哪里来的。像上图中的文件是我从浏览器下载的，就储存了这个文件下载的 URL。

比如你使用 AirDrop 传输文件，这个属性就会储存你的来源设备：

像上图，我用 iPhone 传了一张图片，属性里面储存了我的 iPhone 的设备名字。属性显示这个文件是从 sharingd 来的，而 sharingd 就是 AirDrop 的后台进程。所以对于一些文件来说，读取这个拓展属性可以知道这个文件的来源。在一些操作中，这个信息还是挺有用的。

而这个 kMDItemWhereFroms 属性的格式则是 mac 下比较常见的 plist 格式，下文会讲解如何读取这个格式。

拓展属性它还可以为文件设置自定义图标，比如说你可以为普通文件和文件夹设置你喜欢的图标，这个图标的内容就储存在拓展属性里面：

更多关于拓展属性的用法大家可以自行去搜索资料了解，下文讲讲如何在 JS 里面操作拓展属性。

使用 JS 操作

由于 Node.js 环境下缺乏比较好用的操作 xattr 的库，所以这里推销一下我封装的 node-xattr，功能很全很强大。使用 N-API，支持同步异步操作、设置自定义 icon，解析 plist 等实用的功能。同时支持 TypeScript，提高开发效率。

安装

yarn add node-xattr

获取 xattr

// 同步版本
const buffer = getXattrSync('./test.txt', 'key'); //获取 Buffer
const string = getXattrSync('./test.txt', 'key', 'utf8'); // 获取 string

// 异步版本
getXattr('./test.txt', 'key').then(buffer => console.log(buffer)).catch(err => console.error(err));
getXattr('./test.txt', 'key', 'utf8').then(str => console.log(str)).catch(err => console.error(err));

设置 xattr

setXattrSync('./test.txt', 'key', 'value');
setXattr('./test.txt', 'key', 'value').catch(err => console.error(err));

设置自定义图标

node-xattr 提供了简单的 API 可以直接设置自定义图标，不需要去了解系统的储存格式。

const { macUtils } = require('node-xattr');

macUtils.setCustomIconSync(TestFile, iconPath);
macUtils.setCustomIcon(TestFile, iconPath).catch(err => console.log(err));

解析 plist

目前来说 node-xattr 提供了简单的两个函数，可以用于解析 kMDItemWhereFroms 这个字段。

const { getXattrSync, macUtils } = require('node-xattr');
const buffer = getXattrSync('./test.txt', 'com.apple.metadata:kMDItemWhereFroms'); //获取 Buffer
const list = macUtils.deserializeArrayOfString(buffer);
console.log(list);

总结

node-xattr 这个库提供了操作 xattr 的能力，可以让你完成很多 Node.js 本身做不到的事情。有了这个库，你可以发挥你的想象力，在你的 Node 程序、 Electron 程序里面直接操作拓展属性，实现你的 macOS 原生化功能。

多线程 SQLite with C++ 踩坑汇总

Mon, 13 Jan 2020 23:55:00 GMT

因为工作的原因使用 SQLite 作为本地数据库，然而 SQLite 和 C++ 配合使用有许许多多的坑，此文用于记录工作过程中使用 SQLite 的坑。

Last Insert rowId

Last Insert Rowid

SQLite 中有一个函数可以获得最最近 insert 的一行的 id。也就是说，当你 insert 新的自增的一行时，你可以用 sqlite3_last_insert_rowid() 这个函数拿到这一行的 ID 这是一个取巧的办法，实际上这个函数是记录在 sqlite 实例里面的一个变量。这个变量的读写当然是没问题的，但是它需要和上一次 step 串行执行并上锁。

假设你有如下代码：

sqlite3_step(stmt);
std::int64_t id = sqlite3_last_insert_rowid(db);

你必须为这两句话上锁，因为如果这两句语句中间有其他线程插入了数据，你从 sqlite3_last_insert_rowid 拿到的是其他线程的数据。

sqlite3_step(stmt);
// 其他线程也执行了 sqlite_step() 导致下面语句 rowid 不对
std::int64_t id = sqlite3_last_insert_rowid(db);

正确写法

{
  std::lock_guard<std::mutex> guard(mt);
  sqlite3_step(stmt);
  std::int64_t id = sqlite3_last_insert_rowid(db);
}

附上 SQLite 获取 last_rowid 的源码：

/*
** Return the ROWID of the most recent insert
*/
sqlite_int64 sqlite3_last_insert_rowid(sqlite3 *db){
  return db->lastRowid;
}

事务

事务可以说是 SQLite 里面多线程使用最坑的东西了。SQLite 不像其他 C/S 数据库一样一条链接保持一个事务。它就是纯函数调用。

乱序提交

SQLite 本身可以保证 step 是线程安全的，也就是多个线程同时 step 是没问题的。但是会有乱序提交的问题。比如一个线程开启事务进行提交，另一个线程也同时进行提交，这个线程回滚导致了其他线程的提交也回滚了。

所以事务提交要上锁，主动上锁的话，一来性能下去了不说，二来忘了上锁就 gg，这个地方很坑。

多实例

既然 SQLite 是一个实例一个事务，那么每一个事务我开一个 SQLite 实例是不是就可以了呢。答案是依然有坑。

一个 DEFERRED 的事务（SQLite 事务默认是 DEFFERED）如果执行了一句写的语句，就会锁住整个数据库，直到 COMMIT，在写事务开始到结束之前，其他实例执行任何语句都会返回 SQLITE_BUSY（数据库繁忙）。不止 step 哦，是 prepare 也会哦，是不是很惊喜。如果你这个事务很长，其他实例也用不了数据库了（跟上锁也没啥区别）。

峰回路转，我终于在 SQLite 的 API 里面找到了一个 busy_handler，可以在 busy 的时候执行一个回调函数，让你去做一些操作，比如重试。刚好官网也实现了一个实现了一个重试的 busy handler，你只要设置好 busy_timeout 这个参数就可以了，这个默认的 handler 就会贴心地帮你重试。而它的做法就是过一会儿再帮你提交一遍，直到 timeout 为止，显而易见这种做法非常挫，这挫做法导致它比用户自己加锁更慢。

下面看一下 sqlite 的默认 busy handler 的源码：

/*
** This routine implements a busy callback that sleeps and tries
** again until a timeout value is reached.  The timeout value is
** an integer number of milliseconds passed in as the first
** argument.
*/
static int sqliteDefaultBusyCallback(
 void *ptr,               /* Database connection */
 int count                /* Number of times table has been busy */
){
#if SQLITE_OS_WIN || (defined(HAVE_USLEEP) && HAVE_USLEEP)
  static const u8 delays[] =
     { 1, 2, 5, 10, 15, 20, 25, 25,  25,  50,  50, 100 };
  static const u8 totals[] =
     { 0, 1, 3,  8, 18, 33, 53, 78, 103, 128, 178, 228 };
# define NDELAY (sizeof(delays)/sizeof(delays[0]))
  sqlite3 *db = (sqlite3 *)ptr;
  int timeout = db->busyTimeout;
  int delay, prior;

  assert( count>=0 );
  if( count < NDELAY ){
    delay = delays[count];
    prior = totals[count];
  }else{
    delay = delays[NDELAY-1];
    prior = totals[NDELAY-1] + delay*(count-(NDELAY-1));
  }
  if( prior + delay > timeout ){
    delay = timeout - prior;
    if( delay<=0 ) return 0;
  }
  sqlite3OsSleep(db->pVfs, delay*1000);
  return 1;
#else
  sqlite3 *db = (sqlite3 *)ptr;
  int timeout = ((sqlite3 *)ptr)->busyTimeout;
  if( (count+1)*1000 > timeout ){
    return 0;
  }
  sqlite3OsSleep(db->pVfs, 1000000);
  return 1;
#endif
}

这是一段退避重试的代码。可知重试时间是毫秒级的。这个延时速度真的还不如自己上锁呢……

正确写法

所以这里建议在 C++ 里面使用事务，还是使用单实例 + 使用的时候上锁来解决。另外要保证只有一个线程使用了事务，而且这个线程使用事务的时候，其他线程不能提交。

总结

SQLite 是一个很古老的数据库 lib。在业界也被广为使用。但是它的一些 api 设计真的有点坑。鉴于 SQLite 古老的历史，也许这些 api 不易修改得对多线程友好。所以在使用的时候还是要多多注意。写到这里，我想到了 sqlite 官方 FAQ 的一句话：https://www.sqlite.org/faq.html。

Threads are evil. Avoid them.

同时还贴出了一篇论文：https://www2.eecs.berkeley.edu/Pubs/TechRpts/2006/EECS-2006-1.pdf

或许 SQLite 的作者真的不喜欢多线程，才设计成这个样子吧。

使用 N-API 和 CMake 为 Node.js 添加 C++ 拓展

Sun, 13 Oct 2019 21:00:00 GMT

以前为 Node.js 编写拓展的时候，使用的是 Node.js 的 C++ addon API，直接使用 v8 提供的 api 和 Node.js 打交道。使用 C++ Addon 的 API 有个缺点就是 ABI 层面不兼容，升级 Node.js 之后 extension 要重新编译。

现在 Node.js 提供了 N-API。这个 API 是 C 层面的支持（也有 C++ 绑定）。同时，使用 N-API 写出来的拓展是 ABI 兼容的。

而使用 N-API 编写 Node.js 扩展不一定用 node-gyp 进行编译，也可以使用 cmake，这对一些使用 CMake 的 C++ 项目可以说非常友好了。

使用方法

按照官方教程：

$ yarn add node-addon-api cmake-js bindings

然后在 package.json 里面加上一句：

"scripts": {
  "install": "cmake-js compile"
}

然后愉快的 yarn install 就可以使用了。

贴一下我的 CMakeList.txt 配置：

project (zparser)
cmake_minimum_required(VERSION 3.15)

set(CMAKE_CXX_STANDARD 17)

include_directories(${CMAKE_JS_INC})
file(GLOB SOURCE_FILES "src/*.cc" "src/*.h")
add_library(${PROJECT_NAME} SHARED ${SOURCE_FILES} ${CMAKE_JS_SRC})
set_target_properties(${PROJECT_NAME} PROPERTIES PREFIX "" SUFFIX ".node")

set(JSON_BuildTests OFF CACHE INTERNAL "")

# Include N-API wrappers
execute_process(COMMAND node -p "require('node-addon-api').include"
        WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
        OUTPUT_VARIABLE NODE_ADDON_API_DIR
        )
string(REPLACE "\n" "" NODE_ADDON_API_DIR ${NODE_ADDON_API_DIR})
string(REPLACE "\"" "" NODE_ADDON_API_DIR ${NODE_ADDON_API_DIR})
target_include_directories(${PROJECT_NAME})
target_link_libraries(${PROJECT_NAME} ${CMAKE_JS_LIB})

可以说非常简单易用了。

Api 使用

C++ 官方文档的介绍还是比较简陋的，如果不了解 C-API 用起来有些地方会比较困惑。但是如果用过之前用过 v8 的 addon-api 的话，还是比较容易理解的。

大部分的 Object 和 Array 等操作都有，你甚至可以用 ObjectWrap 去定义自己的 Class:

class Example : public Napi::ObjectWrap<Example> {
  public:
    static Napi::Object Init(Napi::Env env, Napi::Object exports);
    Example(const Napi::CallbackInfo &info);

  private:
    static Napi::FunctionReference constructor;
    double _value;
    Napi::Value GetValue(const Napi::CallbackInfo &info);
    Napi::Value SetValue(const Napi::CallbackInfo &info);
};

我目前没有发现的就是如何定义一个 Undefined 的 Value。所以用到 Undefined 的时候，我就不得不用 C-API 去定义一个 napi_value 来用 undefined。好在 C++ 的 API 可以和 C 混用：

napi_value* result = nullptr;
if (napi_get_undefined(env, result) == napi_ok) {
  // do something
}

在 js 里面的使用也很简单，不过要配合 bindings 库使用：

const example = require('bindings')('example');

QuickJS 源码解读（一）：虚拟机的实现

Mon, 26 Aug 2019 23:55:00 GMT

简介

Quick JS 是 Fabrice Bellard 今年发布的一款 JavaScript 引擎，具有以下特性：

轻量而且易于嵌入：只需几个C文件，没有外部依赖，一个x86下的简单的“hello world”程序只要180 KiB。
具有极低启动时间的快速解释器：在一台单核的台式PC上，大约在100秒内运行ECMAScript 测试套件1 56000次。运行时实例的完整生命周期在不到300微秒的时间内完成。
几乎完整实现ES2019支持，包括：模块，异步生成器和和完整Annex B支持 (传统的Web兼容性)。
通过100％的ECMAScript Test Suite测试。
可以将Javascript源编译为没有外部依赖的可执行文件。
使用引用计数（以减少内存使用并具有确定性行为）的垃圾收集与循环删除。
数学扩展：BigInt, BigFloat, 运算符重载, bigint模式, math模式.
在Javascript中实现的具有上下文着色和完成的命令行解释器。
采用C包装库构建的内置标准库。

本文主要记录我阅读 QuickJS 源码时记录的一些心得，主要用于学习用途。

编译

源码下载地址：https://bellard.org/quickjs/

编译 qjs 引擎本身

qjs 本身用于直接执行 JavaScript 代码：

$ make qjs

编译 qjsc 编译器

qjsc 编译器可以把 JavaScript 代码编译成 QuickJS 虚拟机的字节码（可直接通过 QuickJs 虚拟机执行）。也可以把 JavaScript 代码编译成一个 C 语言的 .c 文件，这个文件包含了字节码：

但是编译 qjsc 编译器首先需要编译 libquickjs 库：

$ make libquickjs.a
$ make qjsc

使用 qjsc 编译器把 my_test.js 文件编译成 my_test.c 文件：

$ ./qjsc -e -o my_test.c my_test.js

使用 XCode 进行 Debug

如果你想很清楚地了解整个虚拟机的执行过程，可能你需要 XCode 来进行单步调试：

为了能在 XCode 下进行调试，你可能需要先在 Makefile 里面把优化给去掉。打开 Makefile，在里面找到这一句：

CFLAGS_OPT=$(CFLAGS) -O2

改成：

CFLAGS_OPT=$(CFLAGS) -O0

接下来就好办了，我们照着这篇教程走就可以在 XCode 里面 debug 了。

OPCode

QuickJs 的虚拟机使用栈式虚拟机。对于什么式栈虚拟机推荐阅读这篇文章了解。

QuickJS 的 OPCode 十分简洁和紧凑。所有 OP 码的定义都放在 quickjs-opcode.h 文件里面：

从上图可以知道 OPCode 定义分为这几个部分：

id: OPCode 的名字
size: OPCode 的字节大小。比如说 push_i32 指令的 size 是 5. 那么第一个字节用来存 OPCode 本身，

后面四个字节用来存 32 为的整型，也就是四个字节。

n_pop: 从栈上面弹出的元素的数量。和下面的 n_push 一起用户统计函数需要分配的栈的大小。
n_push: 从栈上面插入元素的数量。
f: 字节码的格式。

Runtime

在虚拟机内部，运算的最基本单位是 JSValue，一个 JSValue 可以用以下 Tag 来标示：

enum {
    /* all tags with a reference count are negative */
    JS_TAG_FIRST       = -10, /* first negative tag */
    JS_TAG_BIG_INT     = -10,
    JS_TAG_BIG_FLOAT   = -9,
    JS_TAG_SYMBOL      = -8,
    JS_TAG_STRING      = -7,
    JS_TAG_SHAPE       = -6, /* used internally during GC */
    JS_TAG_ASYNC_FUNCTION = -5, /* used internally during GC */
    JS_TAG_VAR_REF     = -4, /* used internally during GC */
    JS_TAG_MODULE      = -3, /* used internally */
    JS_TAG_FUNCTION_BYTECODE = -2, /* used internally */
    JS_TAG_OBJECT      = -1,

    JS_TAG_INT         = 0,
    JS_TAG_BOOL        = 1,
    JS_TAG_NULL        = 2,
    JS_TAG_UNDEFINED   = 3,
    JS_TAG_UNINITIALIZED = 4,
    JS_TAG_CATCH_OFFSET = 5,
    JS_TAG_EXCEPTION   = 6,
    JS_TAG_FLOAT64     = 7,
    /* any larger tag is FLOAT64 if JS_NAN_BOXING */
};

那么一个 JSValue 的表示是这样的：

typedef union JSValueUnion {
    int32_t int32;
    double float64;
    void *ptr;
} JSValueUnion;

typedef struct JSValue {
    JSValueUnion u;
    int64_t tag;
} JSValue;

从这个结构体可以看出一个 JSValue 占用 16 字节的内存。tag 用来表示这个 Value 的类型。而 JSValueUnion 则是用来储存真正的值。这个值可以是 int/float 或者一个指针指向一个真正的对象。

真正的对象在 QuickJS 里面则是使用引用计数来进行内存管理，所以都有一个引用计数器：

ypedef struct JSRefCountHeader {
    int ref_count;
} JSRefCountHeader;

命令执行

知道了上述背景之后，我们就可以看看 QuickJS 虚拟机具体的执行过程了。需要知道的是，一个栈虚拟机，需要两个很重要的指针，分别是 pc 和 sp。

pc 指的是程序计数器。指向正在读取的 OPCode，读取之后 pc 会 ++，指向下一个字节。

sp 是栈指针。指向栈机器栈顶的下一个元素，用来进行栈相关的操作。

入栈

入栈操作就是把读入的值变成一个 JSInt32，然后赋值到 sp 指针指向的内存，然后 sp++。就完成了一个入栈操作。我们可以看到 QuickJS 的字节码实际是十分冗余的，具体为什么这么设计我不太清楚。估计是 0-7 之间的数可以用一个字节搞定，节省空间，但是我个人感觉也太省了，对实际运行应该帮助不大。

OP_push_i8 是一个两字节的 OP 码，第二个字节就是一个 8 位的整数，同理 OP_push_i16 就是一个三个字节的指令，入栈一个 16 位的整数。

加法

栈虚拟机上的加法就是从栈弹出两个元素，相加，然后入栈。这里首先从栈顶取出 op1 和 op2。然后判断是不是 int。这里的 int 类型是 32 位的。所以它先把他们切到 64 位进行相加。加完再切回 32 位的 int，看看数据是不是一样。若不一样，则说明加法产生了溢出，这个时候就丢到 add_slow 进行处理。

若两个 op 都是 float64 则进行浮点数的加法。

If 分支跳转

If 分支跳转是程序里面很重要的一步，实现了分支跳转，for 和 if 语句都可以实现了。 QuickJs 有 goto 指令，比较简单，这里就不说了，这里介绍一下 OP_if_true：

If 分支跳转主要是看栈顶元素是不是为 true。若为 true，则把 pc 加等于相应的 offset。这个 offset 在 QuickJS 里面是 32 位的，这意味着 OP_if_true 是一个 5 个字节的 OPCode。这个 offset 在编译的过程中就可以被算出来。

图中有一个 tag 是否小于等于 JS_TAG_UNDEFINED 的判断。这个判断根据上面的 tag 的定义。我们知道只有这几个类型是不符合这个判断的：

JS_TAG_UNINITIALIZED = 4
JS_TAG_CATCH_OFFSET = 5
JS_TAG_EXCEPTION = 6
JS_TAG_FLOAT64 = 7

以上几个类型需要用 JS_ToBoolFree，进行判断，其他类型则可以从 JSValue 读出真正的 bool 值。

总结

QuickJS 源码实现非常简单易懂，是一个非常适合学习的 JS 引擎。有一点谈不上好坏的就是像 Bellard 这样的 hacker 出来的代码非常的骚气。比如说通篇的 goto，不过幸好不是很难懂，有些逻辑确实 goto 写起来比较爽这一点，可以理解。另一方面不太好的就是大部分代码都写尽了一个 .c 文件里面了，读函数调用跳来跳去比较麻烦。

总的来说是比较适合阅读的源码了。

转换网易 ncm 格式到 mp3

Tue, 07 May 2019 17:23:00 GMT

不知道什么时候开始，网易下载的歌曲都不用以前的 mp3 格式，而采用了自家的 ncm，说真的，比较恶心，平时自己想要剪个视频用个配乐都很麻烦，搜了很久很多工具，最后搜到了这个：ncmdump。

首页提供了 Windows 和 Linux 的使用方法，mac 下面使用也很简单，先用 brew 安装 taglib，然后 make 即可：

$ git clone https://github.com/anonymous5l/ncmdump
$ brew install taglib
$ make

实测可以转换成功：

使用 OCaml 解析 JavaScript

Wed, 20 Feb 2019 00:00:00 GMT

起因

最近在写一个关于 JavaScript 的静态分析器，作为我的毕业设计。我写静态分析主要是为了 ES6 层面的语法做更好的 DCE(Dead Code Elimination)。我选择 OCaml 来实现这个静态分析工具，用 flow 来 parse JavaScript。

为什么选择 OCaml

在和导师讨论题目的时候，我跟导师说这个项目用 Java 来写，主要是 Java 比较容易说服老师。实际上开始写的时候就塞了很多私货，我的第一个版本其实用的是 Scala，原因是：

Scala 里面的很多语言特性非常有 FP 风格，也很适合用来写编译器和静态分析工具。
运行在 JVM 上面更容易做多线程，可以使静态分析过程有较大的提升。
如果有需要，Scala 可以编译成 JS。JVM 上面也有很多可以和 JS 联动的方案，方便和其他 JS library 联动。

但是开始使用 Scala 的时候却发现了许多问题：

我使用的 Parser 和 AST 结构都是 Java 写的（使用了 Graal.js 的 Parser），因此无法使用 Scala 的 case class 风格，这意味着我要在 Scala 里面写 Java Style 的代码，我表示很拒绝。我当然可以用 implicit 语法写一层转换层，但是我觉得这样很蛋疼，所以放弃。
我要进行的静态分析是基于图（Graph）的，似乎没办法进行并行计算，即使可以，也会有超级多 overhead，还不如使用单线程。
巨慢的编译速度和启动时间。编译速度不说了。运行速度 Scala 应该是很快的，但是启动（预热）却很慢。

种种蛋疼的情况让我重新审视用 Scala 是不是特别好的方案，我想要一门执行速度相对较快，语法对写编译器相对友好的语言。Scala 已经很接近了，但是还不够。这让我想起之前用过 OCaml 来写过编译器，感觉代数形式的数据结构天生对编译器和静态分析非常友好。而且有两个项目非常启发到我：

Flow：静态分析工具，但是已经演化到类似 TypeScript 那样，变成一门语言了。我个人用过 flow，但是感觉非常慢，比 TypeScript 慢很多，但是我觉得不是 OCaml 慢，而是 flow 本身设计的问题。设计 TypeScript 的 Anders Hejlsberg 毕竟是编译器领域的大牛，很多坑都踩过，像 TypeScript 和 VSCode 联动体验这么好肯定是经过优良设计的。
BuckleScript：把 OCaml 编译到 JS 的编译器（其实也算一门语言？）。作者号称编译速度最快的语言，编译速度比 TypeScript 还快，并附上了 benchmark。这点也可以理解。毕竟 OCaml 这门语言比 TypeScript 简单太多了。这让我看到了一线生机，OCaml 写出来的编译器也可以很快的啊。

优点：

ADT
冷启动速度却可以秒杀 Scala。想象一下编译几个文件的项目，Scala 还要等 JVM 预热才能达到峰值，其实很蛋疼。
编译速度很快（相比 Scala）

缺点：

现在 OCaml 依然没有办法实现真正意义上的多线程：有 GIL。而我觉得这不是痛点，而且 multi-core OCaml 准备推出了（2020 年？）。
如果需要和 JS 联动，需要编译成 JS

使用 Flow Parser

Github: https://github.com/facebook/flow

Flow 是利器。

自己从头开始写 ES 的 Parser 是不太现实的。很幸运 flow 就提供了这么一个工具。Flow 的代码结构还是蛮清晰，我一看项目目录基本了解各个模块的作用，而 parser 是作为独立的一部分：Flow Parser

AST 定义：https://github.com/facebook/flow/blob/master/src/parser/flow_ast.ml

Flow 的 AST 都写在一个文件里面，我们看 program 的定义：

type ('M, 'T) program = 'M * ('M, 'T) Statement.t list * 'M Comment.t list [@@deriving show]

一个 program 就是 list of Statment.t。有两个泛型参数 'M 和 'T 充斥着整个 AST，虽然它的作用很巧妙，但是却并不是那么直观。实际上 parser 输出的结果中，'M 和 'T 都是 Loc.t，就是 AST 的位置信息，那么为什么需要两个范型呢？我们只要看 Statement 和 Expression 两个地方的定义就明白了：

Statement

  and ('M, 'T) t = 'M * ('M, 'T) t'
  and ('M, 'T) t' =
    | Block of ('M, 'T) Block.t
    | Break of 'M Break.t
    | ClassDeclaration of ('M, 'T) Class.t
    | Continue of 'M Continue.t
    | Debugger
    | DeclareClass of ('M, 'T) DeclareClass.t
    | DeclareExportDeclaration of ('M, 'T) DeclareExportDeclaration.t
    | DeclareFunction of ('M, 'T) DeclareFunction.t
    | DeclareInterface of ('M, 'T) Interface.t
    | DeclareModule of ('M, 'T) DeclareModule.t
    | DeclareModuleExports of ('M, 'T) Type.annotation
    | DeclareTypeAlias of ('M, 'T) TypeAlias.t
    | DeclareOpaqueType of ('M, 'T) OpaqueType.t
    | DeclareVariable of ('M, 'T) DeclareVariable.t
    | DoWhile of ('M, 'T) DoWhile.t
    | Empty
    | ExportDefaultDeclaration of ('M, 'T) ExportDefaultDeclaration.t
    | ExportNamedDeclaration of ('M, 'T) ExportNamedDeclaration.t
    | Expression of ('M, 'T) Expression.t
    | For of ('M, 'T) For.t
    | ForIn of ('M, 'T) ForIn.t
    | ForOf of ('M, 'T) ForOf.t
    | FunctionDeclaration of ('M, 'T) Function.t
    | If of ('M, 'T) If.t
    | ImportDeclaration of ('M, 'T) ImportDeclaration.t
    | InterfaceDeclaration of ('M, 'T) Interface.t
    | Labeled of ('M, 'T) Labeled.t
    | Return of ('M, 'T) Return.t
    | Switch of ('M, 'T) Switch.t
    | Throw of ('M, 'T) Throw.t
    | Try of ('M, 'T) Try.t
    | TypeAlias of ('M, 'T) TypeAlias.t
    | OpaqueType of ('M, 'T) OpaqueType.t
    | VariableDeclaration of ('M, 'T) VariableDeclaration.t
    | While of ('M, 'T) While.t
    | With of ('M, 'T) With.t

Expression

  type ('M, 'T) t = 'T * ('M, 'T) t'
  and ('M, 'T) t' =
    | Array of ('M, 'T) Array.t
    | ArrowFunction of ('M, 'T) Function.t
    | Assignment of ('M, 'T) Assignment.t
    | Binary of ('M, 'T) Binary.t
    | Call of ('M, 'T) Call.t
    | Class of ('M, 'T) Class.t
    | Comprehension of ('M, 'T) Comprehension.t
    | Conditional of ('M, 'T) Conditional.t
    | Function of ('M, 'T) Function.t
    | Generator of ('M, 'T) Generator.t
    | Identifier of 'T Identifier.t
    | Import of ('M, 'T) t
    | JSXElement of ('M, 'T) JSX.element
    | JSXFragment of ('M, 'T) JSX.fragment
    | Literal of Literal.t
    | Logical of ('M, 'T) Logical.t
    | Member of ('M, 'T) Member.t
    | MetaProperty of 'M MetaProperty.t
    | New of ('M, 'T) New.t
    | Object of ('M, 'T) Object.t
    | OptionalCall of ('M, 'T) OptionalCall.t
    | OptionalMember of ('M, 'T) OptionalMember.t
    | Sequence of ('M, 'T) Sequence.t
    | Super
    | TaggedTemplate of ('M, 'T) TaggedTemplate.t
    | TemplateLiteral of ('M, 'T) TemplateLiteral.t
    | This
    | TypeCast of ('M, 'T) TypeCast.t
    | Unary of ('M, 'T) Unary.t
    | Update of ('M, 'T) Update.t
    | Yield of ('M, 'T) Yield.t

上述代码就是在说，所有的 Expression 结点都会附上一个 'T 信息，所有的 Statement 都会附上一个 'M 信息，这就很容易理解了。所以这两个范型是用来区分 Statement 和 Expression 的。在 flow 里面进行 type infer 和 type check 的时候，实际上 'T 会是 (Loc.t * Type.t)。这个是 type check 阶段附上的信息，而 Statement 不需要这个信息，所以它仍然是 Loc.t。举个类型推导例子 🌰 来说明 'T 附在表达式上的作用：

var a = 1 + 1;

var a = ((1: 'T) + (1: 'T)): 'T
var a = ((1: number) + (1: number)): 'T
var a = ((1: number) + (1: number)): number
var a: number = ((1: number) + (1: number)): number

从上述过程可以推出 a 的类型是 number，这个类型信息挂在所有 expression 的 AST 的上面，而 var 语句的 node 不需要这个信息。

安装 Flow Parser

原本 flow_parser 可以从 opam 安装，但是我更新了 opam 之后似乎因为一些安全策略禁止包里面的 bash 脚本执行（当时社区发生了一件事，一个包的 bash 脚本把用户的整个 ~ 目录删掉，似乎是手滑写的脚本就发布了，后来 opam 对 bash 脚本做了些限制）。所以后来我只能 clone 了 flow 的代码本地进行安装

进入 src/parser 目录执行：

$ make ocamlfind-install

即可安装成功。如果使用 ocamlbuild 编译，进入 _tag 文件，加上 flow_parser。我的 _tag:

true: package(ppx_deriving.show), package(flow_parser), package(core_kernel)
<dist>: -traverse

使用方法

使用 Flow_ast 自带的 pp 和 show 方法可以把 AST 打印出来，前提是你要传入 'T 和 'M 的 pretty print 方法，这里我把 Loc.pp 传进去即可：

let ast, _ = Parser_flow.program code in
Flow_ast.show_program Loc.pp Loc.pp ast |> print_endline;

大功告成！

2018 不停留

Tue, 01 Jan 2019 00:00:00 GMT

人生中一些很重要的时间段，往往会像细水那样慢慢流走，回过头来才发现，涓涓细水汇成了江河大海。对于我来说 2018 年就是这样的一年，回头一看觉得很平淡，但是不乏丰富的细节。

关键词： GSoC，大四，实习

（暂不开放)

在 Mojave 下编译 SpiderMonkey

Mon, 29 Oct 2018 00:16:14 GMT

自从 macOS 升级到 Mojave(10.14) 之后，编译 SpiderMonkey 变得有点不同。

有一点比较重要的变化是 libstdc++ 被替换成 libc++，这个修改是从 OS X 10.9 就开始有的修改，所以直接调用 ./configure 有这样的 warning 和报错：

checking whether the C++ compiler (/usr/bin/clang++  -fno-common -fno-rtti  -lobjc) actually is a C++ compiler... no
configure: error: /usr/bin/clang++  -fno-common -fno-rtti  -lobjc failed to compile and link a simple C++ source.
------ config.log ------
; return 0; }
configure:7837: checking for 64-bit OS
configure:7846: /usr/bin/clang -c  -std=gnu99 -Qunused-arguments  conftest.c 1>&5
configure:8119: checking for -framework ExceptionHandling
configure:8129: /usr/bin/clang -o conftest  -std=gnu99 -fno-common -Qunused-arguments   -lobjc -framework ExceptionHandling conftest.c  1>&5
configure:8151: checking for -dead_strip option to ld
configure:8162: /usr/bin/clang -o conftest  -std=gnu99 -fno-common -Qunused-arguments   -lobjc -Wl,-dead_strip conftest.c  1>&5
configure:9034: checking for valid debug flags
configure:9045: /usr/bin/clang -c  -std=gnu99 -fno-common -g -Qunused-arguments  conftest.c 1>&5
configure:9134: checking whether the C++ compiler (/usr/bin/clang++  -fno-common -fno-rtti  -lobjc) actually is a C++ compiler
configure:9153: /usr/bin/clang++ -o conftest  -fno-common -fno-rtti -Qunused-arguments   -lobjc conftest.C  1>&5
clang: warning: libstdc++ is deprecated; move to libc++ with a minimum deployment target of OS X 10.9 [-Wdeprecated]
warning: include path for stdlibc++ headers not found; pass '-std=libc++' on the command line to use the libc++ standard library instead [-Wstdlibcxx-not-found]
configure:9147:10: fatal error: 'new' file not found
#include <new>
         ^~~~~
1 warning and 1 error generated.
configure: failed program was:
#line 9146 "configure"
#include "confdefs.h"
#include <new>
int main() {
int *foo = new int;
; return 0; }
configure: error: /usr/bin/clang++  -fno-common -fno-rtti  -lobjc failed to compile and link a simple C++ source.

很明显，报错原因是因为标准库 new 找不到，原因也在于 libstdc++ 被替换了，但是天杀的报错信息写错了。应该加入的 flag 是 -stdlib=libc++ 而不是 -std=libc++，这一点很坑爹。

但是加上了这个 flag 仍然不能编译，因为又有报错：

clang: error: invalid deployment target for -stdlib=libc++ (requires OS X 10.7 or later)

想了半天，我的系统不是 10.14 吗，后来才知道是因为要设置 deployment target，很坑爹，所以最后让我编译成功的命令是：

$ CXXFLAGS="-stdlib=libc++ -mmacosx-version-min=10.7"

写篇 blog 庆祝一下。

理解 Scala 中的 for 表达式

Sun, 10 Jun 2018 02:58:33 GMT

Scala 中的 for 表达式非常强大，用起来很简单顺手，但是理解起来可能需要一些背景知识。这个 for 从名字上看让我们觉得它很像命令式语言中的那种 for statement，但是其实 Scala 的 for 是非常函数式的，它跟命令式语言中的 for 语句根本不是一个东西，因为它根本不支持 break 和 continue 这些语句。

官方文档提供的例子：

val twentySomethings = for (user <- userBase if (user.age >=20 && user.age < 30))
  yield user.name  // i.e. add this to a list

Scala 的 for 表达式倒是很像 Python 和 Haskell 里面的 list comprehension，其实这个 for 表达式基本上可以等同于 Haskell 的 list comprehension 加上 do annotation 了。然而 Haskell 里面 list comprehension 和 do 也是一个东西，所以基本等同于 for comprehension。

在理解 for 之前，需要先了解 map 和 flatMap，这些概念在 Scala 和 Haskell 中很相似：

Map

map 大多数人会用在 List 上面，但是更广义的概念上，map 可以用在任何带有 context 的类型上面，不仅限于 List：

// map 通过一个函数，可以把 A 元素的列表转换成列表 B 的
map(f: A => B): List[A] => List[B]

同理，map 不仅可以用在 List 上面，也可以用在类似 Option 和 Future 这样的类型上面。从直观意义上理解，map 同样可以把 Option[A] 转换成 Option[B]，把 Future[A] 转换成 Future[B]。

在 Hasekll 里面，这种支持 map 操作的类型，叫做 Functor，Scala 里面似乎没有一个名字。

FlatMap

flatMap 理解起来则稍微复杂一些，看一下 List 里面的 flatMap:

def flatMap[U](f: T => List[U]): List[U]

这里面的 f 不再像 map 里面返回一个新的子类型，而是，返回一个带有 context 类型本身： List[U]。也就是说 f 函数返回的新类型是包含在 context 里面的。需要注意的是在这里，返回的结果并不是 List[List[U]]，而是仅仅是 List[U] 。通过 flatMap 这个名字中的 flat 我们也知道，最后的结果会是把每个 list 都拼接在一起，也就是所谓的拍平了。

上面提到的是 List 的 flatMap，同样地，Future 类型同样也是支持 flatMap 的，它的的参数 f 类型我们应该也猜到了：

def flatMap[U](f: T => Future[U]): Future[U]

通过 flatMap 我们就可以做很多事情了。这个时候假设我们有函数 fetch1 和 fetch2 ，都是返回 Future[Response]，如果我们要先 fetch1 然后根据 1 的 response 来 fetch2 ，然后把 2 的结果打印出来，我们要怎么做呢：

// 写法一
val resp2 = fetch1
.flatMap { resp1 =>
    // do something
    fetch2(resp1.data) // 通过 1 的结果来返回新的 Future
}
.map { resp2 =>
    printf(resp2.data)
    resp2.data
}

然后回到开头，我们可以用 for comprehension 来完成这个事情：

// 写法二
val resp2 = for {
    resp1 <- fetch1()
    resp2 <- fetch2(resp1.data)
    printf(resp2.data)
} yield resp2.data

其实实际上，Scala 会把上述代码翻译成与下面等价的样子：

// 写法三
val resp2 = resp1
.flatMap { resp1 =>
    fetch2(resp2.data)
    .map {
        printf(resp2.data)
    	resp2.data
    }
}

只要你仔细观察，你就会发现，在这个例子里面，这三种写法的结果都是一样的，但是第一种写法有什么缺点呢，缺点就是在第二个 flatMap 里面，resp1 已经不在作用域里面了，这个时候如果你还想调用 resp1 已经不可能了，但是写法三是可以的：

// 写法三
val resp2 = resp1
.flatMap { resp1 =>
    fetch2(resp2.data)
    .map {
        printf(resp1.data) // 在这里仍然可以调用 resp1，因为它还在作用域里面
        printf(resp2.data)
    	resp2.data
    }
}

这样看起来就跟 Haskell 的 Monad 很接近了。

For 表达式的几种翻译方式

其实明白了 map 和 flatMap 之后，for 表达式很容易理解了。但是实现起来还要参考 for 表达式的翻译方式。

If

值得注意的是 if 语法：

for(x <- c; if cond) yield {...}

会被翻译成：

c.withFilter(x => cond).map(x => {...})

当然会有 fallback （如果不支持 withFilter）：

c.filter(x => cond).map(x => {...})

这时候再看文章开头的例子：

val twentySomethings = for (user <- userBase if (user.age >=20 && user.age < 30))
  yield user.name  // i.e. add this to a list

会被翻译成：

val twentySomethings = userBase
.filter { user =>
    user.age >=20 && user.age < 30
}
.map { _.name }

就很容易理解了

赋值语句

for 表达式中同样支持赋值语句（这里说的是 = 不是 <-），这在处理异步请求的时候非常常见：

val resp2 = for {
    resp1 <- fetch1()
    data = doSomething(resp1)
    resp2 <- fetch2(data)
    printf(resp2.data)
} yield resp2.data

注意，在 for comprehension 中写 = 赋值语句并不需要写 var 或者 val ，至于为什么，只要看它会被翻译成什么样子就能明白：

val resp2 = for {
    resp1 <- fetch1()
    data = doSomething(resp1)
    resp2 <- fetch2(data)
    printf(resp2.data)
} yield resp2.data

var resp2 = fetch1()
.map { resp1 =>
    (resp1, doSomething(resp1))
}
.flatMap { 
    case (resp1, data) =>
    	fetch2(data)
    .map { resp2 =>
        printf(resp2.data)
        resp2.data
    }
}

所以这个时候再写 val 和 var 已经没什么意义了

CPS 变换

其实 Scala 做的这个变换是一种 CPS(Continuation Passing Style) 变换，把一系列看上去想是赋值 <- 的操作转换成 CPS 的形式，这有什么好处呢，通过这种变换，map 和 flatMap 的参数 f 就可以是一个纯（Pure）的函数，也就是说通过一系列纯函数的组合，可以实现像命令式编程里面的有状态的赋值操作，而这些操作是含有上下文（context）的。

另一个好处是，像下面这种调用：

c1.map(p1 => p1.map(p2 => p2.map(p3 => ...)))

其实是尾递归调用，编译器可以为此做很多优化，提高运行速度。

总结

for comprehension 其实是一个很甜很好用的语法糖，可以帮我们省下很多代码。我们当然可以选择继续用 flatMap 和 map，但是 for 就能用很简单的语言写出来。当然，简单的背后是有代价的，用 for 的过程中就需要使用者明白表达式最终会被怎样转换成相应的 flatMap 和 map 代码，这样才能让我们写出简洁的 for comprehension。

这个时候，我真的很佩服 Scala 的设计，让整个语言各个部分的设计都非常容易和优雅地组合，设计得相当地精妙，同时我在其中也看到了一些 Haskell 的味道。

webpack 如何通过作用域分析消除无用代码

Fri, 25 May 2018 14:24:18 GMT

GSoC 2018 中，我的项目就在于给 webpack 实现深作用域分析（Deep Scope Analysis），主要还是为了改进 webpack 的 tree-shaking 工作。

前言

JS 的 tree-shaking 一直是前端开发中的痛点，大家都在想尽办法减少打包的代码体积。Tree shaking 是一个帮助在不同模块之间消除无用代码的 feature。在编译原理中，我们把这项技术叫做 DCE(dead code elimination)。但是 DCE 和 tree shaking 有些许不同，按照 Tobias 的说法，tree shaking 主要应用于于模块（module）之间，用于帮助进行 DCE（webpack 的 DEC 通过 uglify 完成），rollup 的作者也曾经提到， tree shaking 是打包的过程中抽取有用的部分，别的部分像树叶一样落下，所以叫 tree shaking。

项目地址

从前

webpack 本身的 tree shaking 比较简单，主要是找一个 import 进来的变量是否在这个模块内出现过，非常简单粗暴。但是这种方式往往作用不大，因为一般人不会去 import 一个没有用到的变量。比较多的情况是可能曾经引用过，但是忘了删掉。现在的编辑器和 lint 工具都会提示你去删掉无用的变量，所以 webpack 本身的 tree shaking 功能是不够强大的。

在上面的例子中，变量 isNumber 并没有被引用到，所以会被消去。

开端

在今年年初，webpack 项目下面有一个 issue 提到了 webpack 打包了多余的代码和模块。但是这也为优化 tree-shaking 提供了一个思路，就是找到作用域之间的关系，来进行优化。

在上面的例子中，其实 function2 和整个 external2 都可以被消去，因为 function2 并没有被 entry 引用到。但是目前 webpack 的机制不能做到这一点。借助于 webpack 强大的插件极致，我的插件就可以帮助 webpack 做到。

我的插件做了什么

插件包括了一个作用域分析器，可以分析一个模块里面的作用域，从此我们可以得到不同作用域之间变量的引用关系。当我们知道一个作用域是否会被使用，就可以因此而推断出这个作用域做引用的其他作用域是否也会被使用。这就是作用域分析器帮助消除无用代码的原理。

什么是作用域

下面的代码列举了 JS 中会新建一个作用域的代码：

对于 ES6 模块来说，module scope 是最底层的作用域。而对于一个模块来说，只有 class 和 function 的作用域是可以导出到其他模块的。所以在这张需要遍历的图里面，并不是所有的作用域都可以被当作一个独立的遍历结点，像 if-else 作用域其实是归属于父作用域的。

插件的工作原理

在我们去分析作用域之间的引用关系之前，我们先需要去分析代码的作用域。代码的作用域分析建立在 AST(Abstract Syntax Tree) 之上。在这里，我借助了一个叫 escope 的工具。

解析完之后，其实就是图的深度遍历，找到那些作用域是会被使用到了，哪些是可以消去的。

因为这个插件可以从导出的作用域之间分析出这些导出的作用域和导入变量之间的关系，也就是说。只要知道哪些导出作用域被使用的到，那么就知道哪些导入变量被引用，那些没有被引用。

另一方面，webpack 本身是可以分析出模块之间的变量引用关系的，从 webpack 我可以得知一个模块哪些导出变量是被用到的，这是 webpack 4 的新 feature。所以我的插件 tap 上了 webpack 相应的 hook，获取这个模块中会被其他模块引用的导出变量，返回给 webpack 哪些引入的变量被用到，这样 webpack 就可以根据我的插件的信息进行更完善的 tree-shaking。

Edge cases

实际上，JavaScript 的分析有很多 Edge cases 会导致代码不会被消去，这里列举一些比较常见的：

同时提供一个 Demo 来给大家尝试。

根作用域的引用

在根作用域引用到的作用域不会被消除。

给变量重新赋值 👎

因为缺少数据流分析，对变量重新赋值的作用域不会被消去。在上面的例子中，因为对 fun 变量进行了重新赋值，所以 isNull 无论如何都会被引入。

纯函数调用 👍

如果一个匿名函数被包在一个函数调用中，那么其实这个插件是无法分析的，像上面的例子。但是如果加上了 PURE 注释的话，这个插件会把这个函数调用当作一个独立的域，所以在上述的例子中，tree-shaking 是会生效的。

实际使用的过程中应该注意什么

深作用域分析原理很简单，实现起来也不复杂，但是真的要使用再实际项目的过程中，却有很多要注意的地方：

一、必须使用 ES6 的 import/export 模块机制。

其实整个深作用域分析都是基于 ES6 模块完成的，也就是说深作用域分析无法分析 CommonJS 和 AMD 等等模块规范。这个时候，就要求项目中引用的模块都遵循 ES6 的规范，比如使用 lodash-es 代替 lodash。另外就是要注意 babel-loader 和 TypeScript 的设置，是否会把代码转换到 ES5 语法，导致深作用域分析失效。

二、学会使用 PURE 注释。

由于 JS 语法的复杂程度，webpack 没有打算给 JS 实现数据流分析，所以插件是无法知道一个函数调用是否具有副作用的。所以对于一些导出模块，如果是纯的函数调用，则需要加上 /*@__PURE__*/ 注释来表明这个函数是 pure 的，这是 Uglify 使用的方法。当然也可以使用相关的 babel 插件进行批量添加。

总结

其实我这插件的实现是归根于 ES6 中良好的 import/export 语法的设计的。相信很多前端大佬都提到，就是模块的设计一定要合理。tree shaking 再强大它也只是一个编译器的工具，如果模块设计不合理，它一样会在打包的时候引入很多无用的代码。一个合理设计的模块一定能借助 tree shaking 机制只引入它需要的代码。

GSoC 之旅

Sun, 29 Apr 2018 14:16:00 GMT

有幸被 webpack 选中参加今年的 GSoC，这次的 GSoC 我主要负责实现 Deep Scope Analysis，这个最后会被用到最新版本的 webpack 里面用于 Tree Shaking

Github 项目地址：webpack-deep-scope-analysis-plugin

根据 webpack 的要求，我会把 GSoC 期间发现的事情记录在 Medium

Better tree shaking with deep scope analysis

Here’s my project in GSoC 2018: Improve tree-shaking for webpack, a widely used JS code bundler.
My story with GSoC 2018: Beginning

This is the first part of my stories with GSoC 2018. I will tell my personal experiences and all the things happened with GSoC 2018 in the series.
Deep Scope Analysis Demo

一个简易的用于测试分析结果的 demo

初窥 Racket：解析一个数学表达式

Sun, 28 Jan 2018 19:09:00 GMT

当 Haskell 这些静态类型的函数式语言玩久了，就想尝试一下动态类型的函数式语言，比如 Lisp，最古老的编程语言之一。不过现在写 Lisp 是不现实，因为原始的 Lisp 是 dynamic scope 的，写起来会异常痛苦。所以我打算从 Lisp 的一些比较现代方言下手，比如说 Racket 这种广受赞誉的语言。

看了一下官方文档之后感觉还是应该写点什么实际的东西感受一下，个人比较喜欢写数学表达式解析器了。之前写过一篇「初窥Haskell：解析一个数学表达式」。所以这次打算用 Racket 写解析一个数学表达式程序。

Racket 不是一个“纯”的语言，所以在 Racket 里面写有副作用的代码是没有问题的，说不定还会有更高的效率。但是这次我没有这么做，因为受到 Haskell 的影响，所以我还是用“纯”函数式的方法去实现。

(define (char->op ch)
  (cond
    [(char=? ch #\+) 'add]
    [(char=? ch #\-) 'sub]
    [(char=? ch #\*) 'mul]
    [(char=? ch #\/) 'div]))

(struct token (type value)
  #:prefab)

(define (tokenizer content)
  (letrec (
    [char-list (string->list content)]
    [my-tokenizer (lambda (reading-buffer number-buffer token-buffer)
      (if (null? reading-buffer)
        (if (null? number-buffer)
          token-buffer ;;; 所有字符都已经解析完毕
          (cons  ;;; 还有 number-buffer 的字符串
            (token 'number 
              (string->number (list->string (reverse number-buffer)))) 
            token-buffer))
        (let (
          [first-char (car reading-buffer)]
          [buffer-tail (cdr reading-buffer)]
        ) (if (char-numeric? first-char) ;;; 当前字符是一个数字
              (my-tokenizer buffer-tail (cons first-char number-buffer) token-buffer)
              (if (null? number-buffer)
                (let (
                  [current-token (token 'operator (char->op first-char))])
                  (my-tokenizer buffer-tail (list) (cons current-token token-buffer)))
                (let (
                  [number-token 
                    (token 'number 
                      (string->number 
                        (list->string 
                          (reverse number-buffer))))]
                ) (my-tokenizer 
                    reading-buffer 
                    (list) 
                    (cons number-token token-buffer))))))))]
  ) (my-tokenizer char-list (list) (list))))

以上代码实现了一个 tokenizer，是用尾递归的方法来实现的。

Lisp 的括号语法一直饱受争议，但是这样做不是没有好处的，就是整个 Lisp 写起来其实没有太多复杂的语法，而且语法都显得很一致，很容易组合，而且 Racket 有很强的宏编程能力，关于这点我还没有了解。有人把 Lisp 理解成手写 AST(Abstract Syntax Tree)，这种说法我觉得也没有问题。

一般的类 C 语言的变量名喜欢用下划线或者驼峰标记法来区分，而在 Racket 里面，则可以用 this-is-a-variable 这种小短杠来表示，个人觉得看上去还是很舒服的。另一方面，很多标点符号也可以用来作为变量名，比如 string? 是一个用来判断变量是否为 string 的函数。比如 string->numer 用来表示字符串转数字的函数，个人感觉非常直观。

和 Haskell 相比起来会麻烦一点的地方就是要自己去判断变量的类型，但是这也意味着给语言提供更大的灵活性。

(define (get-precedence x) 
  (match x
    ['add 1]
    ['sub 1]
    ['mul 2]
    ['div 2]))

(define (eval tokens)
  (letrec (
    [get-handler (lambda (op)
                  (match op
                    ['add +]
                    ['sub -]
                    ['mul *]
                    ['div /]))]
    [my-eval (lambda (tokens num-stack op-stack)
                (if (null? tokens)
                  (match op-stack
                    [null (car num-stack)]
                    [(cons top-op op-stack-tail)
                      (let* 
                        (
                          [num1 (car num-stack)]
                          [num2 (car (cdr num-stack))]
                          [num-stack-tail (cdr (cdr num-stack))]
                          [handler (get-handler top-op)]
                          [result (handler num1 num2)]
                        )
                        (my-eval (list) (cons result num-stack-tail) op-stack-tail))])
                  (let* (
                    [next-op (token-value (car tokens))]
                    [next-number (token-value (car (cdr tokens)))]
                    [tokens-tail (cdr (cdr tokens))]
                  ) (match op-stack
                      [null 
                        (my-eval 
                          tokens-tail 
                          (cons next-number num-stack) 
                          (cons next-op op-stack))]
                      [(cons top-op op-stack-tail)
                        (let* (
                            [op-stack-tail (cdr op-stack)]
                            [top-op (car op-stack)]
                            [top-op-precedence (get-precedence top-op)]
                            [next-op-precedence (get-precedence next-op)]
                          ) (if (> next-op-precedence top-op-precedence)
                              (my-eval 
                                tokens-tail 
                                (cons next-number num-stack) 
                                (cons next-op op-stack))
                              (let* (
                                [num1 (car num-stack)]
                                [num2 (car (cdr num-stack))]
                                [num-stack-tail (cdr (cdr num-stack))]
                                [handler (get-handler top-op)]
                                [result (handler num1 num2)]
                              ) (my-eval tokens (cons result num-stack-tail) op-stack-tail))))]))))]
    [num (token-value (car tokens))]
    [token-tail (cdr tokens)]
  ) (my-eval token-tail (list num) (list))))

上述代码定义了一个 eval 函数，用优先级解析的方法去解析上面写的函数生成的 tokens

代码写起来会比 Haskell 版本的稍长一点，但是个人感觉非常清晰，语法也很一致和漂亮。个人感觉是 Racket 确实是一门非常漂亮的语言，也没有像 Haskell 玩各种概念这么烧脑，还是动态类型的，平时娱乐一下开拓一下眼界感觉非常好。

关于函数式

Mon, 13 Nov 2017 12:54:18 GMT

此篇博文整理了我和 walkerlala 关于函数式相关问题的讨论

Vincent Chan

我觉得函数式很重要的一点是 Immutable，使得每一次更改都要重新生成一次整个数据结构（当然我们可以通过编译器优化来减少某些生成），但是immutable 也使得整个程序的状态可以被记录和更改。我之前写前端的时候就尝试了 Redux + React 这种模式。这种模式很有意思，我刚写起来的时候觉得超级别扭，写了很多无用的代码。但是当我开始着手用它来写一个前端项目的时候，我开始体会到了这里面的思想（虽然我仍然觉得很恶心和别扭，因为它尝试用 js 来写函数式)。

我们都知道 html 界面其实就是一颗很庞大的树，有很多 html 节点，这些html 节点里面有很多子节点，每个子节点又有自己的属性（attributes）。当我们以前写的 jQuery 代码都在干什么？就是绑定一个节点的事件，然后更改另一个节点。想想看，我相信你写过 jQuery，我们先在这个庞大的 document 树里面 query 到节点，比如一个 button，然后我们监听它的click 事件，当这个事件发生时，我们 query 另外一个节点，比如一个label，然后修改里面的内容。这就是我们以前用 jQuery 做的事情。

而 Redux+React 的事情是这样的，React 维护着一个 js 的假的 document tree，这棵树和真正的 document tree 比起来是很轻量级的，也很快，然后通过这颗虚拟的树去生成真的 document 树。每当一个状态改变了，然后，重新生成一颗虚拟树，然后和老的虚拟树做 diff，然后更新真的 DOM。这种做法看起来很折腾，但是却有它的用处：什么状态就对应怎样的 DOM，也就是你状态没错，你界面肯定就没错。想想之前 jQuery 的办法，逻辑多起来，你怎么保证状态一定是你脑中的那样。那我们怎么管理这个状态呢？这里就用 Redux 了：

每当我们要改变一个状态时，我们就是要 sending a message，这个message 是一个数据，告诉 redux 我要更改什么，删除什么，添加什么……然后我们会定义一个 reducer，reducer 的作用就是通过一颗旧的状态树，接收消息之后，通过消息来生成一颗新的状态树，然后把新的状态树交给React 生成新的虚拟 document 树，然后再做 diff，然后更新视图。

刚才 jQuery 做的事情，我现在用 Redux+React 的方法重新做一遍：把某个按钮绑定某个 meesage，当用户按下某个按钮，就发送一个 message，告诉 Redux 要更新某个 label 的值，Redux 根据 message 重新生成新的状态树，包含了新的 label 值，然后生成新的虚拟 DOM 树，然后和旧的比较，做 diff，然后更新真正的 DOM。

当你开始用 Redux+React 重新写上面的流程的时候，你会沉浸在很多细节里面，因为要解决很多问题，但是你简化这个模型，发现这就是 FP 的思想，而这种思想来源于 Elm，这是一个 Haskell 写成的语言，语法是仿Haskell 的，可以编译成 js 代码，而这门语言所实现的，就是刚才所说的Redux+React 架构，当我们用 Elm 写上面这一切的时候，你会发现，这种做法用FP语言去做是多么自然，React+Redux 几百行代码才做好的事情，用Elm可以用不到一百行写出来，建议你去官网看看，代码真的非常漂亮。我觉得写 Redux+React 简直就是在人工编译 Elm 代码。

至于为什么 Elm 没有火起来，而 Redux+React 火了，我相信你也明白，Redux+React 是用 js 写的，可以和现有的代码很好的结合，而 Elm 要重写代码，Haskell 语法一般人也很难接受，加上 React 有 Facebook 的爹（摊手

Yubin Ruan

Hmm... 对我来说，FP 的 Immutable 的好处有两种：

因为没有 side effect 所有比较好 reasoning；

因为看起来像看数学公式一样所以逻辑清晰（同时也方便形式化验证）。

但是你上面所说的状态，真的也是 FP 的好处吗？即使是一个状态对应一个虚拟树，但是如果逻辑多起来(e.g., 状态A => 状态B => 状态C)，怎么保证状态一定是脑海中的那样呢？JQuery 的确有这个问题(状态比较乱），但是 Elm 貌似也治标不治本...?

当然，如果 Elm 是内嵌 Redux+React 的模式的话，肯定是比 jQuery 要好。

我其实写过很多 JS 代码，虽然没有正式看过他的语法（至今还分不清 === 和 == 的区别）。给我的感觉的确很操蛋...大括号换行还能改变程序的意思；闭包是假闭包，而且你还不知道这个闭包是真的还是假的（C++ 的闭包虽然可以非 Immutable，但是起码都会在闭包声明的时候看得到）...

我觉得终究会有一门语言来操翻 js 的 (摊手

诶，如果C语言里面有 hygien macro 我觉得就完美了。

初窥 Haskell：解析一个数学表达式

Mon, 30 Oct 2017 20:26:27 GMT

最近在学习 Haskell，不得不说，这真的是一门令我着迷的语言，lazy 和纯函数式等特性都非常吸引我，不过短时间内还无法掌握得很好，最重要是思维的转变非常苦难。

学习一门语言最好的办法就是多实践，我还记得我写过一片文章编译原理学习笔记1：解析数学表达式来讲述怎样去解析数学表达式，但是我没有讲如何去实现，现在刚好用 Haskell 实现一个。

本篇文章所有源码https://gist.github.com/vincentdchan/78435adcbb007df77e0c674201202925

gists 里包含了我曾经在我的作业里面用 C# 实现了一个过程式的数学表达式运算器，总代码 161 行，而 Haskell 版只用了54行。FP 的 pattern matching 在写状态复杂的程序的时候真的如虎添翼。

写一个词法分析器 Tokenizer

我们要把字符串解析成一个个 token，也就是我们平时所说的词法分析器里面的”词“，想想一个数学表达式里面有什么类型的 token？大概是只有数学符号和是数字？

data Token = Num Int 
    | T_Plus | T_Sub 
    | T_Mul | T_Div
    deriving (Show)

注意我在上一篇博文里面提到的优先级问题，我们需要有一个函数来返回操作符的优先级，我们可以用 pattern matching

getPrecedence:: Token -> Int
getPrecedence T_Plus = 1
getPrecedence T_Sub = 1
getPrecedence T_Mul = 2
getPrecedence T_Div = 2

这种表达可以说是非常优雅了，然后开始写一个词法分析器……的定义

tokenizer:: String -> [Token]

Haskell 的类型定义，一个词法分析器输入一个字符串，然后输出一串 Token

接下来看我放大招

tokenizer 函数将调用下面这个稍微复杂一点的 _tokenizer 来完成词法分析操作，下面我来解释一下这个函数的参数有什么作用

第一个参数就是待解析的字符串
第二个参数是暂存的数据缓冲区，如果我们要读入数字1234，那么要先把123先缓存起来，读入4后再一起解析
第三个参数是之前已经读入的token, 我们把这次解析出来的token连接进去，然后通过递归传给下一次运算，最后直接返回下一次的递归调用返回的值，这种写法叫做尾递归，可以减少内存的使用。关于尾递归这里不详细说。

_tokenizer:: String -> String -> [Token] -> [Token] -- 尾递归写法
_tokenizer "" [] previous = previous -- 所有字符都解析完毕
_tokenizer "" buf previous = ((Num $ read $ reverse buf):previous) -- 字符都解析完毕，但是缓冲区还有数据
_tokenizer (ch:expr) buf previous = 
    if (Data.Char.isDigit ch) then -- 当前字符是一个数字
        _tokenizer expr (ch:buf) previous -- 把数字放入缓冲区
    else -- 当前字符不是数字
        case buf of  -- 检查缓冲区是否为空
            [] ->  -- 缓冲区为空
                case ch of -- 解析当前字符
                    '+' -> _tokenizer expr [] (T_Plus:previous)
                    '-' -> _tokenizer expr [] (T_Sub:previous)
                    '*' -> _tokenizer expr [] (T_Mul:previous)
                    '/' -> _tokenizer expr [] (T_Div:previous)
            _ -> _tokenizer (ch:expr) [] ((Num $ read $ reverse buf):previous) -- 缓冲区不为空，读取缓冲区字符

注意：缓冲区保存的数字缓冲是倒序的，当我们用 read 函数读取数值的时候，要先用 reverse 函数反转

然后 tokenizer 的定义就很简单了，我们词法分析出来的列表是倒序的，我们要用reverse函数来反转。

tokenizer expr = reverse (_tokenizer expr [] [])

表达式求值

到此为止，词法分析器就完成了，当我们对一串字符串调用 tokenizer 就可以得到一串 token 了，接下来就是如何对表达式进行求值，原理可以回顾编译原理学习笔记1：解析数学表达式，这里讲讲实现

-- 定义操作符运算
evalOp :: Token -> Int -> Int -> Int
evalOp T_Plus a b = a + b
evalOp T_Sub a b = a - b
evalOp T_Mul a b = a * b
evalOp T_Div a b = a `div` b

-- 搞一个好看点的包装函数
eval :: [Token] -> Int
eval ((Num value):tokens) = _eval tokens [value] []

-- 真正运作的函数在这里
_eval :: [Token] -> [Int] -> [Token] -> Int
-- 操作数栈里面只有一个数了，就是我们要求的值了
_eval [] [value] _ = value
-- 操作符栈数值为空，进行SHIFT操作
_eval (op:(Num num):tokens) numStack [] =
    _eval tokens (num:numStack) [op]
-- 操作符栈不为空
_eval (op:(Num num):tokens) numStack (topOp:opStack) =
    if (getPrecedence op) > (getPrecedence topOp) then
        _eval tokens (num:numStack) (op:topOp:opStack) -- SHIFT
    else -- REDUCE
        case numStack of
            (num1:num2:stack) ->
                _eval (op:(Num num):tokens) ((evalOp topOp num1 num2):stack) opStack
-- 栈里还有一些残留的值，继续运算
_eval [] (num1:num2:numStack) (topOp:opStack) =
    _eval [] ((evalOp topOp num1 num2):numStack) opStack

这里 _eval 的参数

要解析的 token 集合
操作数的栈
操作符的栈

总结

总的来说，在 pattern matching 的帮助下，写一个表达式求值的程序可以说非常简洁明了。当你用过程式语言去写 tokenizer 的时候，你需要控制一个指针在字符串上移来移去，非常容易出错，如果用 pattern matching，只需要定义好相应的字符串就可以了，非常优雅。

用 Python 生成饼状旋转动画

Sun, 29 Oct 2017 01:53:48 GMT

在写一个小游戏过程中，打算做一个饼状旋转的动画，于是打算用 Python 来生成这个动画，假设我们有这样一张图片

最后生成的动画是这个样子的

当然，中间会生成很多帧的动画

怎么去生成每一帧动画呢？其实关键就在于挖去一个饼状图形里面的像素

那我们只要遍历这张图片的所有元素，然后挖去在这个饼状范围内的像素即可，从这个思路出发，我们可以很容易想到使用极坐标。假设我们有两条极坐标空间里面的直线 p = Theta1 和 p = Theta2 那我们只要把这两条直线中间的像素挖掉即可。当我们遍历所有元素的时候，我们需要判断这个像素点在极坐标空间中的位置。当然，我们坐标的圆心是整个图片的中心，所以对于每个像素点，我们要减去整张图片中点坐标，求出的相对坐标再作 atan2 计算。

用 math.atan2 求出 theta 之后若在 theta1 和 theta2 之内，则删去即可，所以说核心代码其实很简单：

for x in range(SIZE[0]):
        for y in range(SIZE[1]):
            relative_point = (x - CENTER_POINT[0], y - CENTER_POINT[1])
            theta = math.atan2(relative_point[1], relative_point[0])
            theta = theta * 180 / math.pi + 180

            if theta >= theta1 and theta < theta2:
                draw = ImageDraw.Draw(img, 'RGBA')
                draw.point([x, y], (0, 0, 0, 0))    # write null pixel

最后附上源码 gist 地址: https://gist.github.com/vincentdchan/e120f3cacf88efbba3e51fa1b0084086

HTML Canvas实现《黑客帝国》数字雨

Mon, 19 Jun 2017 00:00:00 GMT

《黑客帝国》是我最喜欢的电影之一，我感觉《黑客帝国》里面的数字雨简直是一种艺术，非常好看，看上去非常高大上，而且和“雨”这种东西结合，非常有意思，于是想自己实现一下。

效果图:

在Canvas里面实现动画的思路其实很简单，在很短的时间里面刷新一次就行了。每次刷新的时候，字符都会下降，然而数字雨里面并不是整串“雨”往下移动一个单位，而是这个雨的最下端，显示了一个新的字符。

所以我们不妨换个思路，就是其实每个字符的位置其实是固定，每次刷新的不是每个字符的位置，而是刷新他们的颜色，让一个字符的颜色从最绿慢慢变黑，然后又变最绿，然后慢慢变黑……周而复始。最后把每个字符用Canvas在对应的坐标画出来就行了。

当然这当中有先后顺序，一列里面，第n个字符的颜色应该刚好比第n-1个字符少一个梯度，也就是说

第i秒的时候：
    第N个字符的颜色为 A
		第N-1字符的颜色为 A -1
	
第i+1秒的时候
		第N个字符的颜色为A-1
		第N-1个字符的颜色为A-2

当然了，为了要让每一条雨条下落的先后顺序不一样，必须给它们的颜色加一个随机的偏移量，然后取模，这样就会有先后落下的效果。

最后附上源码，需要用Babel编译一下

Github gist 源代码

写一个光线追踪渲染器

Thu, 18 May 2017 00:01:00 GMT

最近都在做一件事情，做一个光线追踪渲染器，一直很想揭开光线追踪渲染器的大门，于是跟着 Milo Yip 的步伐开撸了

用 JavaScript 玩转计算机图形学(一)光线追踪入门

渲染结果图：

其实制作的过程是非常坎坷的，我首先用 C# 按照博文的思路重写了一边，渲染出结果（1024x1024），总共耗时6秒，结果令人很不满意，觉得有点慢，于是打算用 C++ 重新实现一遍，使用 MSVC 编译器，第一次做出来的结果是2.1s，比 C# 快一点，但是优势还不是很明显。但是我做了如下改动之后，性能得到了极大的提升：

本来的写法：

std::shared_ptr<Result> function()
{
	if (do_something()) return std::make_share<Result>();
	else return null;
}

改为：

bool function(Result& result)
{
	if (do_something()) 
	{
		result = xxx;
		return true;
	}
	else return false
}

经过这一改动之后，渲染实践从原来的 2.1 秒瞬间缩短到了 0.6s，有点令人不可思议，个人猜测是 shared_ptr 进行频繁的分配和释放空间导致的速度大幅度变慢。0.6s 的渲染时间让我觉得很满意，本来想继续做下一步实验，但是不知道怎么的，我总是觉得程序还能优化。于是我看了看 Profile，没发现什么问题，我觉得该改的都改了，再改可能也得不到大幅度的提升，后来我往另一个方面想：多线程

光线追踪算法每个像素的计算之间没有任何关系，这意味着，可以同时进行计算，然后最后把结果合并，pbrt 也讲了这种思想，于是我也试试。一开始我使用了 Windows 的 API，可是我没有什么 Windows 的编程经验，Win32 的 API 都是现查现用，于是出现了一个我解决不了的问题，就是我用WaitForMultipleObjects 函数去等待子线程结束，调度线程才结束，可是每次调度线程自己先结束了，WaitForMultipleObjects 函数没起到作用，我检查了结果，在正确范围内，也没发现问题，但是就是不行，没办法解决。

后来采用 boost 的 thread 框架，成功地使用了 join，调度程序等所有渲染都完成了才结束，由于我使用的电脑的 CPU 是 i5-5200U，双核四线程，所以我开了四线程，进行渲染，总共耗时 0.3s，速度可以说是加快了许多，我尝试开八线程进行渲染，也是 0.3s，速度没有得到提升，说明四线程在我的电脑上应该是最合适的。

多线程的问题解决了，然后就可以进行下一步的实验了。

从头打造一个 Markdown 编辑器（一）：数据结构和展现

Tue, 03 Jan 2017 10:26:00 GMT

刚开始写这个编辑器的时候，我是毫无思路的，就是完全不知道如何下手，后来去翻了一下 CodeMirror, ACEditor, VSCode 这些优秀编辑器的代码，但是我没有全看，因为我要我的编辑器大部分都是我自己想出来的，只有我想不到的时候才去看。首先我们需要一个数据结构来储存我们的文本，为什么要用数据结构而不直接用 string，是因为编辑器需要大量的增删查改操作，而当一个文本很大的时候，string 是不够快的，因为 string 的增删查改操作的时间复杂度基本上都是 O(n)，还不够快。

数据结构 Data structure

一开始我打算用的是 Rope，是因为看上这个数据结构足够快，后来弃用了，是因为它和我的编辑器的 View 部分的构想不太一样，很难融合在一起，另外就是它本身自己也比较难实现，所以我就用了很简单的 chains of lines 来实现了，就是用一个数组，里面存的是每一行的内容。废话不多说先上代码

/src/model/textModel.ts

class TextModel {

    protected _lines : LineModel[];

    constructor(_string: string) {
        // ctor
    }

    // other methods
}

/src/model/lineModel.ts

class LineModel {

    protected _number : number;
    protected _text : string;

    constructor(_num : number, _t : string) {
        // ctor
    }

    // other methods
}

数据结构就是这么简单，就是用数组把每一行的内容都存起来存起来。在这里我用了一个 LineModel 的类来储存，是因为我还要实现一些别的方法，比如最典型的增删操作。当然我们实际上要实现的数据结构的操作不止那么多，至少要把insert, delete, replace这几个操作都实现了才行。这样我们文中所有的字符都可以用一个对象 Position 来表示，就是行+位移

export interface Position {
    line : number;
    offset : number;
}

而一段文字，也就是我们说的 Range，或者说选区（Selection）则可以用两个Position 来表示：

export interface Range {
    begin: Position;
    end: Position;
}

想想我们要做编辑器要做的操作

1.插入（Insert）: 在文本内的一个位置（Position）插入一段文字（string）

2.删除（Delete）: 删除掉一段范围（Range）内的文字

3.替换（Replace）: 把一段范围（Range）内的文字替换为一段新的文字（string）

其实替换操作很容易理解，我们先删除，再插入即可，所以我们主要实现 Insert 和 Delete。具体的实现方法可以参考我的源码

展现 Presentation

下面讲讲如何展现（presentation)，就是如何通过 HTML DOM 操作把数据结构里面的数据展现出来，我想大家都已经想到了，一个 LineModel 对应一行，一个父 DOM 包含着每一行的 DOM

看图可知，MDE 里面每一行其实就是一个 <p>，所以其实没什么神秘的东西，不过就是加上了行号，还有 Syntax Highlighting 而已（这个我们后面会说）。怎么把上面提到的 TextModel 编程 HTML DOM 元素了，自己写个遍历器遍历一遍就好了，在这里不推荐自己拼接 HTML 字符然后用 innerHTML 更新，这样一来效率低下，二来需要手动过滤字符，三来不方便我们后续的更新。

遍历一遍 TextModel，然后用 document.createElement 好了，这里你可能需要一个方便的工具类

/src/util/dom.ts

function elem(elemName : string, className?: string, props?: any) {
    let _elm = document.createElement(elemName);

    if (className)
        _elm.setAttribute("class", className);

    if (props && typeof props === "object") {
        for (let key in props) {
            _elm.setAttribute(key, props[key]);
        }
    }

    return _elm;
}

具体的实现大家可以参考下列几个文件，不过因为已经实现了 Syntax Highlighting，可能现在的版本已经很复杂了，初学的话看可能有点压力

/src/view/viewLine.ts

/src/view/viewDocument.ts

到现在为止，你可能已经知道怎么把 TextModel 里面的内容展现出来了，但是做一个编辑器，仅仅这样还是不够的，下一张讲讲如何更新视图。

从头打造一个 Markdown 编辑器（序章）

Sun, 01 Jan 2017 09:13:00 GMT

开始写文章之前，先打个小广告，就是小弟新鲜出炉的作品 MDE，一个完全免费的，开源的，基于 Electron 的 Markdown 编辑器MDE Editor，点击链接进入GitHub

截图为在 Windows 10 上运行的效果

支持的功能：

即时渲染
Markdown 语法高亮（Syntax Highlighting）
白天模式和夜间模式

第一个已经版本在2017年元旦发布了，现在我只打包了 Windows win32 64 位版本，有兴趣的朋友可以下载来跑一下。迟些我会打包 Linux 版本，至于 Mac 的话，我身边没有设备还真不好搞。

下载地址

其实现在这个时代，好用，能用的 Markdown 编辑器已经很多了，比如我很喜欢的 Typora，CMD Markdown，还有各种编辑器加上 Markdown 插件也很好用，加上 Markdown 语法比较小众，所以说自己撸一个其实意义不大，但是为什么我还要写这样一个编辑器呢？

一来其实是我一直很好奇我们平时用的这么多编辑器是怎么实现的，这方面的资料也不多，于是打算自己从头撸一个，看看能不能掌握一些知识。

二来我是广州某高校的 CS 学生，网上很多人说现在学校出来的学生什么都做不了，所以我也写个能用的东西来证明一下自己对吧

三来，这个程序是开源的，免费无广告的，希望有志同道合的朋友可以一起学习，交流，所以我会把我开发过程的一些想法和心得都写出来，我会在知乎专栏发表一系列关于这个编辑器的文章，这个只是序章，希望有朋友可以一起交流

在这个序章，我简单介绍一下我做这个编辑器需要的一些东西，我的编辑器是基于 Electron，主要是看上了跨平台的特性，以及我对 Javascipt 比较熟悉，对 Typescript 比较感兴趣的原因，我的编辑器是用 Typescript + Electron 实现的，我的文章主要也是讲这个，如果有要动手的朋友可以选择自己喜欢的框架和语言，打造一个 Markdown 编辑器的旅程就要开始了，你准备好了吗？

Syntax Highlighting之后的视图更新

Fri, 16 Dec 2016 09:56:00 GMT

前一篇blog讲述了如何给编辑器做Syntax Highlighting，可是做完之后要怎么样给视图更新才会做到更高效呢

毕竟我们采用这种Syntax Highlighting的方法，就是要保证高效，如果不能好好利用，那么我们的这种方法就没有意义了。

我们知道，当一行改变了之后，这行下面的状态可能全部都会改变，所以这一行包括下面所有行都要重新进行Tokenize，毫无疑问，如果文件很大，如果用UI线程进行Tokenize，可能会造成卡顿。不过就算是一个几千行的文件，每输入一次，进行全文Tokenize，全文扫一遍，也是瞬间完成的事情，我们大可不必为此操心，但是谁知道会不会有其它情况，比如突然发生了GC，或者输入者手速太快了。当然，这层我们是不知道的，但是我想到了更好的办法。

一行发生了改变，那么这一行要马上更新，这时肯定的，也几乎不会消耗什么时间，就算一行有好几百个字，也几乎可以忽略不计，所以我的编辑器在输入这一行的时候，会马上进行Tokenize，马上进行上色。但是这一行下面的行却不要求马上进行更新，因为如果正在输入这一行，只是输入了一些正常的字符，而没有触发什么加粗什么的，那么下面的行其实无需更新，就算触发了，我们也不要求马上进行更新，对吧。很明显下面行数的更新就要异步进行。

我们看这张图，就是一行的渲染状态图了

Null -> 没有进行渲染

Plain Text -> 渲染了，没有上色，是纯色文字

Colored -> 已经完成了上色

我们渲染有两种模式，分别是立即（Imd）和延迟（Lazy）更新，这样我们可以有下图的表格

	Null	Plain Text	Colored
Imd	马上在UI层进行渲染，跳到Colored状态	马上进行上色，跳到Colored状态	立即进行重新渲染，更新
Lazy	先渲染成纯色的字符，不进行上色，跳到PlainText状态	调用后台线程进行上色，上色完成后调用Callback，然后更新UI，然后跳到Colored状态	调用后台线程进行重新上色和渲染，完成后调用Callback更新UI层

所以如果是更新正在编辑的行的话，就调用Imd模式进行渲染和更新，如果是正在编辑下面的行的话，就调用Lazy渲染和更新。

当然，由于我是用NodeJS进行实现，所以就没有办法调用后台线程（Thread），只能通过IPC调用后台进程（Process），不过原理是一样的。

但是关于后台更新有一个问题，就是后台Tokenize完成以后，用户已经又更新了，比如说我第7行完成了Tokenize，但是这时可能用户又重新输入了第3行，这时第3行之后的行数都会在后台进行Tokenize操作，可是这时原来已经Tokenize的第7行的结果已经没有意义了，所以不能让它更新UI层。这时我们可能需要维护一个优先队列（Priority Queue），来得到目前等待Tokenize的最小的行号。

仍然用回刚才的例子，当我们第7行已经Tokenize完成的时候，准备更新UI层，这时第3行触发了输入，第三行本身立刻完成了渲染，这时第3行之后的行数（4..）全部加入Priority Queue，这时第7行的callback调用Priority Queue的队列头，得到当前最小的是4，也就是第4行正在后台进行Tokenize，所以第7行Tokenize的结果不会更新到视图。当第4行的Tokenize完成之后，调用更新视图的Callback，这时检查到当前Priority Queue 的队列头正是4，然后更新视图，把4在队列里面Pop出来。

如何实现编辑器文本语法高亮着色

Sun, 06 Nov 2016 13:06:00 GMT

最近正在尝试造一个Markdown编辑器的轮子 MDE 现在算是实现了简单的数据结构，用 chains of lines实现了，支持插入，删除，替换操作。

至于 Model 至视图（View）层面的更新就简单了，只要判断出插入、删除的那几行，去更新 DOM 里面那几行就可以了，也可以说是非常简单。

目前比较棘手的一个问题是给 Syntax Highlighting。Syntax Highlighting 是编辑器很重要的一部分。因为它需要速度非常快，必须在输入瞬间就完成，这样不会给用户发现有卡顿。而且它必须在输入瞬间完成。我想过一种做法就是，先显示没有着色的文本，然后在后台进行着色，然后再更新视图(View)。但是我觉得这样的做法就体验非常差了，用户输入的时候，文本没有被着色，而是等一段时间才有，会让人觉得非常不流畅。所以 Syntax Highlighting 必须再用户输入的瞬间完成。另外，我用很多基于Web的编辑器(Atom, Typora)都觉得不如 Native 的（Sublime Text）之类的来得快，这样就造成了体验不好，所以我写的 Syntax Highlighting 必须要快。

我的编辑器只支持 Markdown 语法，按道理来说 Markdown 语法（包含HTML）是属于**有限自动机（Finite-State）**语法，也就是说，只要写Lexer(Tokenizer)就好了。

如果这样想的话，就简单了，有限自动机语法直接用正则表达式（Regular Expression）做就好了，如果一行有更新，就对这一行进行重新 Tokenize，然后再更新视图（View），一行来说一不会超过 50 个字，如果是 DFA 的话，速度会很快，基本不用担心速度问题，即使是正则表达式也不会慢多少，但是这就有一个问题，就是换行的问题。

<div
id = "name"></div>

因为 Markdown 语法是兼容 HTML 的，假设，我们有一句 html，它的 tag 在第 n 行，它的 attribute在第 n+1，如果我们只对一行做正则表达式，那么第 n+1 行的 attribute 就无法感知上一行的改变了。另一方面，在上面得例子第二行上面加上<div>这样一行，下面的语法高亮都会有所不同。那是否意味着，我们每一次改变，都要对整个文本进行 tokenize 呢？当然这样肯定是不切实际的，上面说过，语法高亮必须是实时的，这样才能保证好的用户体验，但是 Syntax Highting 依然与上下文有关。这里我们可以采用 CodeMirror 的做法了：每一行保存一个 state

我们刚才说到，Syntax Highting 需要用到上下文的信息，那么我们可以为每一行保存一个 state。当我们对当前行进行 high lighting 的时候，就可以使用前一行的 state 的。仍然用回上面的例子，第一行里面我们 tokenize 了，进入了一个state 这个 state 告诉我们这个 tag 还没有定义完，例如 state.finishTag = false 当我们第二行修改的时候，就可以利用上一行的 state，得知我们仍在一个tag里面，这样，第二行的 attribute 就可以正确着色了。第二行完成了 tag 之后 state.finishTag = true

仍然用回上面的例子，我们知道，如果某一行的 state 改变了，下面所有的内容都必须进行重新 tokenize，但是我们可以考虑下一下，第 n 行被修改了，那么下文的修改其实不需要实时进行修改，我们可以把这个工作交给后台，用别的 process 或者 thread 进行，完成以后再更新视图，我们只需要保证当前行的着色是实时的就可以了。

（翻译）用 Javascript 在浏览器里面虚拟一个可编辑的控件

Fri, 21 Oct 2016 21:44:00 GMT

此文翻译自 Marijn Haverbeke 的 Faking an editable control in browser JavaScript

你当前的问题是：你正在写一个和文本输入控件（Text intput Filed）相似的Javascript 控件——它必须是 focusable 的，而且要支持复制和粘贴，接受任意类型的输入，但是它又不是一个真正的控件，因为你想去自己画，而且可以完全控制它的内容。

在这篇文章里面，我不想讲任何关于画一个指针（Cursor），维护自己的 selection 之类的东西。当然，对于实现一个可靠的文本编辑器来说，这些东西都是必需的。但是他们实现起来都相对简单。

隐藏的 Textarea

我的解决方案的结症在于一开始我从 ACE editor 获得的灵感，让我围着一个隐藏的 textarea 团团转。这就是当 textarea 看起来是 focused 的时候，浏览器就认为它是 focused 的。它就像一个常规的 focusable 的东西，你可以赋值一个 tabindex 给它，让它得到或者失去 focus 的时候接收 focus 和 blur 事件，这允许我们去更新编辑器的样式（显示/隐藏的指针，彩色/黑白的选区）来反映出它是否是 focused 的。

然而这个 textarea 一定不能是可见的。因为如果当你输入的时候，这个 textarea 一直跟着你，而且还带上它那个自带的一闪一闪的光标的时候，这个编辑控件就会显得毫无真实感。

不过，如果你给你的编辑器设置 display:none 或者 visibility: hidden 属性的时候，浏览器会觉得它不是这个页面真正的部分从而不会去 focus 它。CodeMirror 让 textarea （变小）放在一个 overflow: hidden; height : 0 的元素（div）里面，这就让它即不可见，也可以 focus，从而解决了这个问题。

（另外，你需要一个 outline: none 样式，去防止一些浏览器在它 focused 的时候显示一圈光环，但却某些原因没有被 overflow: hidden 禁止掉）

另外一个不幸的（或者说是幸运的，取决与你怎么看）在编辑器上效果就是浏览器每次都会滚动来提醒我们编辑器有事件发生，这就意味着，如果 textarea 简单地放在编辑器地顶部，然后你就会不停地滚动到顶部因为你正在编辑编辑器地步地内容，每当你输入一个字符，窗口都会滚动。

CodeMirror 给 div 元素设置了绝对路径来隐藏 textarea ，每当指针移动的时候， textarea 也会跟着移动。这样的话，之就会帮助滚动到真正的视图。

保持选择区域

当用户选择了一些文字，然后复制或者剪切，正确的文字会被放在粘贴板里面。

这就意味着选区里面的文字要被正确地放在 textarea 里面，和选择它们。达到这个目的有两种方法。第一种，被ACE采用了，就是去监听 copy 和 cut 事件（在真正复制和剪切之前就会被触发），仅当这样地事件触发的时候，把当前选择地文字插入到 textarea 里面然后选择它。

CodeMirror 的实现方法并没有那么聪明，不过更实用。它就是简单地在每一次选择的时候把当前选择的文字复制到 textarea 里面。这种做法的一个缺点就是当你从从 textarea 的 value 里面获得（get）和设置（set）许多文字的时候，速度会很慢。如果你在 CodeMirror 里面放一个很大的文档，然后按 Ctrl-A 或者 cmd-A （全选），这将会有一个可以察觉的停顿。（在一些老的浏览器上，取决于文档的大小，这看上去可能更像整个浏览器卡住，而不是一个短暂的停顿）

但这个做法的优势就是它适用于 Opera 浏览器，Opera 浏览器不会触发 copy 和 cut 事件，在 Linux 上某些浏览器，这种做法可以和 X Windows 的选择粘贴板很好的兼容。CodeMirror 会花更大精力去缩小 textarea.value 的消耗，例如当一个选区拖动的时候不去更新，在拖动完成后才去更新。

感知输入

因此隐藏的 textarea 包含着当前选区，它的内容被选取了。这意味着当用户输入一些东西，或者粘贴文字，textarea 当前内容会被插入文字（如果之前有选择文字的话，就会覆盖它们），然后文字会被插入到真正的文档上面指针的位置当中。

不过谁告诉我们输入发生了？一开始，我们可以监听 keypress, paste, input这样的事件。这些事件会告诉我们有些事情发生了，这样，我们设置一个延迟，然后在几毫秒之后检查 textarea 的内容。

不过这并不完美的。Opera 不会触发 paste 事件——当你从菜单粘贴时，也不会有任何鼠标事件被触发。另外，在一些浏览器上面，输入法输入的时候 textarea 不会触发任何事件。

所以我们必须检测。然而如果我们检测次数过多从而每次从 textarea 读取数据（可能会很大），那么检测的代价可能就很昂贵了。幸运的是，如果 textarea 有一个很大的值（选择的文字），那些文字会被选择（selected），而输入文字就会覆盖它们。因此，如果 textarea 有一个选区（检查的代价很低），它的值不必被读出。这就会让检测的代价降低，从而允许 CodeMirror 去当编辑器focused 的时候密集地检测也不会消耗太多 CPU（当编辑器失去聚焦，停止检测）。

关于输入法

我在上文提到过输入法。我不是这方面的专家，因为我不说任何需要用到输入法的语言。不过，这允许人们在写很长的脚本的时候，用一系列快捷键去输入字符。这就需要实现在编辑器展示当前的输入法正在候选的字符（composition），然后在输入法输入完成的时候，用真正的结果去替代它。

如果 CodeMirror 在每次读入输入的时候都去清空 textarea，这就会留下还没完成的输入法的输入。那它真正的做法是，当没有选区存在的时候，把当前输入留在 textarea，然后把它的值（value）存在别的地方。然后下一次检测的时候，它就会用新的值和和旧的进行比较（切除共同的前缀字符），这意味着之前的值被新的值替换，新的值应该替代掉文档里面那些旧的值。

Drag and drop

现代的浏览器都提供了 drap and drop API。这就会让我们的编辑器更加方便地支持在编辑器里面放置(drop)内容，拉取内容离开编辑器。这里面有一点细微之处，这是 CodeMirror 的 dragstart 的handler:

on(node, "dragstart", function(e) {
  // Set the dragged data to the currently selected text
  e.dataTransfer.setData("Text", editor.getSelection());

  // Use dummy image instead of default browsers image.
  if (e.dataTransfer.setDragImage)
    e.dataTransfer.setDragImage(document.createElement('img'), 0, 0);
}

当 setDrapImage 方法被调用的时候，抑制了默认的拉动的映像，阻止了一些浏览器显示整个编辑器都被拉动了，因为外部元素被设置成 draggable=true 的。

在 CodeMirror 的 mousedown handler里面，我也在不在选区（selection）里面的点击调用了 preventDefault()，这样拉动产生的选区就不会触发下一次拉动（dragging）。在 Webkit 引擎里面，这是必须的，因此，你不仅在处理 mousedown 事件的时候把 draggable 属性设置成真，还要在之后把它设置回来。

编辑器里面 drop 事件的 handler 支持从 FileReader 读取文件，可以控制被拉进编辑器的文件。

全局菜单

全局菜单就像蛋糕上的糖霜一样，一个好的编辑器在被右键的时候应该表现正常才行。全局菜单应该包含可以工作的复制，剪切和粘贴按钮。

不幸的是，浏览器没有提供 API 去操作全局菜单。你可以捕捉点击事件和展示你自己的菜单，不过这样并不好，而且更坏的是，你没有权限去使用粘贴板，即使是正确地实现复制、粘贴你也做不到。

就像浏览器领域一贯地风格一样，这里有一个极差地实现方法去弥补API的不足。这次，我们可以通过短暂地不隐藏 textarea（给它一个很低地透明度，以及没有边界来不让别人发现它）来响应鼠标点击事件和 contextmenu 事件，然后把它放在鼠标指针下面。

因为 textarea 已经包含了当前地选区地内容，以及，如果它有一个选区，它地左上角（我们把它放在指针下面），就是选区地位置。现在浏览器就会相信我们点击在 textarea 的选区上面，然后就会提供我们想要的菜单。即使这个结点在几毫秒之后隐藏了，这个点击也会和它联系起来，随后的粘贴也会应用到我们的 textarea 当中。

有一件事要注意的是，Firefox 在打开全局菜单之后会触发 contextmenu 事件，不过这还是让我们太晚知道 textarea 被点击了。因此在那个浏览器上面，我们就蹩脚地使用 mousedown 来代替它（右键按下后就会被触发）。

关于全局菜单我们要实现地第四项就是全选。为了做到这个，我们在内容地开头加了一个假的、没有被选择的空间。然后定期进行检查看看这个控件是否被选择。如果它被选择了（剩下地内容完好无损），我们就选择编辑器里面所有内容。如果 textarea 别的东西改变了，或者时间过得太长，我们就放弃。

弯路

对于没有输入的键盘事件，例如指针移动按键，CodeMirror 简单地处理原始的事件然后内部展现合适的选区效果。

一开始 CodeMirror 版本 2 采用了一个不同的实现方法，这个方法非常讨人喜欢，但是最后并没有成功。它不但把选区放进 textarea，也把附近的几行放进去，让本地的指针也可以自由地移动。这将会不仅从 textarea 得到输入，也可以得到选区（selection）信息。

这有一个有点就是使用了浏览器“本地”的按键绑定。这对于一些特定的按键绑定来说是可行的，也把一些复杂的选区操作交给了浏览器。

我们最终抛弃这个做法是因为它需要太多的hack做法来正常工作，比如说，当你在 textarea 选择一段文字的时候，你不能设置外链。

当你按下 shift-left 或者其他 shift 移动的时候，外链不会移动。浏览器假设它永远在选区的左边当我们通过 selectionStart 和 selectionEnd 设置选区的时候。为了让选区可以正常工作，我们必须用很多痛苦和蹩脚的做法。

另外，似乎很少用户会在他们的浏览器里面真正地重新配置按键绑定（keyboard binding），有趣的是，用户更喜欢 CodeMirror 提供自定义按键绑定而不是在他们的浏览器里面重新定义。

最后，控制我们自定义键盘事件的额外的复杂度似乎没有上面所述的这种做法的复杂度大。因为 CodeMirror 使用 textarea 只包含选区这种做法，而不必去解决 cursor-motion 按钮事件。

编译原理学习笔记 3：实现一个虚拟机

Sat, 13 Aug 2016 21:00:00 GMT

至于 Lexer 和 Parser 部分，教程和用法实在太多，实现起来也比较简单，所以也没什么好说的，这里说说如何实现一个虚拟机（Virtual Machine）

虚拟机的实现有很多种，常见的分为 Stack Machine 和 Register Machine 前者基于栈，后者基于寄存器。目前来说，基于栈的虚拟机比较多，像（CPython, JVM, .NET…）都是基于栈的虚拟机，二基于寄存器的虚拟机中比较出名的就是 Lua 的官方实现了，官方称这是最早的基于寄存器的虚拟机，具体如何我们就无法考究了。但是本文主要介绍的是基于栈的虚拟机，因为比较好实现。

我们来看看下面这一行代码

1 + 2 * 3

如果用 StackMachine 来表示是这样的

LOAD 1
LOAD 2
LOAD 3
MULTIPLE // result: 6
ADD  // result: 7

这样应该很好理解，执行这段代码后，栈顶的值是 7，也就是我们表达式的值。那么接下来做两件事情就好好了，一是把语法树生成一连串的指令，二是执行这些指令

语法树如何生成指令呢？

+
| \
1  *
   	 |\
   	 2 3

粗略地画，语法树是这个样子地，那么很明显，生成指令地过程就是后序遍历语法树地过程。理解这句话之后，就好做了。但是也有几点要注意地地方，我们通常用一个常量表，把用到地常量给储存起来，如整形，字符串等等。所以我们设计指令的时候，比如说 LOAD_C 指令就可以从常量表里面加载一个值到栈顶。

下面看一下我正在实现的哈语言里面的指令集

#pragma once

namespace halang
{
	enum class VM_CODE
	{
		LOAD_C,					// 0x00 A - load constant
		LOAD_V,					// 0x01 A - load variable
		LOAD_G,					// 0x02 A - load global variable
		LOAD_UPVAL,				// 0x03 A - load upvalue
		STORE_V,				// 0x04 A - store the top of stack to A
		STORE_G,				// 0x05 A - store to the global value
		STORE_UPVAL,			// 0x06 A - store to the upvalue table
		PUSH_INT,				// 0x07 A - load A
		PUSH_BOOL,				// 0x08 A - load A
		POP,					// 0x09 A - Pop A
		CLOSURE,				// 0x0a A - linked Function's upvalue to current env
		CALL,					// 0x0b (A, B, C...) call function(A, B, C...)
		RETURN,					// 0x0c A - if A != 0 return exp else return nothing
		IFNO,					// 0x0d if not true, jump to the location.
		JMP,					// 0x0e
		NOT,					// 0x0f
		ADD,					// 0x10 add the top two val
		SUB,					// 0x11
		MUL,					// 0x12
		DIV,					// 0x13
		MOD,					// 0x14
		POW,					// 0x15
		GT, LT,					// 0x16 0x17
		GTEQ, LTEQ,				// 0x18 0x19
		EQ,						// 0x1a
		OUT,					// 0x1b
		STOP					// 0x1c
	};

};

至于运行，如何储存变量呢，最简单的做法就是用 Environment 方法。用一个表来储存变量，这个表当然可以用哈希表（变量名-变量值）来做，但是这样还不够快。其实我们知道，在一个环境里面，我们可以为每一个变量名编一个号，这样子这个变量表就可以用数组（变量编号-变量值）来做，这样子，访问变量和储存变量的时候就快很多了。

项目 Github 地址：https://github.com/vincentdchan/halang

把正方系统的课表导出成 ics 文件

Sat, 13 Aug 2016 18:27:00 GMT

文章的开始，先上一张图，打开 Siri，问 Siri：明天有什么安排？

为什么 siri 知道我的课表？因为我把课表导入了 iPhone 的日历中去了。

因为不想再使用超级课程表等软件，加上华农宝不怎么好看，而且很麻烦的缘故，自己写了一个工具，可以把课程表导出到ics 格式，可以把这个文件导入到系统的软件当中，比如iPhone自带的日历, Outlook, Google Calendar 等等你常用的日历工具……导入到 iPhone 或者 Android 手机自带的日历之后，无论是查看，通知甚至类似 Siri，小娜的各种语音助手进行查询，都会华农宝方便很多。

另外，这个插件是安装在你的电脑上进行导出，它的代码完全开放，托管在 Github，你无需担心密码泄漏等安全问题，相反华农宝使用你的密码登录教务系统，会使人多了一层疑虑。

目前来说，你可以通过使用 Chrome 或者 Tampermonkey 插件来使用我做的插件进行导出。

方法一：Tampermonkey（油猴）插件

Tempermonkey 插件支持的浏览器有:

Google Chrome
Firefox
Edge

以上浏览器安装 Tampermonky 插件，安装方法自行搜索。

安装完成之后，去到这个链接点击安装，安装成功之后登入你的正方系统，去个人课表导出页面设置好日期之后导出就好了，然后大功告成。

方法二：Chrome插件

下载下面的 Chrome 插件**（仅华农的正方系统适用）**，安装方法请自行搜索

Github 地址: https://github.com/vincentdchan/ZhengFangToolkit

下载 Chrome 插件，并安装，安装方法请自行搜索，安装完成后，登入正方系统，进入个人课表，选择好正确的学年和正确的学期，检查一下开学的第一个星期一是否正确，不然的的话生成的日历全部都会错误的。

检查完之后点击导出课程，最后会出现一条下载链接，下载那个 ics 文件就行了。然后把 ics 文件导入到各种软件中去，可以看看效果图

导入到 iOS 之后的效果图

这是我的课表导入到 Windows 10 自带日历后的效果图，看起来效果还不错

油猴插件安装地址：https://greasyfork.org/zh-CN/scripts/27557-%E5%8D%8E%E5%86%9C%E6%AD%A3%E6%96%B9%E7%B3%BB%E7%BB%9F%E8%AF%BE%E7%A8%8B%E5%AF%BC%E5%87%BA%E5%B7%A5%E5%85%B7

Chrome 插件下载地址：https://github.com/vincentdchan/ZhengFangToolkit/releases

Github: https://github.com/vincentdchan/ZhengFangToolkit

编译原理学习笔记 2：赋值操作

Thu, 14 Jul 2016 11:04:00 GMT

上文中，提到如果解析一个数学表达式，并把它变成一棵树，我们把这个程序称为解释器，这次我要为这个解释器加一个功能：赋值操作

let a = 3 * 4

这里我们要区分左值(left-value)和右值（right-value) 右值是临时结果，而左值是一个变量。至于右面是一个表达式，表达式如何解析在上一篇文章已经详细说了，所以这里就不多说。

解析（parsing)后，得到的是这样一棵树，那么我们要如何实现赋值(Assign)操作呢？

在这里我们使用Environment实现，我们只需要一个map哈希表就可以了

把3 + 4计算的结果放到a里面就行了，eval函数里面可以这样写：

		else if (root->asAssignment())
		{
			auto _node = root->asAssignment();
			env.setValue(_node->Identifier(), _node->Expression());
			return 0;

这里的env里面其实是一个Map而已。

在这里附上这个程序的源码：https://github.com/vincentdchan/CalculatorParser

编译原理学习笔记 1：解析数学表达式

Tue, 12 Jul 2016 22:50:00 GMT

说到编译原理，是计算机科学里面很重要的一个学科，你可以说编译原理无处不在。但是一般人很少可以接触到这样的理论。编译原理分前端和后端，前端包括文本解析和类型检查，后端包括优化和代码生成等等。这篇日志里我主要讨论文本解析中一个最为简单的部分：数学表达式。

数学表达式： 1 + 1 * 3 * 3 + 4 / 4 * 5

要求出这个表达式的值，不禁让我想起了当时学习数据结构时候的习题，这样的表达式用栈来解决。

我们先要列出一个表，包括各种算术符的优先级

符号	优先级
+	1
-	1
*	2
/	2

然后我们需要两个栈，一个操作符的栈名为OP_STACK 一个数字的栈，名为NUM_STACK

因为我们的操作符都是耳目操作符，就是操作符左右都为值，比如说 1 * 1里面 1* 或者 *1 都是没有意义的，所以我们是一个数字，一个符号这样间隔读入的，这样就好办了：

把第一个数字入NUM_STACK
这时，读入(SHIFT)的是一个操作符，如果OP_STACK顶为空，则入栈OP_STACK，如果不为空，则和OP_STACK栈顶比较，如果比OP_STACK栈顶优先级高，则入栈OP_STACK，否则的执行REDUCE操作，OP_STACK栈顶操作符出栈，NUM_STACK出栈两个数字，然后运算结果，再将结果入栈NUM_STACK，循环操作

操作流程如下：

表达式	`NUM_STACK`	`OP_STACK`	对比结果	对应的操作
`1+133+4`	NUL	NUL		SHIFT
`33+4/4*5`	1 1	+	>	SHIFT
`3+4/45`	1 1 3	+ *	=	REDUCE
`3+4/45`	1 3	+	>	SHIFT
`+4/4*5`	1 3 3	+ *	=	REDUCE
`+4/4*5`	1 9	+	=	REDUCE
`+4/4*5`	10	NUL		SHIFT
`/4*5`	10 4	+	>	SHIFT
`*5`	10 4 4	+ /	>=	REDUCE
`*5`	10 1	+	>	SHIFT
NUL	10 1 5	+ *		REDUCE
NUL	10 5	+		REDUCE
NUL	15	NUL

这样马上我们就算出结果了，然而编译有时并不要求我们马上算出结果，有时只需要我们保存解析的结果，以便以后运行，或者生成代码等等操作，请看下面的表达式：

a + b * c

显然我们没办法马上算出结果，但是我们可以把它变成一棵树

显然这样就容易多了，这就是我们要说的解析(parsing)，如何解析呢？方法其实和上面是一样的，不过要做一点点改动，我们知道乘法优先级比较高，当我们计算b * c的时候，我们并不是真的相乘，我们只是创建一个新的结点，把b和c作为子节点，然后把这个新结点入栈，就可以了。

有了这科语法树之后，当我们知道a b c的值之后，就可以递归算出结果了，我们要计算根节点的结果，就要首先计算子节点的结果，最后回溯可得答案。当然，从另一方面，你可以通过这棵树生成中间代码，或者机器码，这样就编译出真正的程序了。

RSS Feed of Vincent's Bus Station

在 MacOS 下编译 Skia 以及 Wasm 版本

MacOS

Wasm 版本的 CanvasKit

群晖如何在非官方 SSD 上创建储存池

读懂 WebAssembly 如何表达 C++

背景

WebAssembly 字节码执行

基本类型

指令

本地变量

内存空间

反编译

实验代码

工具

命令

Release 模式的优化

总结

QuickJS 源码解读（二）：基础设施和标准库

基础设施

标准库

console.log

setTimout

写一个飞快的 JavaScript 打包压缩工具

背景

代码

优化思路

并行 Parsing

减少遍历次数

架构

打包压缩原理

字面量替换

常量折叠

变量别名

模块合并

C++ 的优化

shared_ptr

robin hood hashing

jemalloc

性能

总结

使用 JS 操作 mac 下文件拓展属性

什么是拓展属性

使用 JS 操作

安装

获取 xattr

设置 xattr

设置自定义图标

解析 plist

总结

多线程 SQLite with C++ 踩坑汇总

Last Insert rowId

正确写法

事务

乱序提交

多实例

正确写法

总结

使用 N-API 和 CMake 为 Node.js 添加 C++ 拓展

使用方法

Api 使用

QuickJS 源码解读（一）：虚拟机的实现

简介

编译

编译 qjs 引擎本身

编译 qjsc 编译器

使用 XCode 进行 Debug

OPCode

Runtime

命令执行

入栈

加法

If 分支跳转

总结

相关阅读

转换网易 ncm 格式到 mp3

使用 OCaml 解析 JavaScript

起因

为什么选择 OCaml

优点：