function fakeParseJSON(str) {
let i = 0;
// TODO
}
我们初始化i作为当前字节的索引,当i到达str结束时,我们将立即结束。
来实现一个object 的语法:
function fakeParseJSON(str) {
let i = 0;
function parseObject() {
if (str[i] === '{') {
i++;
skipWhitespace();
// if it is not '}',
// we take the path of string -> whitespace -> ':' -> value -> ...
while (str[i] !== '}') {
const key = parseString();
skipWhitespace();
eatColon();
const value = parseValue();
}
}
}
}
function fakeParseJSON(str) {
let i = 0;
function parseObject() {
if (str[i] === '{') {
i++;
skipWhitespace();
+ let initial = true;
// if it is not '}',
// we take the path of string -> whitespace -> ':' -> value -> ...
while (str[i] !== '}') {
+ if (!initial) {
+ eatComma();
+ skipWhitespace();
+ }
const key = parseString();
skipWhitespace();
eatColon();
const value = parseValue();
+ initial = false;
}
// move to the next character of '}'
i++;
}
}
}
一些命名约定:
当我们基于语法解析代码并使用返回值时,我们命名parseSomething
当我们期望字符存在那里,但是不使用这些字符,命名成eatSomething
当字符不存在的时候,命名成skipSomething
实现eatComma和eatColon:
function fakeParseJSON(str) {
// ...
function eatComma() {
if (str[i] !== ',') {
throw new Error('Expected ",".');
}
i++;
}
function eatColon() {
if (str[i] !== ':') {
throw new Error('Expected ":".');
}
i++;
}
function skipWhitespace() {
while (
str[i] === " " ||
str[i] === "\n" ||
str[i] === "\t" ||
str[i] === "\r"
) {
i++;
}
}
}
已经完成了parseObject语法的实现,但是这个解析函数的返回值是什么呢?
所以,需要返回一个js对象:
function fakeParseJSON(str) {
let i = 0;
function parseObject() {
if (str[i] === '{') {
i++;
skipWhitespace();
+ const result = {};
let initial = true;
// if it is not '}',
// we take the path of string -> whitespace -> ':' -> value -> ...
while (str[i] !== '}') {
if (!initial) {
eatComma();
skipWhitespace();
}
const key = parseString();
skipWhitespace();
eatColon();
const value = parseValue();
+ result[key] = value;
initial = false;
}
// move to the next character of '}'
i++;
+ return result;
}
}
}
既然你已经看到了我实现对象语法的过程,现在是时候尝试一下数组语法了:
function fakeParseJSON(str) {
// ...
function parseArray() {
if (str[i] === '[') {
i++;
skipWhitespace();
const result = [];
let initial = true;
while (str[i] !== ']') {
if (!initial) {
eatComma();
}
const value = parseValue();
result.push(value);
initial = false;
}
// move to the next character of ']'
i++;
return result;
}
}
}
现在,看一个更有趣的语法,"value":
他是以一个"whitespace"开始,然后是任何可能的值:“string”, “number”, “object”, “array”, “true”, “false” or “null”,然后以"whitespace"来结束。
function fakeParseJSON(str) {
// ...
function parseObject() {
// ...
+ while (i < str.length && str[i] !== '}') {
+ // ...
+ }
+ checkUnexpectedEndOfInput();
// move to the next character of '}'
i++;
return result;
}
}
多做一些事
错误代码和标准的错误消息
下面这些是有用的关键字,会帮助用户出错之后去google定位。
// instead of
Unexpected token "a"
Unexpected end of input
// show
JSON_ERROR_001 Unexpected token "a"
JSON_ERROR_002 Unexpected end of input
更好的查看哪里出了问题
像Babel这样的解析器,将向您显示一个代码框架,带有下划线、箭头或突出显示错误的代码片段
// instead of
Unexpected token "a" at position 5
// show
{ "b"a
^
JSON_ERROR_001 Unexpected token "a"
打印出代码片段:
function fakeParseJSON(str) {
// ...
function printCodeSnippet() {
const from = Math.max(0, i - 10);
const trimmed = from > 0;
const padding = (trimmed ? 3 : 0) + (i - from);
const snippet = [
(trimmed ? '...' : '') + str.slice(from, i + 1),
' '.repeat(padding) + '^',
' '.repeat(padding) + message,
].join('\n');
console.log(snippet);
}
}
错误修正的建议
如果可能的话,解释出了什么问题,并给出解决问题的建议
// instead of
Unexpected token "a" at position 5
// show
{ "b"a
^
JSON_ERROR_001 Unexpected token "a".
Expecting a ":" over here, eg:
{ "b": "bar" }
^
You can learn more about valid JSON string in http://goo.gl/xxxxx
如果可能,根据解析器目前收集的上下文提供建议
fakeParseJSON('"Lorem ipsum');
// instead of
Expecting a `"` over here, eg:
"Foo Bar"
^
// show
Expecting a `"` over here, eg:
"Lorem ipsum"