前言

MV*框架中模板转化成代码的的过程涉及到编译原理，把这个html->code和第二篇文章的code->html连接起来就是完整的一个流程。

词法分析和语法分析

html其实就是一系列的字符串，这个将字符串转化成可执行代码的过程一般就叫做编译或者转译，如果会转成机器代码就是编译，否则就是转译。
很显然，MV*框架做的事情也是转译。而这个转译又主要分为词法分析和语法分析两个过程。

词法分析

词法分析就是将一个完整的句子分割成各个独立的单元的过程，这些单元被称为tokens。
例如一个表达式是“3+2”，那么tokens就是3、+、2。
同理一段html代码<p>Some HTML</p>的tokens就是<p>、Some HTML、</p>

语法分析

语法分析是在词法分析之后的，它的目的是将这个tokens组织起来变成可执行的结构。
在MV*框架里通常就是将tokens转换成一颗AST(抽象语法树)。

compile的使用

Moon的官网提及了Moon.compile的使用：

Moon.compile("<p>Some HTML</p>");

它将会被转成如下code：

function anonymous(m) {
  var instance = this; 
  return m("p", {attrs: {}}, {"shouldRender": false}, [m("#text", {"shouldRender": false}, "Some HTML")]);
}

也就是我们第二篇文章中render函数用到的m函数！之后大家可以自行推测出后续过程了吧~

compile的实现

我们重新new一个Moon实例，打一个断点跟到compile：

Moon-compile.jpg

compile.jpg

实现很简洁，有没有大吃一惊？
其实这就是一个template通过词法分析器lex生成tokens，tokens又通过语法分析器生成ast，最后通过ast生成node的过程。

lex

lex的实现：

var lex = function(input) {
    var state = {
        input: input,
        current: 0,
        tokens: []
    }
    lexState(state);
    return state.tokens;
}

它构造了一个state对象交给lexState分析，分析完后直接拿结果返回。

lexState

它其实也就是对input进行分流处理，有三条分支：不以<开头的转到lexText、以<!--开头的转到lexComment、其余全部给lexTag处理。
也就是说它把tokens分成三种类型：文本、注释、标签。

var lexState = function(state) {
    var input = state.input;
    var len = input.length;
    while (state.current < len) {
        // Check if it is text
        if (input.charAt(state.current) !== "<") {
            lexText(state);
            continue;
        }
        // Check if it is a comment
        if (input.substr(state.current, 4) === "<!--") {
            lexComment(state);
            continue;
        }
        // It's a tag
        lexTag(state);
    }
}

1. lexTag

var lexTag = function(state) {
    var input = state.input;
    var len = input.length;

    // Lex Starting of Tag
    var isClosingStart = input.charAt(state.current + 1) === "/";
    state.current += isClosingStart === true ? 2 : 1;

    // Lex type and attributes
    var tagToken = lexTagType(state);
    lexAttributes(tagToken, state);

    // Lex ending tag
    var isClosingEnd = input.charAt(state.current) === "/";
    state.current += isClosingEnd === true ? 2 : 1;

    // Check if Closing Start
    if (isClosingStart === true) {
        tagToken.closeStart = true;
    }

    // Check if Closing End
    if (isClosingEnd === true) {
        tagToken.closeEnd = true;
    }
}

lexTag会通过lexTagType生成一个tagToken，然后通过lexAttributes给tagToken补充attr，最后通过isClosingStart判断它是一个开始标签还是一个结束标签。也就是把<p>Some HTML</p>的<p>和</p>这两个token找出来。

1.1 lexTagType
它负责找出标签token的type，例如是p或div：

lexTagType.jpg

它会对模板字符串中每个字符分析直到有"/"或者">"或者" "才结束，然后生成一个tagToken，push到state里，返回。在这个例子里，我们的tagType是div。

1.2 lexAttributes
它负责找出标签token的attr，例如id或class：

lexAttributes.jpg

它会使用双索引滑动窗口方法来判断一个字符串是否是attr,期间声明了一个incrementChar函数用来滑动窗口，在窗口中检测到>或者">就说明这是一个标签的结尾,并且忽略空格，从=拆分，左边一个attr名，右边是一个attr值。然后使用attributes对象来存储所有的attr，每个attr是一个attrValue对象：

{
     name: attrName,
     value: "",
     meta: {}
}

lexAttributes2.jpg

在经过一系列的查找后，lexAttributes成功地把tagToken的attrs悉数找出，然后设置到tagToken.attributes里去。

2. lexText
   它负责找出文本类型的token：

   
   
   lexText.jpg

很有趣的一点是：它是根据一个正则来获取当前文本的结尾位置的。

var tagOrCommentStartRE = /<\/?(?:[A-Za-z]+\w*)|<!--/;

在找到文本token后还分两种情况：纯文本和部分文本。如果是纯文本就直接从current这个索引截取剩下的部分，如果是部分文本就只截取滑动窗口的内容。

3. lexComment
   它负责找出注释类型的token：

   
   
   lexComment.jpg
   
   

   实现方法和lexText类似，只不过注释结尾比较好找，发现-->就行了。

4. 结果
   最初的html：

<div id="app" class="container">
    <h2 class="text-center" m-on:click="haha()">{{msg}}</h2>
    <h2 class="text-center" m-on:click="haha()">{{computeData}}</h2>
    <!-- 这是注释 -->
</div>

最后得到这个结果：

lex-result.jpg

parse的实现

parse函数的实现同样很简洁：

parse.jpg

它建立了一个root对象来存储ast,每个子元素通过parseWalk得出。

parseWalk

parseWalk是用来遍历tokens的：

parseWalk-1.jpg

它会构造token、previousToken、nextToken三个指针，然后声明了一个move函数用来移动这三个指针，有点类似链表的操作。
在当前token的类型是文本或者注释的时候，会执行move，只不过一个返回previousToken.value一个返回null，因为文本的前面肯定是标签，而注释就没有处理的意义了。下面进入正题：type是tag的时候：

parseWalk-2.jpg

createParseNode

其实就是创建一个ast的node对象：

createParseNode.jpg

parse结果0.

parse-result.jpg

generate的实现

generate一改之前lexer和parse的简洁，变成很难读的样子了：

generate.jpg

不过还好，增加点耐心就没事。
可以看出ast这颗树实际上是挂载在root的children上，这里声明了一个state对象，里面包括了attr、directive、dep，接着通过generateNode生成若干个m函数，用dependencies把dep拿出来生成dependenciesCode最终拼接成最终的执行代码，然后返回根据这段代码生成的render函数。

generateNode

这个函数负责生成vnode

generateNode1.jpg

可以看出来这里还是兵分三路：

1. node是string类型
2. node是slot类型

3. 其他情况
   它们分别做了什么呢？第一种情况直接编译模板和meta，第二种情况是对slot进行处理，最后是一般情况对meta、prop、directive、children等进行处理，最终返回生成好的调用代码。

   
   
   generateNode2.jpg

defaultMetadata

它负责生成默认渲染配置的对象：

defaultMetadata.jpg

generateProps

generateProps是个大函数，涉及到很多小函数

generateProps.jpg

它先获取props,然后把这个props丢进vnode的attrs，接着处理指令。接着开始生成props代码，和指令匹配，如果匹配到就进入beforeGenerate、afterGenerate、duringGenerate里。

1. beforeGenerate
   这个函数是存在于各个内置指令对象里的，除了它之外，还有duringPropGenerate和afterGenerate方法。
   这里以m-on为例,它会获取事件名、事件回调，然后编译模板表达式，生成修饰符，最后加上事件监听代码：

   
   
   m-on-beforeGenerate.jpg

2. compileTemplateExpression
   它负责编译模板里的依赖表达式：

   
   
   compileTemplateExpression.jpg
   
   

   它会获取模板里的dependencies，或者说{{}}里面的表达式。

3. addEventListenerCodeToVNode
   它负责给vnode添加事件监听：

   
   
   addEventListenerCodeToVNode.jpg
   
   

   它会从vnode.meta获取eventListeners，最终取出eventHandlers给它加入handler来给vnode添加上事件监听。

4. compileTemplate->compileTemplateState
   compileTemplate负责编译一个模板，具体工作交给compileTemplateState做：

   
   
   compileTemplate.jpg
   
   

   compileTemplateState对模板做了什么呢？它会通过escapeString先进行一些转义工作：

   
   
   escapeString.jpg
   
   如果是{{}}表达式，会通过scanTemplateStateUntil扫描依赖和scanTemplateStateForWhitespace去除空格：
   
   compileTemplateState.jpg
   
   这样就得到了{{}}里面的依赖,接着调用compileTemplateExpression编译这个表达式,迭代进行下去这个过程把dependencies收集过来。

5. scanTemplateStateUntil
   这其实就是个扫描器，返回{{}}里面真正的表达式：

   
   
   scanTemplateStateUntil.jpg

6. scanTemplateStateForWhitespace
   它同样是个扫描器，不过它的作用是扫描空格然后略过去：

   
   
   scanTemplateStateForWhitespace.jpg

generateMeta和generateEventlisteners

它们分别生成meta执行代码和事件执行代码，在generateMeta中对meta里的eventListeners进行特殊处理进到generateEventlisteners里去。

var generateMeta = function(meta) {
    var metaCode = "{";
    for (var key in meta) {
        if (key === "eventListeners") {
            metaCode += generateEventlisteners(meta[key])
        } else {
            metaCode += "\"" + key + "\": " + (meta[key]) + ", ";
        }
    }

    metaCode = metaCode.substring(0, metaCode.length - 2) + "}, ";
    return metaCode;
}

var generateEventlisteners = function(eventListeners) {
    var eventListenersCode = "\"eventListeners\": {";
    for (var type in eventListeners) {
        var handlers = eventListeners[type];
        eventListenersCode += "\"" + type + "\": [";

        for (var i = 0; i < handlers.length; i++) {
            eventListenersCode += (handlers[i]) + ", ";
        }

        eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "], ";
    }

    eventListenersCode = eventListenersCode.substring(0, eventListenersCode.length - 2) + "}, ";
    return eventListenersCode;
}

总结

html->code总体经历了三个阶段：lex语法分析、compile词法分析、generate生成可执行代码，实际过程就是html->tokens->ast->code。