手把手教你从零写一个简单的 VUE--模板篇

教程目录
1.手把手教你从零写一个简单的 VUE
2.手把手教你从零写一个简单的 VUE--模板篇

Hello，我又回来了，上一次的文章教会了大家如何书写一个简单 VUE，里面实现了VUE 的数据驱动视图渲染模板，更新到页面的过程，简单的带大家了解了类似 VUE 这样子的数据驱动视图框架的工作流程，今天我来给大家讲一讲作为一个前端框架最为核心的部分---模板，代码还是放在文章的最后，请随意下载

模板的分类

在介绍我们实现的模板语言之前，我们先来了解下，现在市面上比较流行的模板语言：

PHP/ASP/JSP风格

   <%if(list.length ){%>   <ol>

      <%for(n = 0; n < list.length; ++n ){%>

        <li>

          <%=list[n]%>

        </li>

      <%}%>

     </ol>

   <%}%>

这种是最接近于 js 变成语言的语法，比较直观，但是由于存在< >的分隔符，对 IDE不太友好，不太好进行格式化处理

mustcache风格

    {{#if list.length}}

    <ol>

    {{#each list item}}

      <li>

        {{item}}

      </li>

    {{/each}}

    </ol>

    {{/if}}

这种是artTemplate默认的语法，高级语法有限，通常难自定义拓展

`DSL`风格语法

 <ol dsl-if="list.length">

    <li dsl-for="item in list">

    </li>

  </ol>

首先介绍下什么是DSL， DSL全称是Domain Specific Language/DSL领域专用语言,其基本思想是求专不求全，用于解决一个类型，一个领域的问题。比如Vue里面的v-xxx，Vue称之为指令，其实就是一个DSL，用于解决模板语法等问题，这种模板由于在html语法里面相当于标签的属性，所以对IDE友好，不会影响格式化操作。

Vue的模板语法相当于结合了 DSL语法和 mustcache风格，逻辑控制部分使用DSL语法，输出展示部分使用 mustcache风格

模板引擎设计思路

下面是这个模板引擎的思路：

字符串模板语法定义

首先我们要定义一种模板语法，按照上一节的说明，我们使用DSL风格语法，下面是我们测试用的模板

我们采用最简单的将模板写在script标签的配置方式，可以看到我们定义了几个DSL,分别是dsl-if,dsl-for,dsl-html,分别用于判断，循环和直接输出 html，还有使用mustcache作为字符串输出语法。当然这个只是一个简单的模板DSL语言，主要为了讲解思路，真正的模板需要更加多的模板语法，具体可以参照 VUE文档

模板解析成为 AST

首先解释下什么是AST，AST 全称为abstract syntax tree(抽象语法树)，是源代码的抽象语法结构的树状表现形式，每种源码都可以被抽象成为AST，比如我们常用的 js，css，json 等，都可以解析成为 AST
把模板解析成为AST,就是将模板的 html 结构进行解析，变成一颗附带结构、关系、属性的抽象树，这样做方便与后面我们多次对模板进行处理，减少了多次解析字符串带来的损耗，同时变成一颗树的数据结构之后更加方便于我们的遍历，关于AST的优点缺点大家可以执行搜索，这里就不展开说明了
上面的字符串模板解析完成之后，会变成以下的一个AST

可以看到字符串模板变成了一个object数组，每个 obj 代表一个节点，里面包含了这个 obj 的属性，类型，父子关系，用到的DSL等等。这个可以看成是我们的模板的一个中间态，为我们进行进一步处理打下了基础。

AST 转换成为模板函数

联系上一篇文章，其实模板函数的构造都大同小异，基本是都是通过拼接函数字符串，然后通过Function对象转换成一个函数，变成一个函数之后，只要传入对应的数据，函数就会返回一个模板数据渲染好的 html 字符串。下面是例子中通过AST

这是个函数体，然后使用new Function，就变成一个真正的函数了，至于这个函数体的解释，我将放在下面具体实现进行讲解

数据与模板函数结合生成 html

由于本文主要是讲模板的实现，因此数据部分还是使用延续上一篇文章的绑定，在初始化或者数据发生改变的时候，响应的函数会对数据所关联的模板函数进行重新调用，生成新的html，重新进行渲染。

模板的开发思路我们就在上面都说明了，主要总结下就是将字符串模板变成 ast，ast 变成模板函数，然后就可以结合数据进行 html 生成及渲染了

具体实现方法

首先说明下本教程的方法是对思路的实现，并非完全使用 vue 的实现方法，vue 是一个完整的框架，里面涉及的东西比较多，我们的实现是为了让大家更好的了解 vue 的原理，而非完全实现

字符串模板变成`AST`部分

1.模板预处理：
由于字符串模板是人为处理的，因此书写的时候可能会出现标签不配对，标签未关闭等问题，因此我们要先做些预处理，来去除这些干扰，做法有很多种，比如通过一些语法分析的工具进行解析，这里我们使用一种比较简单的方式进行处理，代码如下(/src/core/render.js)：

可以看到我创建了一个div标签，然后将字符串模板放进去里面，这样子浏览器会对模板进行解析处理，然后我们再通过innerHTML去除前后空格之后拿出来，这样就对字符串模板进行了处理。
备注：我们按照 vue 的规则，一个模板只有一个根节点，所以我们取了childNodes[0]

2.生成 ast：
上面我们对字符串模板进行了预处理，接下去我们要将字符串模板转换成ast,代码比较长，大家有兴趣可以看下/src/compiler/ast/parse.js,下面说下解析思路
解析通过正则表达式配合 String.replace(regExt,fn)，正则表达式为/<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g,解析出来标签和标签上面的属性，然后按照需求进行存储，就生成 ast

ast 生成模板函数

生成模板函数的思路就是递归遍历ast 树，对不同的类型节点，不同的NSL，调用不同的生成函数，最后组合成为模板函数字符串，代码如下(/src/compiler/compiler-helper.js)：

可以看到，处理的函数对 DSL还有不同的标签类型进行处理，然后都返回了一个辅助函数的调用，比如_i,_f,_c等等，这里的辅助函数是在模板函数被调用的时候才真正的被调用的,下面我们举例说明一个辅助函数_c

这个辅助函数的功能是用于生成节点，可以看到调用了这个函数之后，对应的 ast 里面的节点被真正生成，变成dom节点，并且会把孩子节点进行插入，通过很多辅助函数的递归嵌套调用，最终模板函数一调用，就可以结合数据渲染出来真实的dom节点

下面说一个比较细的知识点，就是辅助函数的调用，我们知道上面的辅助函数调用在生成的时候，其实都是字符串，然后通过new Function让他变成真正的函数，那么问题就来了，我们知道new Function是的作用域和运行时的代码是隔离的，是调用不到外面的_c,_f等辅助函数的，那是如何实现调用的呢，这里用了一个我们很少使用的关键字with，这个关键字在很多书籍里面都不推荐使用，因为他的作用是修改with包含代码块的作用域，如果滥用会导致代码的逻辑不可控，但是在模板函数里面这个关键字有奇效，他可以方便的规定把当前的代码作用域传到模板函数里面，从而使得模板函数里面可以调用到运行时作用域的函数。大家可以看下上一小节生成的模板函数字符串，会发现就是用整个with(that){}包裹起来的，在模板函数运行时，将当前作用域直接传入即可,代码如下：

结合数据运行

至此，我们已经生成了模板函数，通过传入数据运行模板函数，就可以生成 dom，代码如下:

可以我们直接把compiler_helper附带上 data 作为作用域，直接调用了模板函数，就可以生成dom，再结合我们第一篇文章写的数据监听，就可以实现简单的数据驱动视图

后话

至此，我们的VUE模板的基本实现已经介绍完成了，这里主要是介绍如何去实现一个模板引擎的思路，所以功能上上面的实现不是完整的，只是实现了一些简单的语法，大家可以下下代码继续补充。

思考

细心的人可能会发现，我们上面的模板有个问题，就是如果改了数据中的其中一个数值，那么整个模板都得重新编译，重新渲染，这其实是非常损耗性能的，这其实就是我下一篇文章要讲的，模板渲染的效率问题，先提出几个关键词 虚拟dom，diff 算法，最小化渲染，吊吊大家的胃口，哈哈，下一篇文章我会进行全面的介绍，相信学习完下一篇文章，大家会对现有市面上的数据驱动框架的模板部分有个全面的了解~下一篇文章更加精彩哦~~求关注
最后附上源码点我点我，各位客官给个 star 呗~~