位置：首页>> 网络编程>> JavaScript>> 客户端模板的应用（4）

客户端模板的应用（4）

作者：Sheneyan　来源：蓝色经典　发布时间：2007-05-11 16:50:00　

标签：模板,ajax

在看到第一个实例时，有些人可能就会说了，留言板的数据每页显示都不止一条吧？你的代码一次只能执行一条，那太不实用了吧。

呵呵，对于多条数据的我们可以采用for循环来实现，这是一个例子：

demo3：

运行代码框
<!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><title>guestbook demo</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Author" content="Sheneyan" /><script type="text/javascript">var data = [{ id:11, name:'路人甲', mail:'somebodyA@foo.com', title:'测试一下这个留言板好用不', content:'测试就是测试，不要问我为什么测试，也不要问我为了什么测试，反正我就是要测试，你能把我怎么着？', time:'2007-03-21 12:33:43'},{ id:12, name:'路人乙', mail:'somebodyB@foo.com', title:'你好，麻烦你一件事', content:'你好，你能告诉我你的QQ吗？我有事麻烦你', time:'2007-03-22 22:33:43'},{ id:13, name:'路人丙', mail:'somebodyC@foo.com', title:'啊啊啊', content:'世界如此美好，我脾气如此暴躁，这样不好~不好~~', time:'2007-03-23 12:03:41'},{ id:14, name:'路人丁', mail:'somebodyD@foo.com', title:'...', content:'其实。。。我是一个演员', time:'2007-03-23 22:04:08'},{ id:15, name:'xxx', mail:'armyA@foo.com', title:'xxx', content:'长夜漫漫无新睡眠，咦，怎么先生你也没睡？', time:'2007-03-24 11:12:55'}];function getMutliData(){ var x = p = document.getElementById('post'); for (var i = 0 ; i < data.length ; i ++){ var o = p.cloneNode(true); if (x.nextSibling) x.parentNode.insertBefore(o,x.nextSibling); else x.parentNode.appendChild(o); var t = o.innerHTML; t = t.replace(//g,function(a,b){ var v = ""; try{ v = eval("data["+i+"]."+b); } catch(e){} return v; }); o.innerHTML = t; x = o; } p.style.display='none';}</script></head><body><div id="post"><fieldset><legend id="post_header">()<a href='mailto:'></a>于发表：</legend><h4 id="post_title"></h4><p id="post_content"></p></fieldset></div><button onclick="getMutliData()">获取多条数据(模拟ajax获取数据)</button></body></html>

问题是解决了……不过……如果我的数据是多层数组呢？再次修改代码？也许，我们该考虑把原来看起来只有简单替换的模板进行一些扩展了。

如何做呢？考虑到以后的扩展性，我决定采用松耦合的方式，写一个模板的主程序，然后在里面调用一堆堆的小函数……算了，作为程序员，还是用程序说话吧……

这是个和模板无关的demo，只是用来说明我的上面这句话：

demo4：

运行代码框
<script>var myList = [function(p){alert('这是第一个方法:'+p);},function(p){alert('这是第二个方法:"'+p+'"');},function(p){alert('这是第三个方法:\n'+p);},function(p){alert('这是第4个方法:\n\n'+p);},function(p){alert('这是第5个方法:'+p.toUpperCase());}]function run(){ var p = '测试一把~~test again'; for (var i = 0 ; i < myList.length;i++){ myList[i](p); }}run();</script>

大致明白我说的意思了吧？

第一页上一页 1 2 3

投稿

客户端模板的应用（4）

猜你喜欢