JSON-js

Douglas Crockford 是 JSON 的发明者，所以通过 DC 的代码来学习 JSON 和 parser 绝对是上乘之选。这个仓库里面有四个 JS 文件，今天我们先研究 json_parse.js。

json_parse 定义了如下 API：

json_parse(string) => object
json_parse(string, (key,value)=>newValue ) => object
复制代码

今天我们只研究第一种 API。

代码结构

用 WebStorm 打开源码方便阅读，把主要函数折叠起来，就会发现代码结构非常清晰，完整结构如下：

var json_parse = (function(){'use strict'var at;     // The index of the current charactervar ch;     // The current charactervar escape = {...}var textvar error = function(){...}var next = function(){...}var number = function(){...}var string = function(){...}var white = function(){...}var word = function(){...}var array = function(){...}var object = function(){...}var value = function(){...}return function parser(source, reciver){...}
}())
复制代码

代码首先用一个立即执行函数造出一个局部作用域，ES 6 中我们只需要用 block 和 let 代替就行了。

思路

主要思路在最后一个 parser 函数里，我们来看一下：

return function (source, reviver) {var result;text = source;at = 0;ch = " ";result = value();white();if (ch) {error("Syntax error");}return result;
};
复制代码

看起来毫无逻辑呀。

为什么我老是说「看源码的投入产出比很低」呢，因为你需要看完所有代码，才知道主要逻辑是在做什么。

还好代码不多，我看完之后总结作者的思路如下。

有三个重要的变量，ch、at 和 text

• ch 指向一个字符（实际上是复制了字符的值，但是用指向更好理解源码），ch 默认指向一个空字符串（不要问这个空字符串有什么意义，主要是为了让代码简洁）
• at 指向下一个字符，at 存储了下一个字符的索引（index）
• text 包含了所有字符，也就是一个符合 JSON 语法的字符串

接下来我们定义一个动作：吃。

• 吃，表示将 ch 指向 at 所指的字符，然后 at 指向下一个字符。
• 吃一个空格，表示 ch 指向的字符必须是一个空格，然后吃（吃的定义见第一条）；换句话说，吃一个空格的意思就是：我吃掉的字符必须是空格，不是空格就报错。
• 吃一个{，表示我吃掉的字符必须是{，否则就报错
• 吃一个}，表示我吃掉的字符必须是}，否则就报错
• 以此类推……

好了，parser 的难点讲完了，接下来就是细节了，假设 text 是字符串 { "name" : "Frank" }，一次完整的逻辑如下

1. ch=" "，at=0, text='{ "name" : "Frank" }'
2. 吃一个空格。由于 ch 一开始的默认值是空格，所以这个空格就被吃掉了，然后 ch 指向text 的第一个字符，at 指向 ch 后面一个字符（存下标，也就是1）。
3. 如果 ch 是空格就继续吃，吃到 ch 不是空格为止。
4. 发现 ch 是 {，就说明这是一个对象，生成一个空对象 object 用来存储 key 和 value。而且后面的字符就要按照对象的语法来吃。
5. 吃空格直到遇到非空格。理论上 { 后面应该接一个 "key"，所以这个非空格必须是 "。
6. 吃一个 "
7. 吃 N 个非 " 的字符（N >= 0）
8. 吃一个 "
9. 把刚才吃到的 N 个字符作为一个 key，放到空对象 object 里
10. 吃空格直到遇到非空格。理论上 "key" 后面应该接 : 所以这个非空格必须是 :
11. 吃一个 :
12. 吃空格直到遇到非空格。理论上冒号后面应该接 value，value 的值可以是对象、数组、字符串、bool、null 等，所以不能预期这个非空格是什么
13. 发现是一个 "，吃掉这个 "，如果值是一个字符串
14. 吃 N 个非 " 的字符
15. 吃一个 "
16. 把刚才吃到的 N 个字符作为一个 value，放到空对象 object 里
17. 吃空格直到遇到非空格。理论上 value 后面可以接逗号或者 }
18. 发现 ch 是 }，吃掉 }，说明 object 的数据已经读完了
19. 一直吃空格，如果发现非空格，说明语法错误，报错。
20. 将 object 返回，这个 object 就是 text 对应的数据了。

如果你能在大脑里过一遍这个过程，就可以看懂所有源码了：

var json_parse = (function(){'use strict'var at;     // The index of the current charactervar ch;     // The current charactervar escape = {...}var textvar error = function(){...}var next = 吃(){}var number = 吃一个完整的数字(){...}var string = 吃一个完整的字符串(){...}var white = 吃N个空格(){...}var word = 吃true/false/null这几个单词(){...}var array = 吃一个完整的字符串(){...}var object = 吃一个对象(){...}var value = 吃一个值，包括对象数组字符串数组bool和null(){...}return function parser(source, reciver){...}
}())
复制代码

然后我们就可以重点看主逻辑了：

return function (source, reviver) {var result;text = source;at = 0;ch = " ";result = value(); // 吃一个值white(); // 吃掉后面的空格if (ch) { // 如果空格后面还有字符，就是语法错误了error("Syntax error");}return result;
};
复制代码

也就是说主逻辑其实很简单

1. 用 value() 吃一个值，这个值就是 text 对应的数据
2. 继续吃掉所有空格
3. 吃完发现还有字符（一定是非空格），就说明语法错了（画蛇添足）

接下来我们看 value() 的逻辑

value = function () {white();switch (ch) {case "{":return object();case "[":return array();case "\"":return string();case "-":return number();default:return (ch >= "0" && ch <= "9")? number(): word();}
};
复制代码

逻辑也很简单：

1. 吃掉所有空格。
2. 看当前的字符（ch）是什么
3. 如果 ch 是 {，就吃一整个对象，然后把对象返回
4. 如果 ch 是 [，就吃一整个数组，然后把数组返回
5. 如果 ch 是 "，就吃一整个字符串，然后把字符串返回
6. 如果 ch 是 -，就吃一整个数字，然后把数字返回
7. 如果 ch 是 0~9，就吃一整个数字，然后把数字返回
8. 其他情况只可能是 true/false/null，见啥吃啥，然后返回

图示如下：

DC 用 ch >= "0" && ch <= "9" 来判断字符是不是 0~9，这用到了 ASCII 字符集，如果你不懂就去搜一下。

大家应该对如何吃一个对象最感兴趣，我们来看看 object() 的逻辑

 var object = function () {var key;var obj = {};if (ch === "{") { // 当前字符必然是 {next("{");    // 吃掉这个 {white();      // 吃掉所有空格if (ch === "}") {  // 遇到 } 说明对象结束了next("}");     // 吃掉这个 }return obj;    // 返回空对象}while (ch) {       // 没有遇到 } 说明有 keykey = string();  // 吃一个 string 当做 keywhite();         // 吃掉所有空格next(":");       // 吃掉一个 :if (Object.hasOwnProperty.call(obj, key)) {error("Duplicate key '" + key + "'");}                  // 如果这个 key 之前遇到过就报错obj[key] = value();// 把key当做object的key，然后吃一个value作为值white();           // 吃掉所有空格if (ch === "}") {  // 如果遇到 } 说明对象结束了next("}");     // 吃掉这个 }return obj;    // 返回对象}next(",");         // 没有遇到 } 说明还有 key，吃一个逗号white();           // 吃掉空格然后继续回到上面吃 key}}error("Bad object");       // 如果运行到这里说明语法有问题
};
复制代码

到此我们基本搞清楚 DC 的 json_parser 的思路了，大家可以自己看一下 white()、array() 的源码，结构十分清晰。

下次我们讲 json_parse_state.js 如何使用状态机的思路重写了这个 parser。

我的微信公众号：搜索 XDML 四个字母即可，XDML 是「写代码啦」的拼音首字母。