Actually,simplicity is not simple
2010-04-15DevelopProgram
JavaScripttemplate
1 条评论

轻量的JS模板

这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。

昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。

刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。

var Obj = {
    yyTemp: function(id, data, def){
        var dom = document.getElementById(id);
        var parseObj = dom[id] || (dom[id] = (function(html){
            html = html.replace(/([\'|\\])/gm,"\\$1")   //转义掉 \ 和 '
                        .replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'")  //转化为包括变量的字符串
                        .replace(/[\n\r]/gm,'');    //去除回车换行
            html = ["return '", html ,"';"].join('');
            console.log( html );
            return new Function('data',html);
        })(dom.innerHTML));
        if(data.length){
            for(var i=0,ar; ar=data[i]; i++){
                data[i] = parseObj(ar);
            }
        }else data[0] = def || '';
        dom.innerHTML = data.join('');
    }
};

使用方法更简单，模板这样写就可以了：

<ul id="asins">
    <li class="{class}">{title}</li>
</ul>

简单的使用：

var arr = [
    {title:'再简单不过的JS模板系统','class':'c'},
    {title:'也就一点点功能','class':'cl'},     
    {title:'够用就好，呵呵','class':'cls'},
];
Obj.setTemp('asins', arr, '<li>Null</li>');

我这里加了个默认值，虽然以这种方式写默认值不太喜欢，但也没想到更简单合理的方式。

更重要的一点改进是HTML中不用另外写个模板标签，要生成的代码就是模板所在的位置，更不用另外每次指定了。

如果不希望在HTML加载时看到模板代码，可以进行些改进：

模板改成这样：

<ul id="asins">
    <li style="display:none;" class="{class}">{title}</li>
</ul>

JS代码也改一点点就可以了，注意粗体部分：

这JS模板实在是太轻量了，只是个简单替换，只因为我太不喜欢不同语言的东东相互拼接。

昨天偶然看一"blog"上个有轻量的JS模板，作者的目的也是为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。有兴趣的可去看看 《Tempo.js : 轻量的JS模板工具类》。

刚好我现做的项目有大量的HTML与JS的拼接，但作者的实现有对不适合我的代码风格，我做了些修改就运用到我的项目里，也把我修改后的代码放出来吧！写成这种形式是为了更方便的嵌入到我的项目中来，而且我也没用到更复杂的功能，最最简单的替换就够了，就像Tempo.js的作者想法：为了实现HTML代码与JS代码的分离,使得在用JS输出HTML时更方便,代码更清晰。

var Obj = {
    yyTemp: function(id, data, def){
        var dom = document.getElementById(id);
        var parseObj = dom[id] || (dom[id] = (function(html){
            html = html.replace(/([\'|\\])/gm,"\\$1")   //转义掉 \ 和 '
                        .replace(/ style="display: ?none;?"/i,'')    //去除隐藏
                        .replace(new RegExp('{([^{}]*)}','gim'), "'+(typeof data[\"$1\"] != 'undefined'?data[\"$1\"]:'')+'")  //转化为包括变量的字符串
                        .replace(/[\n\r]/gm,'');    //去除回车换行
            html = ["return '", html ,"';"].join('');
            console.log( html );
            return new Function('data',html);
        })(dom.innerHTML));
        if(data.length){
            for(var i=0,ar; ar=data[i]; i++){
                data[i] = parseObj(ar);
            }
        }else data[0] = def || '';
        dom.innerHTML = data.join('');
    }
};

之所以写成这样是因为各浏览器对HTML代码渲染后的结果不一样！FF chrome Opera IE8 IE6下都没有问题。

在性能上比你的这种方式平均慢上10ms左右吧！还能接受，这种方式最主要是不用写多条语句实现目的，另外我对给出的数据加了个简单的判断，如果没有给出会留空而不像你的这种会在HTML中出现undefined字符。猛点这里查看Demo

  1. 页码:
    1. 1