|
|
“模板”每个从事web app开发的人员也许都会用到它，它的主要作用在于，能将界面表现和程序代码分离开来，这样做的目的一是将前端开发和程序员的工作分离开来，提高工作效率，二是方便维护。当然前端开发它本身又可简单划分为结构、表现和行为三块，如图：
我在这只是谈谈前端结构这块和程序代码是如何通过“模板”使它们分离开的。
基于php程序开发我选择学习使用了PHPLIB Template，PHPLIB Template的技术易用性和速度较为理想，当然它本身也非常简单，这也是我第一个介绍它原因所在。
在写PHP页面的时候，我们会发现大多数页面结构其实都是一致的，只是每个页面的内容有所变化，如果每页都写一遍就太麻烦了，这些相同的结构代码（我们称之为公用代码），我们可以把它单独写在一个文件里，如果这个公用代码要有所改动,无需再去改每一个页面，能减少非常多的工作量。用PHPLIB Template模板可以很方便的把一个页面随意插入另一个模板的任意地方。
新建2个文件login.html、index.html，内容分为如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>{title}</title>
<link rel="stylesheet" href="css/inner.css" media="all"/>
</head>
<body>
<div id="wrapper">
<div id="hd">
<div id="logo-zone">
<h1 id="logo"><a href="#" title="PHPLIB">PHPLIB</a></h1>
</div>
</div>
{main}
<div id="ft">
<p>Copyright by PHPLIB Template</p>
</div>
</div>
</body>
</html>
<div id="bd">
<div id="login-zone">
<form method="POST" name="loginform" action="#">
<h3><b>会员登录</b></h3>
<p class="property">
<label for="username">用户名</label>
<input type="text" name="username" />
</p>
<p class="property">
<label for="password">密 码</label>
<input type="password" name="pwd" />
</p>
<p class="btn">
<button type="submit" class="btn-login"><span>会员登录</span></button>
<button type="button" class="btn-member"><span>新会员注册</span></button>
</p>
</form>
</div>
</div>
下面我们开始看我们的login.php程序:
<?php
require './cls/template.class.php';
$objTP =new Template("./tpl");
$objTP->set_file("index","index.html");
$objTP->set_file("main","login.html");
$objTP->parse("mainlist","main");//解析主区域内容
$objTP->set_var("title","登陆");//变量赋值
$objTP->parse("loginPage","index");//解析整个页面内容
$objTP->p("loginPage");
?>
如果是要循环输出的数据，我们使用set_block的方式来实现。
例如：
新建一个 list页面模板，如下：
<div id="bd">
<div id="login-zone">
<ul>
<!– BEGIN list –>
<li>用户名：{name} 年龄：{age}</li>
<!– END list –>
</ul>
</div>
</div>
list.php程序，如下：
<?php
require "./cls/template.class.php";
$objTP =new Template("./tpl");
$objTP->set_file("index","frame.html");
$objTP->set_file("main","list.html");
$objTP->set_block("main", "list", "nlist");
//加载模板main中的块list,并给其一个名字nlist
$link=mysql_connect("localhost","root","");
$result=mysql_db_query("fyt","select name,age from users");
while ( $a = mysql_fetch_array($result))
{
$objTP->set_var("name", $a[name]);
$objTP->set_var("age" , $a[age]);
$objTP->parse("nlist", "list", true);
}
$objTP->parse("mainlist","main");//解析整个页面内容
$objTP->set_var("title","用户列表");//变量赋值
$objTP->parse("listPage","index");//解析整个页面内容
$objTP->p("listPage ");
?>
这样一来简单的页面模板嵌套问题可以解决啦！
其实在web app开发过程当中模板的制作和拆分，需要前端开发者和后台程序员协商来定，前端开发者对页面结构非常熟悉，而程序员对数据结构非常熟悉，双方友好协作，才能实现基于数据的最优模板结构。 |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-3-24 10:07:58
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡