文档章节

模板引擎

L
 LorinLuo
发布于 2017/11/02 09:44
字数 309
阅读 3
收藏 0

思路

一、用正则匹配模板中需要替换的变量并拼接成可执行的javascript语句

二、利用new Function返回render函数

三、将render函数与数据结合形成我们需要的html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/template" id="tpl">
    <% for(var i = 0; i < data.length; i++) {%>
      <% if(data[i].display){ %>
        <h4>
          Name: <%-data[i].username%> <br> Age: <%=data[i].age%> <br> <%="tpl"%>
        </h4>
      <% }%>
    <% }%>
  </script>
  <script type="text/javascript">
    var tpl = document.querySelector("#tpl").innerHTML;

    var templateEngine = {
      //编译函数,将模板字符串编译成可执行的语句
      //<%=%>需要转义,<%-%>不需要转义,<%%>为逻辑控制语句
      compile: function(str) {
        var tpl = str.replace(/\n/g, "\\n").replace(/<%=(.+?)%>/g, function(match, code) {
          //转义输出
          return "' + templateEngine.escape(" + code + ")+'";
        }).replace(/<%-(.+?)%>/g, function(match, code) {
          //正常输出
          return "' + " + code + "+ '";
        }).replace(/<%(.+?)%>/g, function(match, code) {
          //逻辑控制语句
          return "';\n" + code + "\ntpl += '";
        });

        tpl = "tpl = '" + tpl + "';";
        tpl = "var tpl = '';\nwith(obj){\n" + tpl + "\n};\nreturn tpl;"
        
        return new Function("obj", tpl);
      }, 
      //渲染函数,模板与数据相结合
      render: function(compiled, data) {
        return compiled(data);
      },
      //转义函数,将能形成html标签的字符串转换成安全字符串
      escape: function(html) {
        return String(html)
          .replace(/&(?!\w+;)/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#093;")
      }
    };

    var compiled = templateEngine.compile(tpl);
    var template = compiled({
      data: [
        {
          username: "<h4>KAKA</h4>",
          age: 33,
          display: true
        },
        {
          username: "<h4>Wade</h4>",
          age: 36,
          display: true
        }
      ]
    });

    document.body.innerHTML = template;
  </script>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: es6摘要
下一篇: instanceof
L
粉丝 18
博文 166
码字总数 116776
作品 0
成都
程序员
私信 提问
模板引擎的作用

模板引擎有什么用呢?我们先来看看目前的模板引擎都是用在了什么地方。最常见的就是用在WEB系统中,可以让程序开发人员及美工设计人员分工明确,这也是MVC开发模式不可少的。再就是用在代码生...

kevin728971010
2016/11/07
15
0
13 款 JavaScript 模板引擎

JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎。(排名不分先后顺序) 1. Mustache 基于javascript 实现的模...

红薯
2012/04/15
16.2K
5
一个精巧的Javascript Template引擎

基于MVC模式的web框架在渲染页面时,都会提供可以内嵌后端语言的模板引擎,用于使用动态数据生成页面。在某些场景下,无法使用后端的模板引擎,但又需要使用动态数据渲染页面内容,这时便可选...

con
2014/03/29
0
4
(PHP学习笔记)工厂类在MVC框架中的运用

在基本的MVC框架模型中,会引用到数据库和模板文件。但是不同的开发者会选择不同的数据库以及模板引擎。因为在实际开发的过程中,有可能会更换数据库或者是模板引擎,如果针对每个数据库以及...

w1sw
2016/08/29
0
0
推荐13款javascript模板引擎

javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎。(排名不分先后顺序) 1. Mustache 基于javascript 实现的模...

李朝强
2013/07/29
0
1

没有更多内容

加载失败,请刷新页面

加载更多

python中类方法和静态方法区别

面相对象程序设计中,类方法和静态方法是经常用到的两个术语。 逻辑上讲:类方法是只能由类名调用;静态方法可以由类名或对象名进行调用。 在C++中,静态方法与类方法逻辑上是等价的,只有一...

xiangyunyan
今天
9
0
Hibernate SQLite方言

以下代码有参考过github上国外某位大佬的,在发文的最新稳定版Hibernate上是可用的,有时间再仔细分析一下 import org.hibernate.dialect.Dialect;import org.hibernate.dialect.function.S...

CHONGCHEN
今天
4
0
CentOS 7 MariaDB搭建主从服务器

本文编写环境为CentOS7。确保关闭SELinux,关闭防火墙或者防打开指定端口。具体信息如下 #master[root@promote ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [r...

白豆腐徐长卿
今天
11
0
介绍python中运算符优先级

下面这个表给出Python的运算符优先级,从最低的优先级(最松散地结合)到最高的优先级(最紧密地结合)。这意味着在一个表达式中,Python会首先计算表中较下面的运算符,然后在计算列在表上部...

问题终结者
今天
4
0
Spring Boot 2.x基础教程:快速入门

简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot来让...

程序猿DD
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部