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

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

阅读 2.5k
1 个回答

静态的字符模板

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题