Refaktoring prostego komponentu w Angularze

Załóżmy że zastajesz taki fragment kodu angularowego i musisz w nim zmienić kilka rzeczy. Od razu rzuca się w oczy, że wymaga on refaktoryzacji. HTML umieściłem w template dla lepszej widoczności.

Pierwsza rzecz oznaczona cyframi 1, 2, 3 w komentarzach. Widzę tutaj kilka problemów. Po pierwsze, wykonujemy kod który nie został jakkolwiek nazwany biznesowo. Po drugie, kod jest wykonywany w HTML, a aby to umożliwić, kolega z zespołu zrobił publiczny service. Po trzecie, kod jest zduplikowany.

Wydzielam kod do geta i wtedy wygląda to tak:

Udało się pozbyć duplikacji, metody z serwera też już nie są dostępne w templatce.

Następnie mamy metodę isSectionVisible, której nazwa jest też mało związana z domeną. Na widoczność sekcji składa się kilka celowo pogmatwanych reguł. Za każdym razem gdy czytamy ten kod, musimy analizować dwie wartości przychodzące w inputach. Dodatkowo kod jest mało czytelny. Można wydzielić te wartości do reguł w constach.

Zanim zaczniemy zmieniać, warto zwrócić uwagę na to, że kod zawsze zwraca true, ponieważ jest zwykłą metodą, a wywołuje się go jak geta. 

isSectionVisible -- powinno być isSectionVisible()

Ponieważ ta metoda nie przyjmuje argumentów (być może to błąd, zajmiemy się tym później), można ją uczynić także getem. Nie zwracaj uwagi na to co dzieje się w w regułach biznesowych :)

Podjąłem tutaj próbę nazwania reguł, oczywiście w prawdziwej aplikacji lepszą nazwą będzie prawdziwa reguła biznesowa.

Idąc dalej można uprościć ten kod jeszcze bardziej...

Dobrze skonfigurowany linter podpowie że metoda nie obsługuje wszystkich ścieżek, domyślnie powinna zwracać false, a obecnie gdy żaden z warunków nie jest spełniony, zwraca undefined.

Należało by dogadać, czy metoda ma domyślnie zwracać true czy false.
Załóżmy że false.

Else if nie jest do końca potrzebny, bo i tak metoda zwraca wartość i wychodzimy z niej;

Zgłaszam też pretensję do tego, że metoda odnosi się do this. Jeśli chcielibyśmy ją przenieść do serwisu (a chcielibyśmy), przekażmy jej parametry. Dlaczego tak? Metoda jest wtedy czysta, nie operuje na globalnym stanie, łatwiej ją przetestować.

Bliższe przyjrzenie się logice wskazuje, że metoda zwróci true tylko gdy jest spełniony pierwszy warunek, a w każdym innym przypadku, zwróci false. Dzięki tej wiedzy można ją uprościć jeszcze bardziej. Na koniec kod po refaktoryzacji.