javascript - 如何理解Angular视图模板与普通模板系统间的区别？

问题描述

问 题

在angular介绍中，说一般模板是将静态的字符模板和数据绑定，生成新字符，然后通过innerHTML插入到页面元素中，而angular则是AngularJS编译器使用的是带指令的DOM，而不是字符串模板。但是在指令中，template参数也不是一个字符串么？

解决方案

静态的字符模板

静态的字符模板每次编译都会重新渲染页面,例如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编译器与静态的字符模板的最大区别.

这篇关于javascript - 如何理解Angular视图模板与普通模板系统间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！