代碼是如何被被編譯的？
最近需要寫一個(gè)編輯擴(kuò)展組件，主要功能類似于Excel的單元格編輯框，主要針對(duì)單元格輸入內(nèi)容的處理。要知道在Excel中，每個(gè)單元格除了可以輸入文本內(nèi)容（包括字符、數(shù)字、日期等）外，還有包括函數(shù)。 那么在輸入函數(shù)時(shí)，如果聚焦到函數(shù)（比如IF VLOOKUP）或單元格（比如A1 A2）上，都會(huì)有對(duì)應(yīng)的響應(yīng)，那么我們輸入的文本，是如何識(shí)別到其中的函數(shù)，常量，單元格的呢？并且在被聚焦后能夠做出對(duì)應(yīng)的響應(yīng)？
基于這樣的需求，經(jīng)過(guò)分析后發(fā)現(xiàn)真正需要做的事情，其實(shí)是將輸入的內(nèi)容進(jìn)行解析，然后根據(jù)解析的結(jié)果，進(jìn)行相應(yīng)的處理，最終生成一段HTML內(nèi)容，而所有的點(diǎn)擊響應(yīng)都是對(duì)DOM元素的事件監(jiān)聽(tīng)而已， 而這里面的關(guān)鍵則是如何將輸入的內(nèi)容，解析成對(duì)應(yīng)的AST，后面生成HTML的過(guò)程也就簡(jiǎn)單了。
思考
現(xiàn)在有這樣的一個(gè)Excel公式，調(diào)用了IF、VLOOKUP函數(shù)，引用了單元格與外部sheet區(qū)域，包括操作符號(hào)，常量等等元素：
IF(VLOOKUP(A1,"sheet1"!$A$1:$C$50,1,2) > 3, 4, 5)接下來(lái)，我們需要做的是將上面的文本轉(zhuǎn)換成下面的存儲(chǔ)結(jié)構(gòu)，也就是AST（抽象語(yǔ)法樹(shù)）：
{
type: 'Program',
body: [{
type: 'function',
name: 'IF',
params: [
{
type: 'expression,
body: [
{
type: 'function',
name: 'VLOOKUP',
params: [
{
type: 'cell',
value: 'A1',
},
{
type: 'range',
ref: 'sheet1'
value: '$A$1:$C$50',
},
{
type: 'number',
value: '1'
},
{
type: 'number',
value: '2'
}
]
},
{
type: 'operator',
value: '>'
},
{
type: 'number',
value: '3'
}
]
}，
{
type: 'number',
value: '4',
},
{
type: 'NumberLiteral',
value: '5',
}
]
}]
}基于結(jié)構(gòu)化的樹(shù)，可以很放標(biāo)轉(zhuǎn)換成類似下面的HTML形式，要知道對(duì)html的操作是非常方便的：
<div class="editor">
<span class="function">IF</span>
<span>(</span>
<span class="exception">
<span>VLOOKUP</span>
<span>(</span>
<span class="cell">A1</span>
<span>,</span>
<span class="ref">sheet1!</span>
<span class="range">"sheet"!$A$1:$C$50</span>
<span>,</span>
<span class="number">1</span>
<span>,</span>
<span class="number">2</span>
<span>)</span>
<span class="operator">></span>
<span class="number">3</span>
</span>
<span class="number">4</span>
<span>,</span>
<span class="number">5</span>
<span>)</span>
</div>最后為為上面的html內(nèi)容添加樣式，并為不同類型的元素綁定事件與處理邏輯，這樣不僅可以對(duì)輸入內(nèi)容高亮，在點(diǎn)擊函數(shù)、單元格時(shí)，還可以給出對(duì)應(yīng)的提示信息或響應(yīng)。
上面的內(nèi)容僅僅是實(shí)現(xiàn)一個(gè)功能的思考與假設(shè)，實(shí)際的實(shí)現(xiàn)可能有所差異，但是實(shí)現(xiàn)的過(guò)程是類似的。
在我們使用的所有編程語(yǔ)言，比如Java、C、javascript等，我們都會(huì)編寫文本格式的源代碼，編譯器或解釋器會(huì)將源代碼按照語(yǔ)言語(yǔ)法解析成對(duì)應(yīng)的語(yǔ)法結(jié)構(gòu)樹(shù)，基于該結(jié)構(gòu)一來(lái)可以實(shí)現(xiàn)語(yǔ)法檢查、代碼高亮等功能，同時(shí)針對(duì)特定代碼塊可以有很多其他操作。
實(shí)現(xiàn)
通過(guò)上面的分析，可以看到核心要實(shí)現(xiàn)的是將文本內(nèi)容解析成語(yǔ)法樹(shù)的過(guò)程。在完成這部分功能的過(guò)程中，看到一個(gè)基于javascript實(shí)現(xiàn)的類似功能的例子the-super-tiny-compiler.js，通過(guò)幾百行的代碼，把這這一過(guò)程清晰地表現(xiàn)出來(lái)。
其過(guò)程主要包括下面幾個(gè)步驟：
- tokenizer：詞法分析的，以字符為單位逐個(gè)遍歷文本，構(gòu)建成一個(gè)token數(shù)組來(lái)描述文本內(nèi)容，其中每一個(gè)token主要包含type,value
- parser：語(yǔ)法分析，將上面的token數(shù)組轉(zhuǎn)換樹(shù)結(jié)構(gòu)
- transformer：遍歷上面語(yǔ)法樹(shù)各種類型的節(jié)點(diǎn)，針對(duì)不同的節(jié)點(diǎn)類型，執(zhí)行不同的操作，生成最終帶有語(yǔ)言特性標(biāo)識(shí)的語(yǔ)法樹(shù)
- codeGenerator：基于語(yǔ)法樹(shù)生成最終的代碼
下面是具體的實(shí)現(xiàn)過(guò)程：
tokenizer
function tokenizer(input) {
let current = 0;
let tokens = [];
while (current < input.length) {
let char = input[current];
if (char === '(') {
tokens.push({
type: 'paren',
value: '(',
});
current++;
continue;
}
if (char === ')') {
tokens.push({
type: 'paren',
value: ')',
});
current++;
continue;
}
let WHITESPACE = /\s/;
if (WHITESPACE.test(char)) {
current++;
continue;
}
let NUMBERS = /[0-9]/;
if (NUMBERS.test(char)) {
let value = '';
while (NUMBERS.test(char)) {
value += char;
char = input[++current];
}
tokens.push({ type: 'number', value });
continue;
}
if (char === '"') {
let value = '';
char = input[++current];
while (char !== '"') {
value += char;
char = input[++current];
}
char = input[++current];
tokens.push({ type: 'string', value });
continue;
}
let LETTERS = /[a-z]/i;
if (LETTERS.test(char)) {
let value = '';
while (LETTERS.test(char)) {
value += char;
char = input[++current];
}
tokens.push({ type: 'name', value });
continue;
}
throw new TypeError('I dont know what this character is: ' + char);
}
return tokens;
}parser
function parser(tokens) {
let current = 0;
function walk() {
let token = tokens[current];
if (token.type === 'number') {
current++;
return {
type: 'NumberLiteral',
value: token.value,
};
}
if (token.type === 'string') {
current++;
return {
type: 'StringLiteral',
value: token.value,
};
}
if (
token.type === 'paren' &&
token.value === '('
) {
token = tokens[++current];
let node = {
type: 'CallExpression',
name: token.value,
params: [],
};
token = tokens[++current];
while (
(token.type !== 'paren') ||
(token.type === 'paren' && token.value !== ')')
) {
node.params.push(walk());
token = tokens[current];
}
current++;
return node;
}
throw new TypeError(token.type);
}
let ast = {
type: 'Program',
body: [],
};
while (current < tokens.length) {
ast.body.push(walk());
}
return ast;
}traverser
function traverser(ast, visitor) {
function traverseArray(array, parent) {
array.forEach(child => {
traverseNode(child, parent);
});
}
function traverseNode(node, parent) {
let methods = visitor[node.type];
if (methods && methods.enter) {
methods.enter(node, parent);
}
switch (node.type) {
case 'Program':
traverseArray(node.body, node);
break;
case 'CallExpression':
traverseArray(node.params, node);
break;
case 'NumberLiteral':
case 'StringLiteral':
break;
default:
throw new TypeError(node.type);
}
if (methods && methods.exit) {
methods.exit(node, parent);
}
}
traverseNode(ast, null);
}transformer
function transformer(ast) {
let newAst = {
type: 'Program',
body: [],
};
ast._context = newAst.body;
traverser(ast, {
NumberLiteral: {
enter(node, parent) {
parent._context.push({
type: 'NumberLiteral',
value: node.value,
});
},
},
StringLiteral: {
enter(node, parent) {
parent._context.push({
type: 'StringLiteral',
value: node.value,
});
},
},
CallExpression: {
enter(node, parent) {
let expression = {
type: 'CallExpression',
callee: {
type: 'Identifier',
name: node.name,
},
arguments: [],
};
node._context = expression.arguments;
if (parent.type !== 'CallExpression') {
expression = {
type: 'ExpressionStatement',
expression: expression,
};
}
parent._context.push(expression);
},
}
});
return newAst;
}codeGenerator
function codeGenerator(node) {
switch (node.type) {
case 'Program':
return node.body.map(codeGenerator)
.join('\n');
case 'ExpressionStatement':
return (
codeGenerator(node.expression) +
);
case 'CallExpression':
return (
codeGenerator(node.callee) +
'(' +
node.arguments.map(codeGenerator)
.join(', ') +
')'
);
case 'Identifier':
return node.name;
case 'NumberLiteral':
return node.value;
case 'StringLiteral':
return '"' + node.value + '"';
default:
throw new TypeError(node.type);
}
}compiler
function compiler(input) {
let tokens = tokenizer(input);
let ast = parser(tokens);
let newAst = transformer(ast);
let output = codeGenerator(newAst);
return output;
}const input = '(add 2 (subtract 4 2))';
compiler(input);感興趣的可以查看相關(guān)的源代碼，上面的解釋比代碼還多，逐行都有非常詳細(xì)的描述。雖然只是一段簡(jiǎn)單的示例，但是將一段代碼的編譯過(guò)程都清晰地展現(xiàn)出來(lái)，對(duì)理解編譯過(guò)程非常有幫助。像Vue React這樣的框架，其編譯過(guò)程也是基于這個(gè)思路，通過(guò)一系列的處理流程，最終生成帶有語(yǔ)言特性的內(nèi)容。
結(jié)束語(yǔ)
本篇文章主要基于目前遇到的的一個(gè)需求，結(jié)合自己分析與思考來(lái)了解需求的本質(zhì)，最后通過(guò)一個(gè)javascript的示例，幫助我們理解這個(gè)過(guò)程。
