模板引擎的原理

1、什么是模板引擎

概念：模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的文档。

原理：就我个人的理解模板的诞生是为了将显示与数据分离，其本质是将模板文件和数据通过模板引擎生成最终的HTML代码（如图）

模板引擎的基本机理就是替换（转换），将指定的标签转换为需要的业务数据；将指定的伪语句按照某种流程来变换输出

我们来一行一行的解释下代码：

写一个P标签包裹的字符串，我想展示的是把data里的name,age 里的值替换到字符串里；

全局匹配以<%开头，中间不是%或>并以%>结尾的配配项，(如图 )

如图所示：如果我们选中了匹配后的数组的第2项即下标为1的 name 和age 并利用data把值传进去就可以达成我们的目标了

小结：

2、复杂逻辑模板引擎

问题：

(1)上面以data[“property”]的方式使用了一个简单对象来传递数据，但是实际情况下我们很可能需要更复杂的嵌套对象。所以我们稍微修改了一下data对象：

(2)这样子写的话就实现不了我们想要的替换了，因为在模板中使用<%profile.age%>的话，代码会被替换成data[‘profile.age’]，结果是undefined。

这样我们就不能简单地用replace函数，而是要用别的方法。如果能够在<%和%>之间直接使用Javascript代码就最好了，这样就能对传入的数据直接求值，像下面这样：

预备知识：

你可能会好奇，这是怎么实现的？这里使用了new Function的语法，根据字符串创建一个函数。我们不妨来看个例子：

fn可是一个货真价实的函数。它接受一个参数，函数体是console.log(arg + 1);上述代码等价于下面的代码：

(3)通过这种方法，我们可以根据字符串构造函数，包括它的参数和函数体。在构造函数之前，我们先来看看函数体是什么样子的。

按照之前的想法，这个模板引擎最终返回的应该是一个编译好的模板。还是用之前的模板字符串作为例子，那么返回的内容应该类似于：

(4)当然，这个代码不能直接跑，跑了会出错。所以把所有的字符串放在一个数组里，在程序的最后把它们拼接起来。

下一步就是收集模板里面不同的代码行，用于生成函数。通过前面介绍的方法，我们可以知道模板中有哪些占位符或者说正则表达式的匹配项,以及它们的位置。

所以，依靠一个辅助变量（cursor，游标），我们就能得到想要的结果。来看下代码

我们来一行行的解释下代码：

生成模板文件跟数据；

正则全局匹配以<%开头，中间不是%或>并以%>结尾的配配项

code保存函数体

游标cursor告诉我们当前解析到了模板中的哪个位置。我们需要依靠它来遍历整个模板字符串

函数add，它负责把解析出来的代码行添加到变量code中去。有一个地方需要特别注意，那就是需要把code包含的双引号字符进行转义（escape）。否则生成的函数代码会出错。

HTML web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。