angular4中的Renderer2是什么？为什么它比jquery更受欢迎？

Question

我想了解什么是为什么以及为什么Renderer2在角度中用于DOM操作.我们可以在Renderer2或原生javascript中使用丰富而着名的库jQuery吗？使用Renederer2而不是jQuery有什么好处

Answer 1

在普通的浏览器上下文中Renderer2是围绕DOM操作浏览器API的简单默认包装器.例如,以下是其中一些方法的实现:

class DefaultDomRenderer2 implements Renderer2 {

    addClass(el: any, name: string): void { el.classList.add(name); }

    createComment(value: string): any { return document.createComment(value); }

    createText(value: string): any { return document.createTextNode(value); }

    appendChild(parent: any, newChild: any): void { parent.appendChild(newChild); }

它被引入抽象渲染操作远离纯DOM元素.例如,如果您需要添加一个类,您可以这样做:

constructor(el: ElementRef, renderer: Renderer2) {
    renderer.addClass(el.nativeElement, 'some');
}

在这里,您可以看到您不直接与本机元素交互,也不使用它的API如何使用jQuery:

constructor(el: ElementRef) {
    $(el.nativeElement).addClass('some');
}

如果您提供特定于该平台的渲染器的不同实现,则具有渲染器的代码具有能够在除DOM之外的平台上运行的优点.例如,Angular为Renderer2webworker 提供了一个实现WebWorkerRenderer2.它实现了一些API方法,比如addClass使用postMessage方法与DOM需要更新的主应用程序进行通信.