教程目录
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> 

首先介绍下什么是DSLDSL全称是Domain Specific Language/DSL领域专用语言,其基本思想是求专不求全,用于解决一个类型,一个领域的问题。比如Vue里面的v-xxxVue称之为指令,其实就是一个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 呗~~

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的文章

载入中...
斑驳光影 斑驳光影

1.5k 声望

发布于专栏

斑驳光影

8 人关注

系列文章