W mojej aplikacji mam około 10 różnych stron, a większość z nich używa jakiejś JavaScript. Obecnie mam jedną stronę klienta app.js, który jest zawarty we wszystkich stronach. Aby dowiedzieć się, jakie słuchacze zdarzeń do dołączenia na stronie I zasadniczo sprawdzaj url Lokalizacja i przejdź stamtąd:

window.onload = function () {
  let urlLocation = window.location.pathname.split('/')[1]

  //Global functionality for all pages
  UIctrl.toggleActiveNavbar(urlLocation)

  //createTopic route
  if (urlLocation === 'createTopic' || urlLocation === 'edit') {
    UIctrl.createTopicTagsBasedOnCategory()
    UIctrl.handleCreateOrEditTopicClick()
  }

  if (urlLocation === 'editPost' || urlLocation === 'createPost') {
    UIctrl.handleCreateOrEditPostClick()
  }

 // .... and so on 

 }

Nawet jeśli to działa, nie sądzę, że to dobry sposób na to. Jeśli projekt staje się wystarczająco duży, bardzo trudno go zarządzać. Nie mogłem znaleźć odpowiedzi, jak to zrobić poprawnie. Moje pytania to:

  1. Czy powinienem mieć oddzielne pliki js dla każdej strony? Mój problem z tym polega na tym, że muszę powielić wspólny kod używany na wszystkich stronach.
  2. Czy używasz jakiegoś rodzaju bundlers (WebPack / Parcel) w ekspresowych aplikacjach, które rozwiązują ten problem? Może mógłbyś skierować mnie do repozytorium, który pokazuje, jak prawidłowo ustawić go.
  3. Jak to robi w prawdziwym świecie środowiskach produkcyjnych?

Dziękuję Ci.

-1
Noob 17 październik 2020, 22:46

1 odpowiedź

Najlepsza odpowiedź

Twoja intuicja, która porównuje adresy URL, aby zdecydować, jakie inicjalizacja do uruchomienia jest zły sposób do kodu, jest poprawny. To nie jest dobry wzór i szybko wyjdzie z kontroli z coraz większą ilością stron i konserwacji z czasem może być prawdziwym bólem.

Zamiast tego można umieścić wspólny kod w udostępnionym pliku JS, który obciążenia każdej strony, dzięki czemu funkcje te są dostępne w razie potrzeby. Następnie użyj znacznika inline <script> w każdej pojedynczej stronie, aby wykonać inicjalizację specyficzną dla strony, która ustawia słuchaczy zdarzeń, które są określone dla tej strony i połączeń kodu w pliku udostępnionego JS.

Jeśli dla niektórych stron masz dużo kodu inicjującego specyficznego dla strony, można umieścić właśnie ten kod specyficzny dla strony w pliku specyficznym dla stron JS, ale ogólnie nie chcesz mieć zewnętrznego pliku JS dla każdego z nich Twoje strony, jeśli możesz go uniknąć. Spróbuj umieścić większość kodu we wspólnym pliku JS, a następnie użyj małego bitka kodu inline na każdej konkretnej stronie, aby wykonać odpowiednią inicjalizację. Dotyczy to większości swojego kodu w wspólnym, udostępnionym pliku JS i utrzymuje specyficzną logikę inicjalizacyjną na stronie.

Czy powinienem mieć oddzielne pliki JS dla każdej strony? Mój problem z tym polega na tym, że muszę powielić wspólny kod używany na wszystkich stronach.

Nie. Nie chcesz duplikować wielu kodów w oddzielnych plikach JS, ponieważ jest to koszmar konserwacyjny i pokonuje skuteczne buforowanie przeglądania.

1
jfriend00 17 październik 2020, 20:27