设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 36|回复: 0

[基础教程] 模板引擎的基础工作原理

[复制链接]

9947

主题

9947

帖子

3万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
31498
发表于 2018-2-13 23:20:57 | 显示全部楼层 |阅读模式
模板引擎的基本工作原理,简单来说就是利用正则表达式,替换模板当中预先定义好的标签。
具体是怎么运行的,下面我们举个简单的例子
-----------------------------------------------------------------------------
需求如下:
需要在网页上以表格的形式显示一个班级内各个学生的数据,例如:
姓名学号性别
小张01
小四02 
王五03
假设我们从数据库中拿出来的数据是JSON格式,如下:
user =[{"name":"小张", "num":"01", "sex":"男"},  {"name":"小四", "num":"02", "sex":"女"},  {"name":"小五", "num":"03", "sex":"女"},  ...  ...  {"name":"六", "num":"33", "sex":"女"}];那,怎么将JSON格式的数据方便的放入到HTML结构中呢?
表格中每一行的html结构,只有"姓名","学号"和"性别"三个地方不同。那我们可以将每一行数据中相同的结构提取出来,姓名,学号和性别作为参数。然后使用javascript中的appendChild方法,循环向table标签中追加新的元素,就可以方便的生成这个表格结构。
比如:
  1. functiongetHTMLElement(name, num, sex) {return" <tr > <td >" + name + " </td > <td >" + num + " </td > <td >" + sex + " </td > </tr >";
  2. }
  3. varstr = "";
  4. for(i = 0; i < user.length; i++){ str +=getHTMLELement(user[i][name], user[i][num], user[i][sex])
  5. }
  6. document.getElementById("#table").innerHTML = str;
复制代码
-----------------------------------------------------------------------------
但采用字符串拼接的形式,太过于麻烦,而且也不使用于复杂的场景,比如如果标签上存在属性,就必须考虑单引号双引号问题。所以,模板引擎采用正则匹配代替字符串拼接:代码更改如下
1)采用模板代替字符串拼接
  1. <script type="text/plain" id="template" > // 注意这个地方的type不能设置成text/javascript,要不浏览器就会以js解析标签中的数据,会报错<br><
  2. tr > <
  3. td >{{ name }} </td > <
  4. td >{{ num }} </td > <
  5. td >{{ sex }} </td > </tr ><br></script ><br>
复制代码
采用在script标签中写html结构的方式代替字符串拼接写结构。需要填充数据的地方,使用一种约定好的标记,比如我们这里,约定以
{{ + 0~多个空格  + 代码具体数据的标识符 + 0~多个空格 + }}以 ”{{”开始以"}}”结束是为了将需要填充数据的部分与其他正常的html代码区分开来。
function template(tpl, data) {
var reg = /{{\s+([a-zA-Z]+)\s+}}/; //用来匹配模板中的需填充字段
html = document.getElementById(tpl).innerHTML; //获取模板
var match;while(match = reg.exec(html)) {
//遍历获取模板中所有需填充字段
console(match);
//  打印结果如 = >
["{{ name }}", "name", index: 8, input: " <tr ><td >{{name}} </td ><td >{{num}} </td ><td >{{sex}} </td ></tr >"]
html = html.replace(match[0], data[match[1]]); //实行替换}
return  html;//返回替换好的html代码}最后一步只需要将数据追加到结构中就好
  1. varstr = "";
  2. for(i = 0; i < user.length; i++){ str += template("template", user[i]);
  3. }
  4. document.getElementById("#table").innerHTML = str;
复制代码
----------------------------------------------------------------------------- 最后给出一个完整版的例子
  1. <!DOCTYPE html > <html lang="en" > <head > <meta charset="UTF-8" > <title >Document </title > </head > <body > <h2 >模板引擎原理分析 </h2 > <table id="table" border="1" > <thead > <tr > <th >姓名 </th > <th >学号 </th > <th >性别 </th > </tr > </thead > <tbody id="tBody" > </tbody > </table >
  2. <script type="text/plain" id="template" > <tr > <td >{{ name }} </td > <td >{{ num }} </td > <td >{{ sex }} </td > </tr > </script > <script > //模板数据填充函数 functionexample(tpl, data) {
  3. varreg = /{{\s+([a-zA-Z]+)\s+}}/;
  4. html =document.getElementById(tpl).innerHTML;
  5. varmatch;while(match =reg.exec(html)) { html = html.replace(match[0], data[match[1]]); }
  6. returnhtml; }
  7. //JSON格式数据 user =[{"name":"小张", "num":"01", "sex":"男"}, {"name":"小四", "num":"02", "sex":"女"}, {"name":"小五", "num":"03", "sex":"女"}, {"name":"六", "num":"33", "sex":"女"}];
  8. varstr = "";for(i = 0; i < user.length; i++){ str += example("template", user[i]); } document.getElementById("tBody").innerHTML =str; </script > </body > </html >
复制代码




上一篇:MySQL:讨人喜欢的 MySQL replace into 用法(insert into 的增强版)
下一篇:Attribute 和 Parameter 的区别
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-5-25 20:31

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表