[关闭]
@yangfch3 2016-11-30T12:07:12.000000Z 字数 6480 阅读 5866

artTemplate 模板引擎源码解析

FE

近日，阅读了 artTemplate 模板引擎的源码，引擎的整个结构十分优雅，代码组织得十分清晰。整个库加上注释才 700 余行，十分适合用于阅读与学习。

关于模板引擎的原理与实现思路网上有着许多系列文章，github 上也有着大量的实现可供参考。这篇文章的任务就是带你去阅读 artTemplate 这一款优秀的模板引擎，让你的阅读更加清晰。推荐先阅读一遍源码再来阅读此文。

预备知识：关于模板引擎

每个引擎的实现都需要牵涉到以下五个点：

  1. 语法
    • 弱逻辑语法
    • 强逻辑语法
  2. 解析（用到大量正则、转义）
    • 词法分析
    • 语法分析
  3. 编译 —— 编译模板为可执行的函数
    • 语法解析器（parser）
    • 编译器（compiler）
  4. 缓存
  5. 渲染 —— render 函数接收 Date 运行

拿一个简单的例子来说说：我们需要将下面的 tpl 利用 model 数据正确地编译渲染输出为 下方的html

  1. // tpl
  2. <h3>
  3.   <% if (typeof content === 'string') { %>
  4.     <=% content %>
  5.   <% } %>
  6. <h3>
  8. // HTML
  9. // render({content: 'a h3 title'})
  10. '<h3>a h3 title</h3>'

首先上面的 tpl 已经为我们 制定好了模板的语法规则，逻辑语句 <% %>，赋值语句 <%= %>。

这其中我们必然需要通过 词法分析 与 语法解析，使得我们的 tpl 解析（拼接）为一段可行的 JavaScript 代码字符串。

  1. $html += '<h3>';
  2.   if (typeof content === 'string') {
  3.     $html += content;
  4.   }
  5. $html += '</h3>';

上面的 代码字符串 还没有实质性的作用，一段 代码字符串 需要真的执行需要借助能使用文本访问 JavaScript 解析引擎的方法：

  1. eval
  2. Function
  3. setTimeout
  4. setInterval

我们不难想到，必然需要使用 Function 构造函数 将 代码字符串 做为函数体构建（编译）为真正可执行的代码（函数），为此我们借助 Function 构造函数 来构建（编译出）我们的 渲染方法，同时在渲染方法中需要完成变量赋值操作

  1. var render = (function() {
  2.   var cache = 
  3.   "var $html = '';\
  4.   with($data) {\
  5.     $html += '<h3>';\
  6.       if (typeof content === 'string') {\
  7.         $html += content;\
  8.       }\
  9.     $html += '</h3>';\
  10.   }\
  11.   return $html;\
  12.   ";
  14.   return function (data) {
  15.     var renderfn = new Function('$data', cache);
  16.     return fn(data);
  17.   }
  18. })();

最后，我们得到了 render 方法，直接调用吧：

  1. render({content: 'a h3 title'});
  2. // <h3>a h3 title</h3>

上面介绍了模板引擎的基本作用过程，我们不难发现，模板引擎里最核心实现部分是：

  1. 语法解析器
  2. 编译器

语法解析器（parser）负责将模板语言转为 代码字符串，编译器（compilers）负责使用 代码字符串 完成渲染方法的构建。

artTemplate 核心组件概念图

IMG_1031.JPG-1731kB

图中我们能看到整个模板引擎的设计理念、调用栈和数据流动，可以看到对外暴露的接口（图中省略了 template.helper(name, fn) 辅助函数注册接口），可以看到我们这里面设计的最重要的两个引擎函数：compiler 和 parser。

同时查看源代码，我们能看到其最值得称道的两个特性：

  1. cache 机制
  2. debug 机制

cache 机制将生成的 render() 函数都缓存起来，大大提高了效率；debug 能将错误定位到模板的具体某行，方便了开发时的排错。

cache 机制的存储是通过一个对象实现的，cache 对象的键为模板字符串，值为编译后的可执行函数。

debug 机制则是通过在编译时视你的选择，决定是否在函数在加入行号变量以及错误捕获机制。

模板的编译思路

artTemplate 为我们提供了很好的模板编译思路，期望的目标规则：将 tpl 转为下面那样的 render() 函数。

  1. // tpl
  2. {{ if isAdmin }}
  4. <h1>{{title}}</h1>
  5. <ul>
  6.     {{each list as value i}}
  7.         <li>索引 {{i + 1}} ：{{value}}</li>
  8.     {{/each}}
  9. </ul>
  11. {{/if}}
  13. // Render 方法：一般模式下
  14. var render = function($data, $filename) {
  15.     'use strict';
  16.     var $utils = this,
  17.         $helpers = $utils.$helpers,
  18.         $escape = $utils.$escape,
  19.         $each = $utils.$each,
  20.         isAdmin = $data.isAdmin,
  21.         title = $data.title,
  22.         list = $data.list,
  23.         value = $data.value,
  24.         i = $data.i,
  25.         $out = '';
  26.     if (isAdmin) {
  27.         $out += '\n\n    <h1>';
  28.         $out += $escape(title);
  29.         $out += '</h1>\n    <ul>\n        ';
  30.         $each(list, function(value, i) {
  31.             $out += '\n            <li>索引 ';
  32.             $out += $escape(i + 1);
  33.             $out += ' ：';
  34.             $out += $escape(value);
  35.             $out += '</li>\n        ';
  36.         });
  37.         $out += '\n    </ul>\n\n    ';
  38.     }
  39.     return new String($out);
  40. }
  42. // Render() 方法：debug 模式下
  43. var render = function ($data, $filename) {
  44.     try {
  45.         'use strict';
  46.         var $utils = this,
  47.             $helpers = $utils.$helpers,
  48.             $line = 0,
  49.             isAdmin = $data.isAdmin,
  50.             $escape = $utils.$escape,
  51.             title = $data.title,
  52.             $each = $utils.$each,
  53.             list = $data.list,
  54.             value = $data.value,
  55.             i = $data.i,
  56.             $out = '';
  57.         $out += '\n    ';
  58.         $line = 2;
  59.         if (isAdmin) {
  60.             $out += '\n\n    <h1>';
  61.             $line = 4;
  62.             $out += $escape(title);
  63.             $out += '</h1>\n    <ul>\n        ';
  64.             $line = 6;
  65.             $each(list, function(value, i) {
  66.                 $out += '\n            <li>索引 ';
  67.                 $line = 7;
  68.                 $out += $escape(i + 1);
  69.                 $out += ' ：';
  70.                 $line = 7;
  71.                 $out += $escape(value);
  72.                 $out += '</li>\n        ';
  73.                 $line = 8;
  74.             });
  75.             $out += '\n    </ul>\n\n    ';
  76.             $line = 11;
  77.         }
  78.         $out += '\n    ';
  79.         return new String($out);
  80.     } catch (e) {
  81.         throw { filename: $filename, name: 'Render Error', message: e.message, line: $line, source: '\n    {{if isAdmin}}\n\n    <h1>{{title}}</h1>\n    <ul>\n        {{each list as value i}}\n            <li>索引 {{i + 1}} ：{{value}}</li>\n        {{/each}}\n    </ul>\n\n    {{/if}}\n    '.split(/\n/)[$line - 1].replace(/^\s+/, '') }; }
  82. }

其中有两个疑问的地方：

  1. 渲染方法里的 this 被赋值给了 $utils
  2. 方法头部得到的 value 和 i

首先第 2 点。$data 数据对象里是不一定有 value 和 i 属性的，并且最终构建的 Render 函数也并没有用到 value 和 i（each 回调函数的 value 和 i 与上一级的 value 和 i 是不一样的）。

经过检验发现这是由于 artTemplate 将循环里用到的变量（value, i）也在上一级进行了声明，这减少了 logic(code) 判断的工作量，但是带来了不必要的代码。

然后是第 1点：渲染方法里的 this 被赋值给了 $utils。请看下面的说明：

renderFile(filename, data) 里的 fn(data) 指向的是 compile(source, options) 返回的 render(data) 函数，render(data) 执行时运行的是 new Render(data, filename)，new Render() 执行过程中的 this 指向 Render 的 prototype（template.utils，在代码内清楚地指定了的）。

你在纸上画出 render, Redner, new Render() 实例 的原型链就能知道为什么可以直接将这里的 this 赋值给 $utils 了。

为了验证，我们稍微修改一下 template.js 里构建字符串的源代码：

  1. // 比源代码多加了一句 console
  2. var headerCode = "'use strict';"
  3.             + "console.log(this['__proto__'] === template.utils);" // true
  4.             + "var $utils=this,$helpers=$utils.$helpers,"
  5.             + (debug ? "$line=0," : "");

现在我们的目标已经明确：由 tpl 生成上面所示的 Render 方法。

下面需要着手实现模板解释器与编译器了。

compiler

编译器，是由 tpl => Render() 的转换场所，用于拼接字符串，生成函数体代码字符串，然后调用 new Function() 构建起 Render() 函数。

编译器牵涉到了大量字符的处理，同时 compiler 也调用了 parser() 用于处理逻辑型的代码字符串。

  1. {{if isAdmin}}
  3. <h1>{{title}}</h1>
  4. <ul>
  5.     {{each list as value i}}
  6.         <li>索引 {{i + 1}} ：{{value}}</li>
  7.     {{/each}}
  8. </ul>
  10. {{/if}}

我们很容易发现，{{ 到下一个 }} 中间的是逻辑代码字符串，}} 到下一个 {{ 中间的是普通的 HTML 字符串。对于普通的 HTML 字符串，我们只需要简单的拼接就可以了。对于逻辑代码字符串则需要比较复杂的处理，同时变量的识别与赋值也是一件很精细的事情。

主要的几个方法与片段：

  1. getVariable(code) —— 按照规则识别并返回一段模板字符串中的变量
  2. stringify(code)——字符串转义
  3. html(code)——处理 HTML 字符串
  4. logic(code)——处理逻辑字符串

  5. forEach 遍历

    1. forEach(source.split(openTag), function (code) {
    2.    code = code.split(closeTag);
    3.    var $0 = code[0];
    4.        var $1 = code[1];
    6.    // code: [html]
    7.    if (code.length === 1) {
    9.        mainCode += html($0);
    11.        // code: [logic, html]
    12.    } else {
    14.        mainCode += logic($0);
    16.        if ($1) {
    17.                mainCode += html($1);
    18.        }
    19.    }
    20. })

在几个主要的遍历与函数处打上断点，查看其一步步的执行过程，便能看到其一步步的执行过程了。

在编译的过程中用到了大量的正则匹配，几个比较大的正则如下：

  1. var REMOVE_RE = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g;
  2. // 匹配 /*xxx*/注释，//xxx 注释，字符串 "xxxx" 'xxx'，"  .   $data."
  4. var SPLIT_RE = /[^\w$]+/g;
  5. // 匹配  空格+运算符+符号(除_)
  7. var KEYWORDS_RE = /\bbreak\b|\bcase\b|\bcatch\b|\bcontinue\b|\bdebugger\b|\bdefault\b|\bdelete\b|\bdo\b|\belse\b|\bfalse\b|\bfinally\b|\bfor\b|\bfunction\b|\bif\b|\bin\b|\binstanceof\b|\bnew\b|\bnull\b|\breturn\b|\bswitch\b|\bthis\b|\bthrow\b|\btrue\b|\btry\b|\btypeof\b|\bvar\b|\bvoid\b|\bwhile\b|\bwith\b|\babstract\b|\bboolean\b|\bbyte\b|\bchar\b|\bclass\b|\bconst\b|\bdouble\b|\benum\b|\bexport\b|\bextends\b|\bfinal\b|\bfloat\b|\bgoto\b|\bimplements\b|\bimport\b|\bint\b|\binterface\b|\blong\b|\bnative\b|\bpackage\b|\bprivate\b|\bprotected\b|\bpublic\b|\bshort\b|\bstatic\b|\bsuper\b|\bsynchronized\b|\bthrows\b|\btransient\b|\bvolatile\b|\barguments\b|\blet\b|\byield\b|\bundefined\b/g;
  8. // 匹配 JS 关键字
  10. var NUMBER_RE = /^\d[^,]*|,\d[^,]*/g;
  11. // 匹配数字
  13. var BOUNDARY_RE = /^,+|,+$/g;
  14. // 边界匹配
  16. var SPLIT2_RE = /^$|,+/;

以及处理是否编码的问题

  1. var escapeSyntax = escape && !/^=[=#]/.test(code);
  2. code = code.replace(/^=[=#]?|[\s;]*$/g, '');
  4. // 对内容编码
  5. if (escapeSyntax) {
  6.     // 替换     &nbsp;&nbsp;(xxxx)
  7.     var name = code.replace(/\s*\([^\)]+\)/, '');
  9.     // 排除 utils.* | include | print
  10.     if (!utils[name] && !/^(include|print)$/.test(name)) {
  11.         code = "$escape(" + code + ")";
  12.     }
  14. // 不编码
  15. } else {
  16.     code = "$string(" + code + ")";
  17. }

parser

解释器的本质是：将模板里的逻辑型字符串转为正确的 JS 代码字符串。

  1. "if isAdmin"           =>  "if(isAdmin){"
  2. "title"                =>  "$out+=$escape(title);"
  3. "each list as value i" =>  "$each(list,function(value,i){"

artTemplate 里主要两个函数起到了 parser 的作用：

  1. compiler 里的 logic(code) 方法（主要用于预处理）
  2. parser()

helper 机制

artTemplate 支持自定义辅助函数。

IMG_1032.JPG-1564.5kB

定一个一个辅助函数：

  1. template.helper('dateFormat', function (date, format) {
  2.     // ..
  3.     return value;
  4. });

然后我们便能在模板里使用辅助函数了：

  1. {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

artTemplate 是一款十分优秀的 JavaScript 模板引擎，阅读其源代码能让你对模板引擎的理解更进一步！

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注