简单的html渲染模板引擎

最新推荐文章于 2024-05-13 09:37:00 发布

weixin_30415113

最新推荐文章于 2024-05-13 09:37:00 发布

阅读量340

点赞数

原文链接：http://www.cnblogs.com/caoke/p/5110961.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的html渲染模板引擎</title>
    <script>
        //解析ejs
        var parseTpl = function( str, data ) {
            var tmpl = 'var __p=[];' + 'with(obj||{}){__p.push(\'' +
                            str.replace( /\\/g, '\\\\' )
                                    .replace( /'/g, '\\\'' )
                                    .replace( /<%=([\s\S]+?)%>/g, function( match, code ) {
                                        return '\',' + code.replace( /\\'/, '\'' ) + ',\'';
                                    } )
                                    .replace( /<%([\s\S]+?)%>/g, function( match, code ) {
                                        return '\');' + code.replace( /\\'/, '\'' )
                                                .replace( /[\r\n\t]/g, ' ' ) + '__p.push(\'';
                                    } )
                                    .replace( /\r/g, '\\r' )
                                    .replace( /\n/g, '\\n' )
                                    .replace( /\t/g, '\\t' ) +
                            '\');}return __p.join("");',

                    func = new Function( 'obj', tmpl );

            return data ? func( data ) : func;
        };
        //解析dom
        function render(element,data){
            //模板转义
            var tpl=element.innerHTML.replace(/</g, '<').replace(/>/g, '>')
            var html=parseTpl(tpl,data||{})
            if(element._render){
                element._render.innerHTML=html
            }else{
                var div=document.createElement("div")
                div.innerHTML=html
                element._render=element.parentNode.insertBefore(div,element)
            }
        }
    </script>
</head>
<body>
<div class="ejs123" style="display: none;">
    <%for(var i=0;i<3;i++){%>
    <div>ok<%=i%></div>
    <%}%>
</div>

<textarea class="ejs123" style="display: none;">
    <%for(var i=0;i<3;i++){%>
    <div>ok<%=name%></div>
    <%}%>
</textarea>
</body>

<script>
    window.name="-caoke"
    //render 第一个参数是dom元素，第二个是传入的数据
    var elements=document.querySelectorAll(".ejs123")
    //第一次创建
    for(var i=0;i<elements.length;i++){
        var element=elements[i]
        render(element,{
            author:"caoke"
        })
    }
    //第二次修改
    for(var i=0;i<elements.length;i++){
        var element=elements[i]
        render(element,{
            author:"caoke"
        })
    }
</script>
</html>

转载于:https://www.cnblogs.com/caoke/p/5110961.html

weixin_30415113

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的html渲染模板引擎

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>简单的html渲染模板引擎</title> <script> //解析ejs var parseTpl...
复制链接

扫一扫