2016-02-13 14 views
14

AngularJS oferuje dwukierunkowe wiązanie danych.Dlaczego dwukierunkowe wiązanie danych w AngularJS to antipattern?

Zbudowałem kilka aplikacji AngularJS i przekonałem się, że dwukierunkowe wiązanie danych to potężna funkcja, która zwiększyła moją produktywność.

Ostatnio jednak coraz częściej pojawia się w postach i artykułach, które twierdzą, że dwukierunkowe wiązanie danych jest antypodstawką.

Przykłady:

Większość zasobów argumentować na rzecz "Jednokierunkowy przepływ danych" jak to jest promowany przez React/Strumień.

także Angular2 announced od jakiegoś czasu, że nie będzie wiążąca bez dwukierunkowy ... ale najnowsza dokumentacja wskazuje, że jest to rzeczywiście oferując two-way databinding via ngModel ponownie (realizowane na szczycie property- i wydarzenie wiążące)

Jednak nie w pełni rozumiem problemy, które wiążą się z dwukierunkowym wiązaniem danych w AngularJS.

Inne technologie klienckie (tj huśtawka, Eclipse RCP, WinForms, WPF ...) oferują dwukierunkowe wiązania z danymi, a ja nigdy nie potknął się o twierdzenie, że to jest anty-wzór ...

Czy istnieje przykład kanoniczny, który z łatwością ilustruje problemy, które mogą wynikać z dwukierunkowego wiązania danych w AngularJS?

The video I połączone powyżej wydaje się wskazywać, że $scope.watch jest problem ... ale Przykładem mogą być realizowane bez $scope.watch przez wiązanie z funkcji narażone na $scope.
Jeśli nie używasz $scope (tj. Przy użyciu controller as), jakie problemy pozostają z dwukierunkowym wiązaniem danych?

+2

Rzecz z dwukierunkowym wiązaniem polega na tym, że wywołuje kaskadę zdarzeń za każdym razem, gdy jest wyzwalana. Może to potencjalnie spowodować bardzo duży nakład na najprostszych działań, które są śledzone. Chociaż nie jest to bezpośrednio zła rzecz, jest z natury słabością każdego projektu. Jeśli nie wiesz dokładnie, co robisz, bardzo łatwo jest stworzyć powolny kod. AngularJS zmaga się z tą decyzją projektową od samego początku i jest to powód, dla którego Angular 2 został stworzony w inny sposób. Ramy takie jak React i KnockOut są jednokierunkowe z założenia. – MartijnK

+0

@MartijnK Dzięki za komentarz. Twój argument w zasadzie wyjaśnia, że ​​dwukierunkowe wiązanie danych jest słabo zaimplementowane w AngularJS ... czy to właśnie jest powodem, że "koncepcja" dwukierunkowego wiązania danych jest antyprzemysłowym? Knockout oferuje także dwukierunkowe wiązanie danych ... więc nie jest to anty-deseniem, gdy używa się Knockout jako frameworka? – jbandi

+1

Myślę, że każdy, kto nazywa dwukierunkowe wiązanie anty-wzorem, argumentowałby, że oszczędza inżynierowi trochę czasu i wysiłku z góry, kosztem wydajności aplikacji, łatwości konserwacji i skalowalności. W przypadku Angular 1.x każdy cykl trawienny uruchamia serię brudnych czeków i zwrotów, które szybko mogą wymknąć się spod kontroli, jeśli nie wiesz, jak i dlaczego zegarki są dodawane. Powiedzieć, że to anty-wzór to ostra krytyka IMHO, ale widzę, dlaczego niektórzy nie lubią tego. –

Odpowiedz

5

W rzeczywistości głównym problemem związanym z dwukierunkowym wiązaniem danych jest wydajność.

Po wypuszczeniu AngularJS (1) ta funkcja była głównym powodem, dla którego framework został bardzo wykorzystany przez programistów.

Bez linii kodu można sprawić, że element będzie w pełni dynamiczny, zmieniając jego wartość po stronie modelu lub po stronie widoku, wartość jest zmieniana wszędzie, gdzie model jest ustawiony.

W tej funkcji najważniejszym narzędziem jest oglądanie i stanowi on cały problem z dwukierunkowym wiązaniem danych.

Wraz z ewoluowaniem aplikacji zwiększa się liczba obserwatorów i obserwowanych elementów.
Po pewnym czasie aplikacja może stać się dużą zupą obserwatorów.
Spowoduje to, że aplikacja będzie zawsze oglądać elementy i aktualizować elementy po stronie odwrotnej, a to zużywa dużo zasobów z przeglądarki.

Oto dlaczego zalecam: Unikaj obserwatorów tak bardzo, jak to możliwe.
Prawie nigdy nie są one naprawdę konieczne w kontrolerze.

Zobacz także:

nadzieję, że to bardziej jasne dla ciebie.

+0

Dwustronne wiązanie danych samo w sobie nie jest przyczyną wydajności, więc pierwsze oświadczenie jest prawdziwe i błędne w zależności od innych czynników, więc jest błędne. –

+1

jak @MartijnK stwierdza w swoim komentarzu, kaskada wyzwalanych zdarzeń jest w zasadzie problemem. Angular.js zakłada, że ​​zdarzenia nie są czyste (tzn. Mogą zmieniać stan/model), więc Angular zawsze zakłada, że ​​wszystkie dane mogły zostać zmienione po każdym zdarzeniu. –

Powiązane problemy