资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/手把手教你从零写一个简单的 VUE--模板篇

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

luoyibu / 2343人阅读

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

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

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

模板的分类

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

PHP/ASP/JSP风格 
   <%if(list.length ){%>   
    
      <%for(n = 0; n < list.length; ++n ){%>
        
  1. 
          <%=list[n]%>
        
    2. 
      <%}%>   
     
 
   <%}%>

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

mustcache风格 
    {{#if list.length}}  
    
    
    {{#each list item}}
      
  1. 
        {{item}}
      
    2. 
    {{/each}}   
    
 
    {{/if}}

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

DSL风格语法 
 
       
    
  1. 
    
    
    2.

首先介绍下什么是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 呗~~

超融合服务器 云服务器 手把手教你做图像识别 手把手教你阿里云服务器搭建商城 一个教你开发小程序的小程序 简单的php网站模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56542.html

相关文章

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

    摘要：转换成为模板函数联系上一篇文章，其实模板函数的构造都大同小异，基本是都是通过拼接函数字符串，然后通过对象转换成一个函数，变成一个函数之后，只要传入对应的数据，函数就会返回一个模板数据渲染好的字符串。 教程目录1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 Hello，我又回来了，上一次的文章教会了大家如何书写一个简单 VUE，里面实现了VUE 的...

    feng409 评论0 收藏0

  • 手把手教你从零写一个简单的 VUE

    摘要：本系列是一个教程，下面贴下目录手把手教你从零写一个简单的手把手教你从零写一个简单的模板篇今天给大家带来的是实现一个简单的类似一样的前端框架，框架现在应该算是非常主流的前端数据驱动框架，今天我们来从零开始写一个非常简单的框架，主要是让大家 本系列是一个教程，下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单...

    RebeccaZhong 评论0 收藏0

  • 手把手教你从零写一个简单的 VUE

    摘要：本系列是一个教程，下面贴下目录手把手教你从零写一个简单的手把手教你从零写一个简单的模板篇今天给大家带来的是实现一个简单的类似一样的前端框架，框架现在应该算是非常主流的前端数据驱动框架，今天我们来从零开始写一个非常简单的框架，主要是让大家 本系列是一个教程，下面贴下目录~1.手把手教你从零写一个简单的 VUE2.手把手教你从零写一个简单的 VUE--模板篇 今天给大家带来的是实现一个简单...

    Acceml 评论0 收藏0

  • 2017-06-20 前端日报

    摘要：前端日报精选专题之跟着学节流冴羽的博客全家桶仿微信项目，支持多人在线聊天和机器人聊天腾讯前端团队社区编码的奥秘模块实现入门浅析知乎专栏前端每周清单发布新版本提升应用性能的方法中文寇可往吾亦可往用实现对决支付宝的微信企业付款到零 2017-06-20 前端日报 精选 JavaScript专题之跟着 underscore 学节流 - 冴羽的JavaScript博客 - SegmentFau...

    Galence 评论0 收藏0

  • 手把手教你从零搭建react局部热加载环境

    摘要：有没有办法实现就局部刷新呢当然是有第十步执行为了实现局部热加载，我们需要添加插件。 前言 用了3个多月的vue自认为已经是一名合格的vue框架api搬运工，对于vue的api使用到达了一定瓶颈，无奈水平有限，每每深入底层观赏源码时候都迷失了自己。 遂决定再找个框架学习学习看看能否突破思维局限，加上本人早已对React、RN技术垂涎已久,于是决定找找教程来学习。无奈第一步就卡在了环境搭...

    quietin 评论0 收藏0

发表评论

登陆后可评论

0条评论

luoyibu

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<