Co to jest Renderer2 w angular4? dlaczego jest preferowany w porównaniu z jquery?

Question

Chcę zrozumieć, co jest i dlaczego Renderer2 jest używany kątowo do manipulacji DOM. Czy możemy użyć bogatej i sławnej biblioteki jQuery w miejsce Renderer2 lub natywnego javascript? Co jest zaletą korzystania z Renederer2 przez jQuery

Answer 1

W normalnym kontekście przeglądarki Renderer2 jest prostym domyślnym otokiem wokół API przeglądarki manipulacji DOM. Na przykład, oto the implementation zaledwie kilku swoich metod:

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); } 

To zostało wprowadzone do abstrakcyjnych operacji renderowania od czystego elementów DOM. Na przykład, jeśli chcesz dodać klasę zrobiłbyś to tak:

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

Tutaj można zobaczyć, że nie oddziałują bezpośrednio z elementów rodzimych i nie używać jej API jak zrobiłbyś to z jQuery:

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

Kod z renderującego ma zaletę, że są w stanie uruchomić na platformach innych niż DOM jeśli podasz inną realizację renderującego dotyczących tej drugiej platformie. Na przykład Angular zapewnia implementację Renderer2 dla webworkera WebWorkerRenderer2. Implementuje metody API, takie jak: addClass przy użyciu metod komunikacji z główną aplikacją, która wymaga aktualizacji DOM.