Sprawdzone metody organizowania biblioteki JavaScript i struktury folderów CSS [zamknięte]

Jak organizujesz folder js i css w aplikacji internetowej?

Moja obecna struktura projektu jest taka:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

Ale jest to bardziej skomplikowane, gdy używam wielu bibliotek javascript i wtyczek css. Wtyczka Javascript jest dostarczana z własnym plikiem .js, a czasem z własnym plikiem .css.

Na przykład, kiedy używam JQuery z wtyczką JQueryUI, umieszczam jquery.js i jquery-ui.js w katalogu js / lib. Ale JQueryUI ma własny plik css. Gdzie powinienem umieścić css z wtyczki javascript, aby uzyskać najlepsze praktyki? Czy powinienem umieścić je w folderze lib, aby odróżnić moją wtyczkę css i javascript css? Lub gdzie indziej?

Wiem, że to osobiste preferencje, ale chcę tylko wiedzieć, jak organizujecie folder projektu.

Z góry dziękuję :)

Przedstawię zalecaną strukturę organizowania plików w aplikacji HTML5. To nie jest próba stworzenia jakiegokolwiek standardu. Zamiast tego podam sugestie, jak grupować i nazywać pliki w logiczny i wygodny sposób.

Twój projekt

Załóżmy, że tworzysz aplikację HTML5. W niektórych przypadkach możesz użyć katalogu głównego serwera jako głównego kontenera, ale na potrzeby tego artykułu założę, że aplikacja HTML5 znajduje się w folderze. W tym folderze musisz utworzyć plik indeksu aplikacji lub główny punkt wejścia.

• appcropolis-project
• my-index.html

Ogólnie Twoja aplikacja będzie się składać z plików HTML, CSS, obrazów i JavaScript. Niektóre z tych plików będą specyficzne dla Twojej aplikacji, a inne mogą być używane w wielu aplikacjach. To bardzo ważne rozróżnienie. Aby skutecznie grupować pliki, należy zacząć od oddzielenia plików ogólnego przeznaczenia od zasobów specyficznych dla aplikacji.

• appcropolis-project
• zasoby
• sprzedawcy
• my-index.html

Ta prosta separacja znacznie ułatwia poruszanie się po plikach. Po umieszczeniu bibliotek i plików ogólnego przeznaczenia w folderze dostawców jasne jest, że pliki, które będziesz edytować, będą znajdować się w folderze zasobów .

Oprócz kodu HTML, pozostałe pliki w Twojej aplikacji to głównie CSS, JavaScript i obrazy. Prawdopodobnie zgrupowałeś już pliki aplikacji w folderach, które odpowiadają tego rodzaju zasobom.

• appcropolis-project
• zasoby
• css
• js
• zdjęcia
• dane
• sprzedawcy
• my-index.html

W folderze js będzie przechowywany kod JavaScript. Podobnie folder obrazy to miejsce, w którym należy dodawać obrazy używane bezpośrednio z pliku index.html lub dowolnej innej strony w aplikacji. Ten folder obrazów nie powinien być używany do hostowania plików związanych z arkuszami stylów. Twój kod CSS i powiązane obrazy powinny znajdować się w folderze css . W ten sposób możesz tworzyć strony, które mogą z łatwością korzystać z różnych motywów, i pozwalasz na większą przenośność aplikacji.

• appcropolis-project
• zasoby
• css
• niebieski motyw
• background.png
• zdjęcia
• background.png
• niebieski-theme.css
• my-index.css
• js
• my-index.js
• my-contact-info.js
• zdjęcia
• produkty
• komputer.jpg
• cellphone.png
• printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png
• dane
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• sprzedawcy
• jquery
• zdjęcia
• ajax-loader.gif
• icons-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• jakaś-biblioteka-css
• some-plugin.jquery
• my-index.html
• my-contact-info.html
• my-products.html

Poprzedni przykład przedstawia zawartość folderu css . Zauważ, że istnieje plik o nazwie default.css, który powinien być użyty jako główny plik CSS. Obrazy używane przez domyślny arkusz stylów powinny być umieszczone w folderze images . Jeśli chcesz utworzyć alternatywne arkusze stylów lub chcesz zastąpić reguły zdefiniowane w domyślnym arkuszu stylów, możesz utworzyć dodatkowe pliki CSS i odpowiadające im foldery. Na przykład, możesz utworzyć arkusz stylów blue-theme.css i umieścić wszystkie powiązane obrazy wewnątrz niebieskiego motywuteczka. Jeśli masz kod CSS lub Javascript, który jest używany tylko przez jedną stronę (w tym przypadku my-index.html), możesz zgrupować kod strony w plikach .css i .js o tej samej nazwie strony (np. My-index .css i my-index.js). Twój kod CSS i JavaScript powinien być możliwie ogólny, ale możesz śledzić wyjątki, umieszczając je w oddzielnych plikach.

Końcowe zalecenia

Należy sformułować pewne ostateczne zalecenia dotyczące nazw folderów i plików. Zasadniczo upewnij się, że używasz małych liter we wszystkich nazwach folderów i plików. Używając wielu słów do nazwania pliku lub folderu, oddziel je myślnikiem (np. Moje-firmowe-logo-małe.png). Jeśli zastosujesz się do porad zawartych w tym artykule, powinieneś być w stanie połączyć wiele stron, zachowując jednocześnie wspólne zasoby i ładnie oddzielając niestandardowy kod.

Wreszcie, nawet jeśli nie zdecydujesz się na użycie struktury zalecanej w tym artykule, ważne jest, aby trzymać się konwencji. Zwiększy twoją produktywność, a co ważniejsze sprawi, że praca, którą wykonujesz, będzie łatwa do zrozumienia dla innych.

Źródło: jak organizować pliki HTML, CSS i Javascript

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

W ten sposób zorganizowałem statyczne zasoby mojej aplikacji.