客户端模板的应用（3）
作者：Sheneyan 来源：蓝色经典 时间：2007-05-11 16:50:00
q-zone的客户端模板技术应该是相当成熟的吧，有兴趣的筒子们可以去看看它是如何实现的，而下面我来说一下我的客户端模板。
先声明一点：我使用的是json(在这里就不赘述json了，有兴趣的去看 http://json.org，在实例中我也许会再做进一步的说明)，而不是xml来做数据源。主要原因是json对js来说非常好理解，而且我可以用多种方式来加载，不需要一定要用ajax。
现在让我们开始我们的历程吧
让我们来假想这么一个应用吧，我们现在要来做一个局部刷新的留言板。
既然只是一个demo，我就可以只实现客户端的功能，而不去管服务端是什么了，我唯一的要求就是服务端返回给我的数据是json格式的。
下面这是一条留言板中的数据结构：
id 序列号
name 留言者姓名
mail 信箱
title 标题
content 内容
time 留言时间
而这是对应这个结构的json数据形式：
{
id:1234,
name:'路人甲',
mail:'somebodyA@foo.com',
title:'测试一下这个留言板好用不',
content:'测试就是测试，不要问我为什么测试，也不要问我为了什么测试，反正我就是要测试，你能把我怎么着？',
time:'2007-03-21 12:33:43'
}
我们现在先用普通的方式来实现ajax留言板的数据获取吧：
demo1：
运行代码框
获取一个json或xml字符串，解析它们，将它们的内容塞到一个个html对象的innerHTML里。呵呵，是不是很眼熟？
或许你的写法和我不同，你也许写得比我好看，写得比我健全，你的代码里没硬编码一点html代码（我指的是那段<a href="..."></a>），那又如何？你还是写了一堆innerHTML~
能不能更简单一点呢？我想把页面结构从js中剔除出去，我不需要知道我要填充的是什么样的结构，那个结构由页面设计师帮我设计好了，我只需要把数据传到客户端，然后用某种方式塞到指定的结构里。这样会不会更好？
我试图使用客户端模板来实现这样的效果，下面就是改写后的实例：
demo 2：
运行代码框
看一下前后两个demo的区别：
demo1中的：
...
...
function getData(){
/*假设data就是用xmlhttp获取到的数据*/
var ph = document.getElementById('post_header');
var pt = document.getElementById('post_title');
var pc = document.getElementById('post_content');
ph.innerHTML = "("+data.id+")<a href='mailto:"+data.mail+"'>"+data.name+"</a>于"+data.time+"发表：";
pt.innerHTML = data.title;
pc.innerHTML = data.content;
}
...
...
<div id="post">
<fieldset>
<legend id="post_header">标题</legend>
<h4 id="post_title"></h4>
<p id="post_content"></p>
</fieldset>
</div>
...
...
demo2中的：
...
...
function getData(){
var p = document.getElementById('post');
var t = p.innerHTML;
t = t.replace(/<!--{(.*?)}-->/g,function(a,b){
var v = "";
try{
v = eval("data."+b);
}
catch(e){}
return v;
});
p.innerHTML = t;
}
...
...
<div id="post">
<fieldset>
<legend id="post_header">(<!--{id}-->)<a href='mailto:<!--{mail}-->'><!--{name}--></a>于<!--{time}-->发表：</legend>
<h4 id="post_title"><!--{title}--></h4>
<p id="post_content"><!--{content}--></p>
</fieldset>
...
...
看到区别了吗？我的模板实现和传统的ajax实现不同，我是将数据的结构从js中抽取出来，提前嵌入到html代码中（我用<!--{...}-->来代表模板信息），从而做到降低js代码中代码与页面结构的耦合。
看过这个demo，我们来具体说说客户端模板的实现原理吧：
分析数据结构，事先组织好模板，将需要的数据源（指字段或属性）以模板的形式插入到正常的html中，我为了避免出现不必要的内容，使用注释和自定义标记来表示模板；
在需要的时候，将数据与模板进行整合，将html中的模板用真实数据替换掉。
是不是很简单呢？接下来，我们要说一些更复杂的应用。
0
投稿猜你喜欢
ASP六大对象介绍
减少用户的思考
语言化H1标签
百度“有啊”首页首次曝光 以绿色调为主
onerror图片失效时显示其他图片
[精品]ASP中常用的22个FSO文件操作函数
asp如何用组件实现自动发送电子邮件？
如何从MySQL数据库表中检索数据
卸载VS2011 Developer Preview后Sql Server2008 R2建立数据库关系图报“找不到指定的模块”错误的解决方法
慢慢的网页
用ASP设计购物车
在ASP中使用SQL语句之1:SELECT 语句
asp 使用正则表达式替换word中的标签，转为纯文本
避免使用滤镜
WEB手绘稿常用元素 之 箭头
SQL参数化查询的另一个理由 命中执行计划
Oracle教程 误添加数据文件删除方法
MySQL中两种快速创建空表的方式的区别
“生活”设计
14个出色的jQuery导航菜单实例教程
