10 lines of code to implement a JS template engine

// Core code
let template = {
	escape: {"'":"\ \" "."\\n":"\\\\n"."\\r":"\\\\r"."\ \":"\ \ \ \"},reg:/'|\\n|\\r|\\/g
}
template.compile = function(tpl){
    tpl = tpl.replace(/[\s\t\r\n]+/g."")
    .replace(/\{\{#\s*([\s\S]+?) \s*\}\}/g."'); $1__a.push('")
    .replace(/\{\{\s*([\s\S]+?) \s*\}\}/g."'); __a.push($1); __a.push('")
    tpl = "var __a = []; __a.push('"+tpl+"'); return __a.join('')";
    tpl = tpl.replace(/__a.push\('([\S\s]+?) '\)/g.function(){
                let arg = arguments;
                return template.reg.test(arg[1])? arg[0].replace(arg[1],arg[1].replace(template.reg,(arg) = >template.escape[arg])) : arg[0]})let compileFn = new Function("d",tpl);
    return function(data){
        return compileFn.call(this,data)
    }
};

Copy the code

Method of use

<div id="app"></div>
<script type="text/html" id="tpl">
    {{# if(d.type= =2){ }}
        {{# for(var i = 0; i < 3; i++){  }} 
            <div>dfdf</div>
            <div>The electricity and water</div>
            <div>{{d.name}}</div>
            <div>{{ d.name ? "aa" : "jj" }}</div>
        # {{}}}
    {{#}else{}} 
        <div>sdf</div>
    # {{}}}
</script>
Copy the code

let tpl = document.getElementById('tpl').innerHTML
,render =  template.compile(tpl);
document.getElementById('app').innerHTML = render({name:'ck'.type:2});
Copy the code