html和css的大概原理,HTML+CSS入门 模板引擎的基础工作原理详解

本篇教程介绍了HTML+CSS入门 模板引擎的基础工作原理详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

模板引擎的基本工作原理，简单来说就是利用正则表达式，替换模板当中预先定义好的标签。

具体是怎么运行的，下面我们举个简单的例子

-----------------------------------------------------------------------------

需求如下：

需要在网页上以表格的形式显示一个班级内各个学生的数据，例如：

姓名

学号

性别

小张

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的方法，循环向table标签中追加新的标签，就可以方便的生成这个表格结构。

比如：

function getHTMLElement(name, num, sex) {

return  "

" + name + "" + num + "" + sex + "";

}

var str = "";

for(i = 0; i 

str += getHTMLELement(user[i][name], user[i][num], user[i][sex])

}

document.getElementById("#table").innerHTML = str;

-----------------------------------------------------------------------------

但采用字符串拼接的形式，太过于麻烦，而且也不使用于复杂的场景，比如如果标签上存在属性，就必须考虑单引号双引号问题。所以，模板引擎采用正则匹配代替字符串拼接：代码更改如下

1)采用模板代替字符串拼接

{{ name }}

{{ num }}

{{ sex }}

采用在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: "

{{name}}{{num}}{{sex}}"]

html = html.replace(match[0], data[match[1]]);  //实行替换}

return  html;//返回替换好的html代码}

最后一步只需要将数据追加到结构中就好

var str = "";

for(i = 0; i 

str += template("template", user[i]);

}

document.getElementById("#table").innerHTML = str;

-----------------------------------------------------------------------------

最后给出一个完整版的例子

html>

Document

模板引擎原理分析

姓名学号性别

{{ name }}{{ num }}{{ sex }}

//模板数据填充函数

function example(tpl, data) {

var reg = /{{\s+([a-zA-Z]+)\s+}}/;

html = document.getElementById(tpl).innerHTML;

var match;

while(match = reg.exec(html)) {

html = html.replace(match[0], data[match[1]]);

}

return html;

}

//JSON格式数据

user =[{"name":"小张", "num":"01", "sex":"男"},

{"name":"小四", "num":"02", "sex":"女"},

{"name":"小五", "num":"03", "sex":"女"},

{"name":"六", "num":"33", "sex":"女"}];

var str = "";

for(i = 0; i 

str += example("template", user[i]);

}

document.getElementById("tBody").innerHTML = str;

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！