郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > javascript > 网页特效 >

只有10几行的js模板引擎

来源:jquery特效 作者: kule 日期:2014-10-10 人气:
只有10几行的js模板引擎,其实算不上啥js模板引擎,就是一段js模板替换功能的代码而已。 下面我们来实战一下,看看这个js模板替换能干点啥。 说明:如果再项目中使用js模板替换

本文地址:http://www.qqydc.com/js/texiao/templateReplace.html
文章摘要:只有10几行的js模板引擎,悱恻缠绵香花供养军功,揭箧担囊王洪亮性冲动。

只有10几行的js模板引擎,其实算不上啥js模板引擎,就是一段js模板替换功能的代码而已。

下面我们来实战一下,看看这个js模板替换能干点啥。

说明:如果再项目中使用js模板替换的地方不是非常多,这段代码完全可以应付了。如果是超大规模的模板替换,建议使用dot.js等NB的模板引擎, dot.js教程文档api

下面是一个实例实战代码,只有10几行的js模板引擎具体详情请查看演示,或者下载查看。
<ul id="test"></ul>
<script>

    //实战应用如下:
    var tpl = '<li><a>${title}</a>/<a>${sex}</a>/<a>${age}</a></li>',
        data = [{"title":"林志玲","sex":"女","age":"26"},{"title":"高圆圆","sex":"女","age":"24"},{"title":"柳岩","sex":"女","age":"26"}];
    var temp=[];
    for(var i=0;i<data.length;i++){
        temp.push( htmlTemplate(tpl,data[i]) );
    }
    document.getElementById("test").innerHTML = temp.join("");

    /*
    * template中的占位符使用如:${title} data是一个js对象如:{"title":"张三","sex":"男","age":"26"}  博彩评级http://www.qqydc.com/
    */
    function htmlTemplate(template, data, allowEmpty, chats) {
        var regExp;
        chats = chats || ['\\$\\{', '\\}'];
        regExp = [chats[0], '([_\\w]+[\\w\\d_]?)', chats[1]].join('');
        regExp = new RegExp(regExp, 'g');
        return template.replace(regExp,
            function (s, s1) {
                if (data[s1] != null && data[s1] != undefined) {
                    return data[s1];
                } else {
                    return allowEmpty ? '' : s;
                }
            });
    }
</script>

本文链接:只有10几行的js模板引擎http://www.qqydc.com/js/texiao/templateReplace.html

(责任编辑:博彩评级)

只有10几行的js模板引擎由博彩评级收集整理,您可以自由传播,请主动带上本文链接

web前端开发就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。