Javascript最简单的模板引擎

àì夳堔傛蜴生んèń 2023-06-01 12:44 23阅读 0赞

非常简单，性能估计一般，方法最原始。

//第一代模板引擎
    //只支持{
         {key}}的替换，不支持语句
    //支持Object和Array对象
    function template_setdata(template, data) {                
        try {
            if (!!data && '[object Array]' == Object.prototype.toString.call(data)) {
        //数组    
                var out = '';
                for (var obj in data) {    
                    var tempout = template;
                    for (var key in data[obj]) {
                        tempout = tempout.replace(/\{\{(\S+)\}\}/g,
                            function (m, i, j) {
                                return (data[obj])[i];
                            });
                    }
                    out += tempout;
                }
                return out;
            }
            else if(!!data && '[object Object]' == Object.prototype.toString.call(data)){
        //对象        
                for (var key in data) {
                    template = template.replace(/\{\{(\S+)\}\}/g,
                        function (m, i, j) {
                            return data[i];
                        });
                }                        
                return template;
            }
            else{
        //不做处理
                return template;                        
            }
        } catch (e) {
            console.log(e);
            return template;
        } 
    }
    //使用方法：
    /*
    html页面的模板：
    <script type="text/template" id="template_info_content">
        <section class="m_article m_list_item m_list_article clearfix">
            <a href="{
         {url}}">
                <div class="m_article_img">
                    <img src="{
         {img}}" οnerrοr="$(this).attr('src',$ViewBag.ThemeContent+'img/article/article_img1.jpg');">
                </div>
                <div class="m_article_info">
                    <div class="m_article_title">
                        <span>{
         {title}}</span>
                    </div>
                    <div class="m_article_desc clearfix">
                        <div class="m_article_desc_l">
                            <span class="m_article_channel">{
         {classname}}</span>
                            <span class="m_article_time">{
         {time}}</span>
                        </div>
                        <div class="m_article_desc_r">
                            <div class="left_hands_desc">
                                <span class="read_icon"></span>{
         {pv}}
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </section>
    </script>
    替换语句：
    var setdata = {
            img: '图片',
            url: '地址',
            title: '标题',
            classname: '类别名',
            time: '时间',
            pv: '点击数'
        };
    var outhtml = template_setdata($('#template_info_content').html(),setdata);
    console.log('单对象'+outhtml);
    var setdatas =[{
            img: '图片1',
            url: '地址1',
            title: '标题1',
            classname: '类别名1',
            time: '时间1',
            pv: '点击数1'
        },{
            img: '图片2',
            url: '地址2',
            title: '标题2',
            classname: '类别名2',
            time: '时间2',
            pv: '点击数2'
        }];
    var outhtml2 = template_setdata($('#template_info_content').html(),setdatas);
    console.log('数组'+outhtml2);

第二代模板引擎，支持语法

参考：

[http://ejohn.org/blog/javascript-micro-templating/][http_ejohn.org_blog_javascript-micro-templating]

[http://www.cnblogs.com/dolphinX/p/3489269.html][http_www.cnblogs.com_dolphinX_p_3489269.html]

实现如下：

//第二代模板引擎
    //支持语句，不支持key的替换，全部采用对象进行赋值
    function template2_setdata(template, data) {    
        var html=template;
        /*
             <#=xxx#> => ');p.push(xxx);p.push('
            <#       =>    ');                
            #>          => p.push('
         * */
        var result="var p=[];with(obj){ p.push('"
        +html.replace(/[\r\n\t]/g," ")//换行去掉
        .replace(/<#=(.*?)#>/g,"');p.push($1);p.push('")//<#=xxx#> => ');p.push(xxx);p.push('
        .replace(/<#/g,"');")//<# => ');    
        .replace(/#>/g,"p.push('")//#> => p.push('
        +" ');}return p.join('');";    
        var func = new Function('obj',result);
        return func(setdatas);
    }
    /*
     使用方法：
     html页面模板：
     <script type="text/template" id="template2_info_content">
        <ul>
            <# for ( var i = 0; i < setdatas.length; i++ ) { #>
                 <li><a href="<#=setdatas[i].url#>"><#=setdatas[i].title#></a></li>
            <# } #>
        </ul>
    </script>
    替换语句：
    var setdatas =[{
            img: '图片1',
            url: '地址1',
            title: '标题1',
            classname: '类别名1',
            time: '时间1',
            pv: '点击数1'
        },{
            img: '图片2',
            url: '地址2',
            title: '标题2',
            classname: '类别名2',
            time: '时间2',
            pv: '点击数2'
        }];
    var outhtml3 = template2_setdata($('#template2_info_content').html(),setdatas);
    console.log(outhtml3);
     * */

源码：[https://github.com/easonjim/JavascriptTemplateEngine][https_github.com_easonjim_JavascriptTemplateEngine]

bug提交：[https://github.com/easonjim/JavascriptTemplateEngine/issues][https_github.com_easonjim_JavascriptTemplateEngine_issues]

转载于:https://www.cnblogs.com/EasonJim/p/6229099.html

[http_ejohn.org_blog_javascript-micro-templating]: http://ejohn.org/blog/javascript-micro-templating/
[http_www.cnblogs.com_dolphinX_p_3489269.html]: http://www.cnblogs.com/dolphinX/p/3489269.html
[https_github.com_easonjim_JavascriptTemplateEngine]: https://github.com/easonjim/JavascriptTemplateEngine
[https_github.com_easonjim_JavascriptTemplateEngine_issues]: https://github.com/easonjim/JavascriptTemplateEngine/issues