Warum ist die wechselseitige Datenbindung in AngularJS ein Antipattern?

AngularJS bietet Zwei-Wege-Datenbindung.Warum ist die wechselseitige Datenbindung in AngularJS ein Antipattern?

Ich habe mehrere AngularJS-Apps erstellt und festgestellt, dass die Zweiwege-Datenbindung ein leistungsfähiges Feature ist, das meine Produktivität erhöht.

Kürzlich jedoch komme ich mehr und mehr über Beiträge und Artikel, die behaupten, dass Zwei-Wege-Datenbindung ein Antipattern ist.

Beispiele:

Die meisten Ressourcen plädieren für "unidirektionale Datenfluss", wie es durch Reagieren/gefördert Fluss.

Auch Angular2 announced seit einiger Zeit, dass es keine Zwei-Wege-bindend ... aber die neueste Dokumentation zeigt, dass es tatsächlich two-way databinding via ngModel bietet wieder (umgesetzt oben auf Eigentums- und Event-Bindung)

Allerdings verstehe ich die Probleme, die sich auf die wechselseitige Datenbindung in AngularJS beziehen, noch nicht vollständig.

Andere Client-Technologien (zB Swing, Eclipse-RCP, WinForms, WPF ...) bieten auch Zwei-Wege-Datenbindung, und ich stolperte nie den Anspruch auf, dass sie ein Anti-Muster ...

Gibt es ein kanonisches Beispiel, das die Probleme, die sich aus der wechselseitigen Datenbindung in AngularJS ergeben könnten, leicht veranschaulicht?

The video ich oben verlinkten scheint anzudeuten, dass $scope.watch das Problem ist ... aber das Beispiel kann auf der $scope ausgesetzt durch Bindung an eine Funktion ohne $scope.watch umgesetzt werden.
Wenn Sie die Verwendung von $scope (d. H. Unter Verwendung von controller as) vermeiden, welche Probleme bleiben bei der bidirektionalen Datenbindung bestehen?

Quelle

2016-02-13 jbandi

Die Sache mit Zwei-Wege-Bindung ist, dass es eine Kaskade von Ereignissen jedes Mal auslöst, wenn es ausgelöst wird. Dies kann möglicherweise einen sehr hohen Aufwand für die simpelsten Aktionen verursachen, die verfolgt werden. Während es nicht direkt eine schlechte Sache ist, ist es inhärent eine Schwäche in jedem Design. Wenn Sie nicht genau wissen, was Sie tun, ist es sehr einfach, trägen Code zu erstellen. AngularJS hat seit seiner Einführung mit dieser Designentscheidung gerungen und es ist ein Grund, warum Angular 2 anders aufgebaut wurde. Frameworks wie React und KnockOut sind vom Design her monodirektional. – MartijnK

@MartijnK Vielen Dank für Ihren Kommentar. Ihre Argumentation erklärt im Grunde, dass die wechselseitige Datenbindung in AngularJS schlecht implementiert ist ... Ist das wirklich der Grund, warum das "Konzept" der Zweiwege-Datenbindung ein Antipattern ist? Knockout bietet auch eine Zwei-Wege-Datenbindung ... also ist es kein Anti-Pattern, wenn man Knockout als Framework verwendet? – jbandi

Ich denke, jeder, der eine bidirektionale Bindung als Anti-Pattern bezeichnet, würde argumentieren, dass dies dem Entwickler Zeit und Aufwand auf Kosten der Anwendungsleistung, Wartbarkeit und Skalierbarkeit spart. Im Fall von Angular 1.x löst jeder Digest-Zyklus eine Reihe von Dirty-Checks und Callbacks aus, die schnell außer Kontrolle geraten können, wenn Sie nicht verstehen, wie und warum die Uhren hinzugefügt werden. Zu sagen, dass es ein Anti-Muster ist, ist eine harte Kritik IMHO, aber ich kann sehen, warum einige Leute es nicht mögen. –

In der Tat ist das Hauptproblem mit Zwei-Wege-Datenbindung Leistung.

Als AngularJS veröffentlicht wurde (1), war dieses Feature der wichtigste Grund, warum das Framework von Entwicklern stark genutzt wurde.

Ohne eine Codezeile können Sie ein Element vollständig dynamisch machen, indem Sie seinen Wert von der Modellseite oder der Ansichtsseite aus ändern. Der Wert wird überall dort geändert, wo das Modell festgelegt wird.

In dieser Funktion ist das wichtigste Werkzeug das Beobachten, und es stellt das ganze Problem mit Zwei-Wege-Datenbindung dar.

Während sich die Anwendung weiterentwickelt, erhöht sich die Anzahl der Beobachter und der überwachten Elemente.
Auch nach einiger Zeit kann die Anwendung eine große Suppe von Beobachtern werden.
Dies führt dazu, dass Ihre Anwendung immer Elemente überwacht und die Elemente auf der inversen Seite auf dem neuesten Stand hält und das viele Ressourcen vom Browser verbraucht.

Deshalb ist meine Empfehlung: Vermeiden Sie Beobachter so viel wie möglich.
Sie sind in einem Controller fast nie wirklich notwendig. auch

Siehe:

Hoffe, dass es für Sie klar.

Quelle

2016-02-13 15:11:41 chalasr

Zwei-Wege-Datenbindung allein ist nicht die Ursache der Leistung, so dass die allererste Aussage wahr und falsch ist, abhängig von anderen Faktoren, so ist es falsch. –

wie @MartijnK in seinem Kommentar sagt, ist die Kaskade von ausgelösten Ereignissen im Grunde das Problem. Angular.js geht davon aus, dass Ereignisse nicht rein sind (d. H. Den Status/das Modell ändern können). Daher geht Angular immer davon aus, dass alle Daten nach jedem Ereignis geändert worden sein könnten. –

Warum ist die wechselseitige Datenbindung in AngularJS ein Antipattern?

Antwort

Verwandte Themen