Question

我想了解Renderer2用于DOM操作的角度是什么以及为何。我们可以在Renderer2或原生javascript中使用丰富而着名的库jQuery吗？使用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 Renderer2提供WebWorkerRenderer2的实现。它使用API方法实现addClass方法，例如Qt方法，以便与需要更新DOM的主应用程序进行通信。

Answer 2

另一个可靠的例子是服务器端渲染。如果您打算使用服务器端渲染，那么您应该尽可能远离DOM。使用渲染器包装器将为您提供最安全的方式和多平台支持服务器端渲染。

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

2 个答案: