Atitit.模板引擎原理以及常见模板技术

1. Asp Php jsp smarty模板1

1.1. 模板引擎基本原理1

1.2. 调试模式原理2

2. Attilax总结的模板引擎原理2

3. 支持两种类型的错误捕获，一是渲染错误(Render Error)与编译错误(Syntax Error)。2

3.1. 1、渲染错误2

3.2. 2、编译错误3

4. 常见的模板技术 t4   Razor4

1. Asp Php jsp smarty模板

1.1. 模板引擎基本原理

虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。

， Discuz的模板解析是用正则表达式替换一些模板中的规定的语言标记，然后呢，写到forumdata/templates中，再用include引用到index, forumdisplay等等中，和smarty的原理基本上相同

那么，这个联合页面listnews.php的代码就很简单了
<? 
Include(‘getnews.php');//获取数据 
Include(‘shownesw.php');//显示数据 
?> 
作者::  ★(attilax)>>>   绰号:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ） 汉字名：艾龙，  EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

总结
使用PHP标签的模板系统，能够很好的实现美工和程序的分离，同时方便程序员和美工人员的分工合作，比如在上面的例子中shownews.php由美工人员来维护，getnews.php由程序人员来维护。而listnews.php就可以由系统设计人员来维护了。当然这中间需要增加一些约定的文档。

最简单的方式就是通过replace函数了：

1.2. 调试模式原理

前端模板引擎不像后端模板引擎，它是动态解析，所以调试器无法定位到错误行号，而 artTemplate 通过巧妙的方式让模板调试器可以精确定位到引发渲染错误的模板语句，例如：

2. Attilax总结的模板引擎原理

通过splitor  《%%》区分代码和模板，然后把木板str out，在不个代码eval给挂。。

3. 支持两种类型的错误捕获，一是渲染错误(Render Error)与编译错误(Syntax Error)。

3.1. 1、渲染错误

渲染错误一般是因为模板数据错误或者变量错误产生的，渲染的时候只有遇到错误才会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，编译后的函数类似：

当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。

3.2. 2、编译错误

编译错误一般是模板语法错误，如不合格的套嵌、未知语法等。由于 artTemplate 没有进行完整的词法分析，故无法确定错误源所在的位置，只能对错误信息与源码进行原文输出，供开发者判断。

4. 常见的模板技术 t4   Razor

微软已经有一套模板引擎T4，在设计ASP.NET MVC 3时又设计一套模板引擎Razor

2.装入数组

var r = [];

r.push('Posts: ' );

r.push(for(var i = 0; i < post.length; i++) {);

r.push('<a href="#">');

r.push(post[i].exper);

r.push('</a>');

r.push(});

有人看到上面的代码就要笑了，第三行和最后一行代码的逻辑明显是不正确的嘛，那肿么办呢？呵呵，很简单，不放进去就行了呗，

var r = [];

r.push('Posts: ' );

for(var i = 0; i < post.length; i++) {

r.push('<a href="#">');

r.push(post[i].exper);

r.push('</a>');

}

这样的逻辑就十分完善了，不存在太多的漏洞，但是这个转化的过程是如何实现的？我们必须还是要写一个解析的模板函数出来。

不过我们并需要for，if，switch等这些东西也push到r数组中去，所以呢，还得改善下上面的代码，如果在line中发现了包含js逻辑的代码，我们就不应该让他进门：

regOut = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;

var add = function(line, js) {

js? code += line.match(regOut) ? line + '\n' : 'r.push(' + line + ');\n' :

code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';

};

所以我们只剩下最后一步工作了，把data扔进去！

参考

JavaScript模板引擎原理，几行代码的事儿 - Javascript教程_JS教程_技术文章 - 红黑联盟.html