代码改变世界

简易模板函数

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>