静态的字符模板

静态的字符模板每次编译都会重新渲染页面,例如ejs

<p><%= title %></p>

每次title变化,都会重新生成p标签并插入到页面当中,可以将编译过程简单抽象

function compile(title) {
    var p = document.createElement('p');
    p.innerText = title;
    document.body.appendChild(p);
}

每次渲染p标签都会重新生成替换掉原来的内容,而且相应的事件也会重新绑定,可以理解为局部页面刷新.

AngularJS编译器

AngularJS编译器不会反复的编译内容,还拿上面的例子举例

var p;
function compile(title) {
    if (!p) {
        p = document.createElement('p');
        document.body.appendChild(p);
    }
    p.innerText = title;
}

首次编译后将内容插入页面当中,以后每次数据变化触发渲染,只更新p的内容,而不是重新替换便签.这是AngularJS编译器与静态的字符模板的最大区别.