新手php入门之 Smarty模板简介及使用步骤

道框架（framework）那么必须要提到smarty模板，在面试时你可以不会任何的框架，但是如果不会smarty模板，那么面试官会认为你在说谎，因为几乎所有的框架都是基于或借鉴smarty。

smarty模板介绍

基于面向对象编程思想封装的类，实现前后台代码分离，降低耦合度，并且为后续的分工合作开发做准备。Smarty(轻量，微小)是编译性模板框架，体积小、速度快，支持缓存、全局站点配置等功能，是“旅行居家”开发必备神器！

使用步骤

1、在官网www.smarty.net 下载最新版，解压，复制libs文件夹到项目目录；

2、在对应的项目目录下创建4个文件夹分别为模板文件夹（保存前台页面，必须，一般命名为templates）、编译（自动整理前后台页面，从第二次访问开始不需要重新重新整合，一般命名为templates_c，compile必须）、配置文件夹（应用于整个站点的配置）、缓存文件夹

3、测试

新建一个后台页面index.php

<?php

//引入核心类库文件

include_once('libs/Smarty.class.php');

//实例化类

$smarty=new Smarty();

//定义配置

//用户访问的后台页面所有的路径都是应该以访问后台页面作为参照物!!!

$smarty->setTemplateDir('templates');//定义模板路径

//定义编译路径

$smarty->setCompileDir('templates_c');

//定义配置文件路径

$smarty->setConfigDir('config');

//定义缓存路径

$smarty->setCacheDir('cache');

//修改默认定界符避免和JS冲突！！！

$smarty->left_delimiter='<{';

$smarty->right_delimiter='}>';

$test='我是test变量';

$smarty->assign("test",$test);//建议注册的变量名和键保持一致

//注册一个索引数组

$smarty->assign("arr1",array('a','b','c'));

//注册一个引用数组,section无法用于引用数组

$smarty->assign("arr2",array("a"=>1,"b"=>2,"c"=>3));

//开启调测

//$smarty->debugging=true;

//自动整理前后台页面

$smarty->display('index.tpl');

$smarty->assign('test1','test1');//这个变量无法使用，想一想为什么？

在templates文件加新建index.tpl文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

我是网站根目录下index.php的前台index.tpl页面

输出后台变量test的值：<{$test}>XXXX

该变量无法输出：<{$test1}>

遍历输出索引数组：

<{section name=i loop=$arr1}>

索引：<{$smarty.section.i.index}>值：<{$arr1[i]}>

<{sectionelse}>

没有符合的记录

<{/section}>

遍历引用数组（用foeach，foreach也可以用于索引数组）：

<{foreach from=$arr2 item=v key=k}>

键：<{$k}>值：<{$v}>

<{foreachelse}>

没有符合的记录集

<{/foreach}>

新版本写法：

<{foreach $arr2 as $k=>$v}>

键：<{$k}>值：<{$v}>

<{/foreach}>

</body>

</html>

访问后台页面！！！！！测试结果

变量解析

后台注册，语法 $smarty对象->assign(‘键’,mixed 值);

前台在需要的位置显示，语法 {$键}

开启调测

$smarty->debugging=true;

编译原理

smarty模板调用display函数自动整合前后台页面，是从templates文件夹下查找前台地址自动把访问的后台php页面和该前台页面替换成内嵌PHP代码，生成编译文件，文件名XXX.前台模板名.tpl.php，第二次访问自动把这个页面相应给用户，加快速度，只要PHP后台代码不改变，这个编译页面就不会再次生成。

篇文章主要介绍了JavaScript模板引擎原理与用法,结合实例形式详细分析了javascript模版引擎相关概念、原理、定义及使用方法,写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。

一、前言

什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如：

var tpl='Hei, my name is <%name%>, and I\'m <%age%> years old.';

通过模板引擎函数把数据塞进去，

var data={
 "name": "Barret Lee",
 "age": "20"
};
var result=tplEngine(tpl, data);
//Hei, my name is Barret Lee, and I'm 20 years old.

那这玩意儿有什么作用呢？其实他就是一个预处理器（preprocessor），搞php开发的童鞋对Smarty必然是十分熟悉，Smarty是一个php模板引擎，tpl中待处理的字符通过数据匹配然后输出相应的html代码，加之比较给力的缓存技术，其速度和易用性是非常给力的！JS Template也是一样的，我们的数据库里保存着数以千万计的数据，而每一条数据都是通过同一种方式输入，就拿上面的例子来说，我们不可能在数据库里存几千条"Hei, my name..."，而是只保存对应的name和age，通过模板输出结果。

JS模板引擎应该做哪些事情？看看下面一串代码：

var tpl='<% for(var i=0; i < this.posts.length; i++) {' +　
 'var post=posts[i]; %>' +
 '<% if(!post.expert){ %>' +
 '<span>post is null</span>' +
 '<% } else { %>' +
 '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><% post.expert %> at <% post.time %></a>' +
 '<% } %>' +

一个基本的模板引擎至少可以保证上面的代码可以正常解析。如送入的数据是：

var data={
 "posts": [{
 "expert": "content 1",
 "time": "yesterday"
 },{
 "expert": "content 2",
 "time": "today"
 },{
 "expert": "content 3",
 "time": "tomorrow"
 },{
 "expert": "",
 "time": "eee"
 }]
};

可以输出

<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >content 1 at yesterday</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >content 2 at today</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >content 3 at tomorrow</a>
<span>post is null</span>

下面就具体说说这个模板引擎的原理是啥样的。

二、JS模板引擎的实现原理

1.正则抠出要匹配的内容针对这一串代码，通过正则获取内容

var tpl='Hei, my name is <%name%>, and I\'m <%age%> years old.';
var data={
 "name": "Barret Lee",
 "age": "20"
};

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

var result=tpl.replace(/<%([^%>]+)?%>/g, function(s0, s1){
 return data[s1];
});

通过正则替换，我们很轻松的拿到了result，你可以去试一试，他正是我们想要的结果。但是这里又有了一个问题，改一下data和tpl，

var tpl='Hei, my name is <%name%>, and I\'m <%info.age%> years old.';
var data={
 "name": "Barret Lee",
 "info": { age": "20"}
};

再用上面的方式去获取结果，呵呵，不行了吧~ 这里data["info.age"]本身就是undefined，所以我们需要换一种方式来处理这个问题，那就是将它转换成真正的JS代码。如：

return 'Hei, my name is ' + data.name + ', and I\'m ' + data.info.age' + ' years old.'

但是接着又有一个问题来了，当我们的代码中出现for循环和if的时候，上面的转换明显是不起作用的，如：

var tpl='Posts: ' +
 '<% for(var i=0; i < post.length; i++) {'+
 '<a href="#"

如果继续采用上面的方式，得到的结果便是：

return 'Posts: ' +
 for(var i=0; i < post.length; i++) { +
 '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + post[i].exper + '</a>' +
 }

这显然不是我们愿意看到的，稍微观察一下上面的结构，如果可以返回一个这样的结果也挺不错哦：

'Posts: '
for(var i=0; i < post.length; i++) {
 '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >' + post[i].exper + '</a>'
}

但是我们需要得到的是一个字符串，而不是上面这样零散的片段，因此可以把这些东西装入数组中。

2.装入数组

var r=[];
r.push('Posts: ' );
r.push(for(var i=0; i < post.length; i++) {);
r.push('<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >');
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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >');
 r.push(post[i].exper);
 r.p

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

var r=[];
tpl.replace(/<%([^%>]+)?%>/g, function(s0, s1){
 //完蛋了，这里貌似又要回到上面那可笑的逻辑有错误的一步啦... 该怎么处理比较好？
});

完蛋了，这里貌似又要回到上面那可笑的逻辑有错误的一步啦... 该怎么处理比较好？我们知道，JS给我们提供了构造函数的“类”，

var fn=new Function("data",
 "var r=[]; for(var i in data){ r.push(data[i]); } return r.join(' ')");
fn({"name": "barretlee", "age": "20"}); // barretlee 20

道了这个就好办了，我们可以把逻辑部分和非逻辑部分的代码链接成一个字符串，然后利用类似fn的函数直接编译代码。而/<%([^%>]+)?%>/g，这一个正则只能把逻辑部分匹配出来，要想把所有的代码都组合到一起，必须还得匹配非逻辑部分代码。replace函数虽然很强大，他也可以完成这个任务，但是实现的逻辑比较晦涩，所以我们换另外一种方式

var reg=/<%([^%>]+)?%>/g;
var tpl='Hei, my name is <%name%>, and I\'m <%age%> years old.';
var match=reg.exec(tpl);
console.log(match);

看到的是：

[
 0: "<%name%>",
 1: name,
 index: 16,
 input: "Hei, my name is <%name%>, and I'm <%age%> years old."
 length: 2
]

这。。。我们可是想得到所有的匹配啊，他竟然只获取了name而忽略了后面的age，好吧，对正则稍微熟悉点的童鞋一定会知道应该这样处理：

var reg=/<%([^%>]+)?%>/g;
while(match=reg.exec(tpl)) {
 console.log(match);
}

关于正则表达式的内容就不在这里细说了，有兴趣的同学可以多去了解下match,exec,search等正则的相关函数。这里主要是靠match的index属性来定位遍历位置，然后利用while循环获取所有的内容。

4.引擎函数

所以我们的引擎函数雏形差不多就出来了：

var tplEngine=function(tpl, data){
 var reg=/<%([^%>]+)?%>/g,
 code='var r=[];\n',
 cursor=0; //主要的作用是定位代码最后一截
 var add=function(line) {
 code +='r.push("' + line.replace(/"/g, '\\"') + '");\n';
 };
 while(match=reg.exec(tpl)) {
 add(tpl.slice(cursor, match.index)); //添加非逻辑部分
 add(match[1]); //添加逻辑部分 match[0]="<%" + match[1] + "%>";
 cursor=match.index + match[0].length;
 }
 add(tpl.substr(cursor, tpl.length - cursor)); //代码的最后一截 如:" years old."
 code +='return r.join("");'; // 返回结果，在这里我们就拿到了装入数组后的代码
 console.log(code);
 return tpl;
};

这样一来，测试一个小demo:

var tpl='<% for(var i=0; i < this.posts.length; i++) {' +　
 'var post=posts[i]; %>' +
 '<% if(!post.expert){ %>' +
 '<span>post is null</span>' +
 '<% } else { %>' +
 '<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><% post.expert %> at <% post.time %></a>' +
 '<% } %>' +
 '<% } %>';
tplEngine(tpl, data);

返回的结果让人很满意：

var r=[];
r.push("");
r.push(" for(var i=0; i < this.posts.length; i++) {var post=posts[i]; ");
r.push("");
r.push(" if(!post.expert){ ");
r.push("<span>post is null</span>");
r.push(" } else { ");
r.push("<a href=\"#\">");
r.push(" post.expert ");
r.push(" at ");
r.push(" post.time ");
r.push("</a>");
r.push(" } ");
r.push("");
r.push(" } ");
r.push("");

不过我们并需要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' :
 c

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

5.把data扔进去

没有比完成这东西更简单的事情啦，通过上面对Function这个函数的讲解，大家应该也知道怎么做了。

return new Function(code).apply(data);

使用apply的作用就是让code中的一些变量作用域绑定到data上，不然作用域就会跑到global上，这样得到的数据索引就会出问题啦~ 当然我们可以再优化一下：

return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);

把回车换行以及tab键都给匹配掉，让代码更加干净一点。那么最终的代码就是：

var tplEngine=function(tpl, data) {
 var reg=/<%([^%>]+)?%>/g,
 regOut=/(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
 code='var r=[];\n',
 cursor=0;
 var add=function(line, js) {
 js? (code +=line.match(regOut) ? line + '\n' : 'r.push(' + line + ');\n') :
 (code +=line !='' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
 return add;
 }
 add(tpl.slice(cursor, match.index))(match[1], true);
 cursor=match.index + match[0].length;
 }
 add(tpl.substr(cursor, tpl.length - cursor));
 code +='return r.join("");';
 return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
};

三、应用场景

毕竟是前端代码，所以写出来是要为前端服务的，平时我们处理的一般是一个html的模板，通常的情况下，模板代码是放在script标签或者textarea中，所以首先是要获取到这里头的东西，然后再来做解析。

var barretTpl=function(str, data) {
 //获取元素
 var element=document.getElementById(str);
 if (element) {
 //textarea或input则取value，其它情况取innerHTML
 var html=/^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;
 return tplEngine(html, data);
 } else {
 //是模板字符串，则生成一个函数
 //如果直接传入字符串作为模板，则可能变化过多，因此不考虑缓存
 return tplEngine(str, data);
 }
 var tplEngine=function(tpl, data) {
 // content above
 };
};

这样一来就更加简单了，使用方式就是 barretTpl(str, data)，这里的str可以是模板代码，也可以是一个DOM元素的id~

四、优化以及功能拓展

总共就三四十行代码，完成的东西肯定是一个简洁版的，不过对于一个简单的页面而言，这几行代码已经足够使用了，如果还想对他做优化，可以从这几个方面考虑：

优化获取的模板代码，比如去掉行尾空格等
符号转义，如果我们想输出hehe类似这样的源代码，在push之前必须进行转义代码缓存，如果一个模板会经常使用，可以将它用一个数组缓存在barretTpl闭包内
用户自己设置分隔符

结语

感谢您的观看，如有不足之处，欢迎批评指正。

Smarty的兼容性非常好，多数情况下Smarty高版本都能够兼容低版本。但有一点必须呀注意，Smarty之所以功能强大，是由于支持众多模版插件，这些插件并非都具备良好兼容性，所以在使用前或升级前需要开发人自行测试，以确保适用新的Smarty版本。接下来将以Smarty3.1.12为例，详细介绍Smarty的安装及使用。

在传统的PHP中使用Smarty是主要的开发方式，也是最简单的使用方式。下面示例详细介绍Smarty在PHP中的导入及使用，步骤如下

首先去官方下载Smarty，将下载后的Smarty文件夹复制到网站相应的目录，例如Smarty目录。完成后可以通过Http://localhoso/smarty网址访问到该目录。然后在该目录中分别创建cache、compiles、conf、tpl目录，用于存放缓存、编译文件、配置文件、模版文件等。完成后，创建index.php网站入口文件，在该文件中包含Smarty.class.php入口文件，并初始化相关配置信息，如下代码所示

我们相信对上述代码并不陌生，无论是分配变量还是分配模版，这些操作都与ThinkPHP相类似，事实上这是类Smarty模版引擎所具有的特性。保存上述代码，然后在tpl目录中创建index.html模版文件，代码如下

注：加有｛｝内容即为PHP变量

在线咨询

上一篇：第33届金鸡奖报名标准详细 2020金鸡奖表演类单项
下一篇：一次弄懂JavaScript各种运算符，满满干货，速

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

新手php入门之 Smarty模板简介及使用步骤

您的项目需求