ANGULAR – manipulacja DOM w różnych środowiskach

Cześć po dłuższej przerwie! W tym krótkim artykule poruszę temat manipulacji drzewem za pomocą klasy Renderer2, która na razie jest w fazie experimental w NG4.

Jeśli manipulowałeś DOMem w Angularze 2, zapewne robiłeś to np. za pomocą:

  • vanillaJS
  • jQuery
  • nativeElement

Od wielu lat, jQuery cieszy się popularnością w kwestii manipulacji DOM. Zapewne na standardowych stronach sprawdza się dobrze,ale np. osobiście nie preferuję mieszać Angulara z jQuery. Ale skoro działa to czemu nie? No nie do końca.

Skupmy się na tym, kiedy na pewno nie powinniśmy manipulować DOMem przy użyciu jQuery lub czystego JS.

ANGULAR JAKO PLATFORMA

Angular jest platformą, która może zostać uruchomiona w różnych środowiskach, np:

  • native mobile
  • native desktop
  • web Worker
  • server side rendering

Problem w tym, że jeśli zaczynamy operować na DOMie np. za pomocą jQuery, to tracimy możliwość manipulowania DOMem w środowiskach, które nie mają dostępu do DOM API. (np powyżej wymienione).

Jeśli zależy nam aby nasza aplikacja działała poprawnie w pożądanym przez nas środowisku innym niż przeglądarka, to musimy nadać warstwę abstrakcji na UI. Pomoże nam w tym klasa Renderer2.

RENDERER2

Klasa Renderer2 jest bardzo intuicyjna. Część metod nazywa się podobnie jak w jQuery, np:

  • addClass
  • removeClass

Zbiór wszystkich metod w linku poniżej:

RENDERER2 CLASS

Aby rozpocząć pracę z klasą Renderer2, musimy ją najpierw wstrzyknąć do konstruktora klasy komponentu:

Następnie w templatce przypisujemy zmienną do elementu (#navbar), np:

Wracamy do klasy komponentu i przy użyciu ViewChild, łapiemy nasz element, na którym chcemy wykonać jakąś operację DOM:

Teraz pozostaje nam sięgnąć po jedną z metod renderera, np. listen i addClass:

Nałożyliśmy warstwę abstrakcji na nativeElement za pomocą Renderera2, teraz nasz kod być również wykonywalny w innych środowiskach. Zachęcam do przeczytania całego API.

PODSUMOWANIE

  • jeśli nie planujesz aplikacji uruchamiać w innych środowiskach niż przeglądarka, to użycie klasy Renderer2 do manipulacji DOMem jest zbędne
  • do czasu wydania NG4 istniała klasa Renderer (obecnie wycofana już), została zastąpiona klasą Renderer2

UWAGA! 

Jeśli wziąłeś udział w konkursie:

Konferencja JS Poland 2017 – wygraj bilet lub skorzystaj ze zniżki!

to prosiłbym o kontakt mailowy na poniższy adres, niestety nie widzę kto udostępnił na FB powyższy artykuł; (

nastalytomasz@gmail.com

2 Comments

  1. michalczukm

    Jeden plus, że API tworzą w oparciu o to co ludzie znają. Renderer miał oczywiście swoje nazewnictwo 😉
    Ale z innej beczki – przypominają mi się varchar i varchar2 z Oracle jeśli chodzi o nazwę nowej klasy 😛

    No i oczywiście pytanie zasadnicze do twórców – kiedy Renderer się rozjedzie i zewnętrzne pakiety, których akurat ty używasz więcej niż ja, przestaną się poprawnie zachowywać 😀

    • mcsqueeb

      Hallo Michau:-)
      Faktycznie, nazwa renderer2 brzmi raczej dość słabo, czekam na renderer3…renderer8:)
      Nie strasz! stąd trzeba brać pakiety z głową, które najlepiej codziennie mają commity z poprawkami / ficzerami, to powinny iść wraz z nowym api:)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *