最近需要寫一個(gè)編輯擴(kuò)展組件，主要功能類似于Excel的單元格編輯框，主要針對單元格輸入內(nèi)容的處理。要知道在Excel中，每個(gè)單元格除了可以輸入文本內(nèi)容（包括字符、數(shù)字、日期等）外，還有包括函數(shù)。 那么在輸入函數(shù)時(shí)，如果聚焦到函數(shù)（比如IF VLOOKUP）或單元格（比如A1 A2）上，都會有對應(yīng)的響應(yīng)，那么我們輸入的文本，是如何識別到其中的函數(shù)，常量，單元格的呢？并且在被聚焦后能夠做出對應(yīng)的響應(yīng)？SqT28資訊網(wǎng)——每日最新資訊28at.com

基于這樣的需求，經(jīng)過分析后發(fā)現(xiàn)真正需要做的事情，其實(shí)是將輸入的內(nèi)容進(jìn)行解析，然后根據(jù)解析的結(jié)果，進(jìn)行相應(yīng)的處理，最終生成一段HTML內(nèi)容，而所有的點(diǎn)擊響應(yīng)都是對DOM元素的事件監(jiān)聽而已， 而這里面的關(guān)鍵則是如何將輸入的內(nèi)容，解析成對應(yīng)的AST，后面生成HTML的過程也就簡單了。SqT28資訊網(wǎng)——每日最新資訊28at.com

思考

現(xiàn)在有這樣的一個(gè)Excel公式，調(diào)用了IF、VLOOKUP函數(shù)，引用了單元格與外部sheet區(qū)域，包括操作符號，常量等等元素：SqT28資訊網(wǎng)——每日最新資訊28at.com

IF(VLOOKUP(A1,"sheet1"!$A$1:$C$50,1,2) > 3, 4, 5)

接下來，我們需要做的是將上面的文本轉(zhuǎn)換成下面的存儲結(jié)構(gòu)，也就是AST（抽象語法樹）：SqT28資訊網(wǎng)——每日最新資訊28at.com

{  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)化的樹，可以很放標(biāo)轉(zhuǎn)換成類似下面的HTML形式，要知道對html的操作是非常方便的：SqT28資訊網(wǎng)——每日最新資訊28at.com

<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)容添加樣式，并為不同類型的元素綁定事件與處理邏輯，這樣不僅可以對輸入內(nèi)容高亮，在點(diǎn)擊函數(shù)、單元格時(shí)，還可以給出對應(yīng)的提示信息或響應(yīng)。SqT28資訊網(wǎng)——每日最新資訊28at.com

上面的內(nèi)容僅僅是實(shí)現(xiàn)一個(gè)功能的思考與假設(shè)，實(shí)際的實(shí)現(xiàn)可能有所差異，但是實(shí)現(xiàn)的過程是類似的。SqT28資訊網(wǎng)——每日最新資訊28at.com

在我們使用的所有編程語言，比如Java、C、javascript等，我們都會編寫文本格式的源代碼，編譯器或解釋器會將源代碼按照語言語法解析成對應(yīng)的語法結(jié)構(gòu)樹，基于該結(jié)構(gòu)一來可以實(shí)現(xiàn)語法檢查、代碼高亮等功能，同時(shí)針對特定代碼塊可以有很多其他操作。SqT28資訊網(wǎng)——每日最新資訊28at.com

實(shí)現(xiàn)

通過上面的分析，可以看到核心要實(shí)現(xiàn)的是將文本內(nèi)容解析成語法樹的過程。在完成這部分功能的過程中，看到一個(gè)基于javascript實(shí)現(xiàn)的類似功能的例子the-super-tiny-compiler.js，通過幾百行的代碼，把這這一過程清晰地表現(xiàn)出來。SqT28資訊網(wǎng)——每日最新資訊28at.com

其過程主要包括下面幾個(gè)步驟：SqT28資訊網(wǎng)——每日最新資訊28at.com

1. tokenizer：詞法分析的，以字符為單位逐個(gè)遍歷文本，構(gòu)建成一個(gè)token數(shù)組來描述文本內(nèi)容，其中每一個(gè)token主要包含type,value
2. parser：語法分析，將上面的token數(shù)組轉(zhuǎn)換樹結(jié)構(gòu)
3. transformer：遍歷上面語法樹各種類型的節(jié)點(diǎn)，針對不同的節(jié)點(diǎn)類型，執(zhí)行不同的操作，生成最終帶有語言特性標(biāo)識的語法樹
4. codeGenerator：基于語法樹生成最終的代碼

下面是具體的實(shí)現(xiàn)過程：SqT28資訊網(wǎng)——每日最新資訊28at.com

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ì)的描述。雖然只是一段簡單的示例，但是將一段代碼的編譯過程都清晰地展現(xiàn)出來，對理解編譯過程非常有幫助。像Vue React這樣的框架，其編譯過程也是基于這個(gè)思路，通過一系列的處理流程，最終生成帶有語言特性的內(nèi)容。SqT28資訊網(wǎng)——每日最新資訊28at.com

結(jié)束語

本篇文章主要基于目前遇到的的一個(gè)需求，結(jié)合自己分析與思考來了解需求的本質(zhì)，最后通過一個(gè)javascript的示例，幫助我們理解這個(gè)過程。SqT28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-80883-0.html代碼是如何被被編譯的？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 你們單測覆蓋率是如何統(tǒng)計(jì)的？原理是什么？

下一篇： 如何僅使用CSS創(chuàng)建一個(gè)環(huán)形進(jìn)度條？