简易模板函数
2010-06-02 22:49 BlueDream 阅读(616) 评论(0) 编辑 收藏 举报在工作中经常会拼接字串然后通过innerHTML注入到容器中. 为了使HTML和JS代码松耦合.实现一个简易的模板函数可以使代码看上去更明朗些.
实例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="content"></div> <input type="button" value="showTemplet" onclick="showTemplet();" /> <script> function templetShow(templet, data) { if (data instanceof Array) { var str_in = ''; for (var i = 0, len = data.length; i < len; i++) { str_in += templetShow(templet, data[i]); } templet = str_in; } else { var value_s = templet.match(/{\$(.*?)}/g); if (data !== undefined && value_s != null) { for (var i = 0, len = value_s.length; i < len; i++) { var par = value_s[i].replace(/({\$)|}/g, ''); value = (data[par] !== undefined) ? data[par] : ''; templet = templet.replace(value_s[i], value); } } } return templet; } function showTemplet() { var html = [ '<ul>', '<li>{$title}</li>', '<li>{$content}</li>', '</ul>' ].join(''), tmp1, tmp2; // 调用方式一 tmp1 = templetShow(html, { 'title': '标题一', 'content': '内容一' }); // 调用方式二 tmp2 = templetShow(html, [{'title': '标题二', 'content': '内容二'}]); document.getElementById('content').innerHTML = tmp1 + tmp2; } </script> </body> </html>