编写javascript模板引擎的几个步骤

xiaoxiaozi 发布于2019-08-20 12:20 / 1961人阅读

摘要：先推荐一个我自己写的模板引擎，项目地址。下面就是总结的编写模板引擎的几个步骤例如一个模板为最终会编译成为一个函数可以观察到模板中的所有的变量名都被指定成了参数对象的属性，并且该函数自始至终只做了一件事，就是构建字符串，并将其返回。

先推荐一个我自己写的模板引擎catpl，项目地址：https://github.com/liyu365/catpl。
项目中有详细的注释，代码易读，本项目借鉴自artTemplate、juicer、laytpl等诸多项目，在学习这些项目的过程中编写而成，并遵守以下几个步骤，可以对照此项目代码进行了解。

下面就是总结的编写javascript模板引擎的几个步骤

例如一个模板为：

<%= title %>

<% for(var i = 0 ; i < sports.length ; i++ ) { %>
    <% i + 1 %> - <% sports[i].name %>
<% } %>

最终会编译成为一个函数：

function anonymous($data, $methods) {
    var title = $data.title, sports = $data.sports, $escape = $methods.$escape;
    var $out = "";
    $out += "";
    $out += $escape(title);
    $out += "
";
    for(var i = 0 ; i < sports.length ; i++ ) {
        $out += "";
        $out += $escape(i + 1);
        $out += " - ";
        $out += $escape(sports[i].name);
        $out += "";
    }
    $out += "";
    return $out;
}

可以观察到模板中的所有的变量名都被指定成了参数$data对象的属性，并且该函数自始至终只做了一件事，就是构建$out字符串，并将其返回。下面来梳理一下将模板编译为函数的过程：

步骤1. 确立模板中逻辑表达式的openTag和closeTag

在上面的例子中<%和%>就是openTag和closeTag。

任何的HTML模板都包括两个部分：

HTML语句

逻辑表达式语句

openTag和closeTag的作用就是划分出这两个部分区别对待。<%和%>包裹着的为逻辑表达式语句，在其之外的是普通的HTML语句。

步骤2. 拆分"HTML语句"和"逻辑表达式语句"

methods.$foreach(source.split(options.openTag), function (code) {
    var arr = code.split(options.closeTag);
    if (arr.length === 1) {
        code_body += handle_html(arr[0]);
    } else {
        code_body += handle_logic(arr[0]);
        if (arr[1]) {
            code_body += handle_html(arr[1]);
        }
    }
});

可以看到这一步利用openTag和closeTag把模板源码中的HTML语句传给了handle_html()函数，把逻辑表达式语句传给了handle_logic()函数。这两个函数会把返回的代码拼接给一个统一的变量。

步骤3. 处理模板中的"HTML语句"

对应上面提到的handle_html()函数。

这一步很好理解，只要原样输出就好。

步骤4. 处理模板中的"逻辑表达式语句"

对应上面提到的handle_logic()函数，这一步的核心就是分析逻辑表达式语句中的变量名，函数名，识别的方式很简单，只要不是js中的关键字、保留字都视为是一个变量名。

逻辑表达式语句又分为两种：

1）赋值语句，形如<%= title %>。

直接把title视为是一个变量名，在函数的开始处声明title为$data.title的引用。然后对title这个字符串原样输出。因为$data.title对应的值可能带有html中的特殊字符，所以在title外面包裹了$escape函数的调用。$escape函数是一个我们预先编写好的函数，存放在methods对象中，然后传和data一样传入到编译函数中。

2) 逻辑控制语句，形如for(var i = 0 ; i < sports.length ; i++ ) {

依然要分析变量名，例如这里的sports，注意分析变量名时一定要忽略.length这样的对象属性。

步骤5.生成编译函数

利用Function构造函数生成一个函数：

var fun = new Function("$data", "$method", code);

这里的code当然就是handle_html()和handle_logic()两个方法翻译后的标准js代码拼接而成的。
fun函数还需要进一步封装，毕竟$method还没有值。第四部已经提到，methods其实是我们模板引擎内部的对象，存放一些模板引擎的工具方法，我们应该自己把它传给编译好的函数。其实给模板引擎注册helper方法也是一样的，需要我们自己把helper对象传进编译函数。包装代码如下：

return function (data) {
    return fun(data, methods, helpers);
};

此时返回的函数就是用户实际拿到的函数。

步骤6.进一步优化"逻辑表达式语句"的语法

其实做到第五步已经是一个具备基本功能的模板引擎了，但是模板中逻辑表达式不够简洁，例如：

<% for(var i = 0 ; i < sports.length ; i++ ) { %>

这种表达式其实还是原生的js语法，我们可以自己定义模板引擎的语法，例如：

<% foreach sports %>

这其实不难做到，只是在第四部开始之前利用正则把foreach sports再变为for(var i = 0 ; i < sports.length ; i++ ) {，之后还是一样的流程。

catpl项目中有一个options.syntax_hook方法就是用来定义自己的模板语法的，可以将options.syntax_hook的值设为null来在自定义语法和原生js语法之间切换。

云服务器 GPU云服务器用到的几个函数云主机的几个品牌选云服务器的几个注意和需求几个步骤

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

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

JavaScript、Node.js与V8的关系

对于了解Node的开发人员，我们都知道Node是基于Chrome V8引擎开发的能使JavaScript在服务器端运行的运行时环境（runtime environment）。一方面，它提供了多种可调用的API，如读写文件、网络请求、系统信息等。另一方面，因为CPU执行的是机器码，它还负责将JavaScript代码解释成机器指令序列执行，这部分工作是由V8引擎完成。 Motivation JavaS...

Cciradih 2019-08-26 11:53 评论0 收藏0
PHP小知识点

摘要：那些琐碎的知识点作者记录的的很奇特很难记的知识点。易错知识点整理注意和的区别中和都是输出的作用，但是两者之间还是有细微的差别。今天手头不忙，总结一下，分享过程中掌握的知识点。深入理解 PHP 之：Nginx 与 FPM 的工作机制这篇文章从 Nginx 与 FPM 的工作机制出发，探讨配置背后的原理，让我们真正理解 Nginx 与 PHP 是如何协同工作的。 PHP 那些琐碎的知识...

hover_lew 2019-06-28 14:35 评论0 收藏0
JavaScript引擎

摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。渲染引擎和JavaScript引擎先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...

马龙驹 2019-08-30 15:55 评论0 收藏0
JavaScript引擎

摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。渲染引擎和JavaScript引擎先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...

garfileo 2019-08-02 13:57 评论0 收藏0
JavaScript引擎

摘要：由于这些是驱动的工具，因此它们由引擎提供支持。两个主要引擎是的和的引擎。然后，四个即时进程启动，分析并执行解析器生成的字节码。简单来说，这个引擎获取源代码，将其分解为字符串，获取这些字符串并将它们转换为编译器可以理解的字节码，然后执行它。渲染引擎和JavaScript引擎先从一张图片来理解下这两个引擎 showImg(https://segmentfault.com/img/bVb...

Tychio 2019-08-23 14:18 评论0 收藏0