知识 分享 互助 懒人建站

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

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    只有10几行的js模板引擎

    作者:佳明妈 来源:jquery特效 2014-10-10 人气:
    只有10几行的js模板引擎,其实算不上啥js模板引擎,就是一段js模板替换功能的代码而已。 下面我们来实战一下,看看这个js模板替换能干点啥。 说明:如果再项目中使用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.51xuediannao.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模板引擎由懒人建站收集整理,您可以自由传播,请主动带上本文链接

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

    只有10几行的js模板引擎-最新评论