客户端模板的应用（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
投稿猜你喜欢
- 在oracle中有很多关于日期的函数，如：1、add_months()用于从一个日期值增加或减少一些月份 date_value:=add_m
以前的Sony Ericsson牌DVD影碟机坏掉了，上周到沃尔玛买了个philips的回来，于是又淘了一些DVD回来看。在使用遥控的时候忽- 当where子句对某一列使用函数时，除非利用这个简单的技术强制索引，否则Oracle优化器不能在查询中使用索引。通常情况下，如果在WHERE
- 用ASP编写网站应用程序时间长了，难免会遇到各式各样的问题，其中关于如何上传文件到服务器恐怕是遇见最多的问题了，尤其是上传图片，比如你想要在
- 这个是捕获键盘事件输入状态的js代码，它可以判断你敲打了键盘的那个键，ctrl、shift，26个字母等等，返回具体键盘值。Javascri
- 一、避免Firefox 背景图不显示的兼容问题，定义background 属性，先后顺序不能随意变动。background : backgr
- 有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看
- 下面是代码，如果看不懂，建议先把表格的一些<tr><td>的表格原理弄清楚了，就可以了代码如下:<table&
- asp创建pdf文件代码，详见以下代码：<％Option ExplicitSub CheckXlDriver()&
- 本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式，详细介绍了word-wrap同word-break的区别。兼容 IE 和 FF 的
- 看着这个题目可能大家会有点陌生，不知道是什么，说的直白一点，RDFa就是让你的页面更好的被机器所理解，而不简简单单是展示你的页面，下面就关于
- 今天我们来写一个有管理功能的留言板程序。所谓的管理功能，其实就是每条留言前有一个选择框，点中要删除的留言，或者点“删除所有留言”，就完成了批
- 在一般的情况下，使用批量fetch的几率并不是很多，但是Oracle提供了这个功能我们最好能熟悉一下，说不定什么时候会用上它。declare
- 在封装自己的FileSystemObject库的时候，测试的时候发现在文件夹或文件很多的时候，效率很低，显示一个文件夹需要2秒甚至更多，这让
- 在多数情况下，以增加文件大小代价来换连接数是有价值。而MHTML+dataURI = 省连接数，如果你不知道这是什么东东，可以看秦歌写的Da
- flash param参数和属性下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的用于显示 Flash 内容的 HT
- class和id的命名,如果合理,可以使得文档具有清晰的结构我们现在解决办法就是使用现有的元素，通过给他们id或class而得到额外的信息。
- 细线边框是网页中定位区分内容常用的一种方法，配合特定图片的使用，往往能够达到不错的效果，那么如何制作细线边框呢？asp之家注：现在要实现这个
- 本文探讨了提高MySQL 数据库性能的思路，并从8个方面给出了具体的解决方法。1、选取最适用的字段属性MySQL可以很好的支持大数据量的存取
- 方法一：（by yangedie ）这几天刚刚做了这个东西，有网友问到，所以分享一下。ie6、firefox2 通过，麻烦有ie7的网友测试
