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

Question

我想了解什么是为什么Renderer2被用于角度的DOM操作。 我们可以使用丰富而着名的库jQuery来代替Renderer2或原生JavaScript吗？ 使用Renederer2优于jQuery的优势

Answer 1

在正常的浏览器上下文中，Renderer2是一个简单的DOM操作浏览器API的默认包装器。例如，这里只是它的一些方法the implementation：

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为webworker WebWorkerRenderer2提供了Renderer2的实现。它实现了API方法，如addClass使用postMessage方法与主要应用程序通信，需要更新DOM。