Najlepsza praktyka organizowania biblioteki Javascript i struktury folderów CSS [zamknięty]

Jak zorganizować pliki HTML, CSS i Javascript

Przedstawię zalecaną strukturę do organizowania plików w aplikacji HTML5. To nie jest próba stwórz dowolny standard. Zamiast tego przedstawię sugestie, jak grupowanie i nazywanie plików w logiczny, wygodny sposób.

Twój Projekt

Załóżmy, że budujesz aplikację HTML5. W w niektórych przypadkach możesz użyć korzenia Twój serwer jako główny kontener ale dla celów tego artykułu zakładam, że HTML5 aplikacja znajduje się w folderze. W tym folderze musisz Utwórz plik indeksu aplikacji lub główny punkt wejścia.

• appcropolis-projekt
• mój-indeks.html

Ogólnie rzecz biorąc, twój aplikacja będzie składać się z HTML, CSS, obrazów i Javascript pliki. Niektóre z tych plików będą specyficzne dla Twojej aplikacji i inni może być używany w wielu aplikacjach. To jest bardzo ważne wyróżnienie. Aby zrobić skuteczne grupowanie plików należy musi zacząć od oddzielenia plików ogólnego przeznaczenia od zasoby specyficzne dla aplikacji.

full " >

• appcropolis-projekt
• zasoby
• sprzedawcy
• mój-indeks.html

To proste rozdzielenie ułatwia nawigowanie po plikach. Po umieszczeniu biblioteki oraz akta ogólnego przeznaczenia wewnątrz folder jest jasne, że pliki, które będziesz edycja będzie zlokalizowana w folderze resources .

Oprócz kodu HTML reszta plików w aplikacji są to głównie CSS, Javascript i obrazy. Są szanse, że już Grupuj pliki aplikacji w folderach, które odpowiadają tym rodzaj aktywów.

• appcropolis-projekt
• zasoby
• css
• js
• images
• Dane
• sprzedawcy
• mój-indeks.html

The js folder będzie zawierał kod Javascript. Podobnie, images folder to miejsce, w którym powinieneś dodać obrazy, które są używane bezpośrednio z indeksu.html lub jakiejkolwiek innej strony w Twoje podanie. Folder images nie powinien być używane do hostingu pliki związane z arkuszem stylów. Twój kod CSS i pokrewne obrazy powinny znajdować się w folderze css . Przez w ten sposób można tworzyć strony, które mogą łatwo używać różnych motywów i pozwalasz, aby Twoja aplikacja była bardziej przenośna.

• appcropolis-projekt
• zasoby
• css
• blue-theme
• tło.png
• images
• tło.png
• niebieski-motyw.css
• mój-indeks.css
• js
• mój-indeks.js
• my-contact-info.js
• images
• Produkty
Komputer.jpg Telefon komórkowy.png
• Drukarka.jpg
• my-company-logo-small.png
• Moja-Firma-logo-Duze.png
• Dane
• niektóre-dane.json
• Więcej-dane.xml
• tabela-dane.csv
• extra-dane.txt
• sprzedawcy
• jquery
• images
• ajax-loader.gif
• ikony-18-białe.png
• jquery./ min.js
• jquery.mobile-1.1.0./ min.css
• jquery.mobile-1.1.0./ min.js
• some-css-library
• jakiś plugin.jquery
• mój-indeks.html
• my-contact-info.html
• moje-produkty.html

Poprzedni przykład pokazuje zawartość folderu css . Zauważ, że istnieje plik o nazwie default.css, który powinien być używany jako główny Plik CSS. Obrazy używane przez domyślny arkusz stylów powinny znajdować się wewnątrz folder images . Jeśli chcesz stworzyć alternatywę arkusze stylów lub jeśli chcesz nadpisać reguły zdefiniowane w domyślnym arkusz stylów, można tworzyć dodatkowe pliki CSS i korespondent foldery. Możesz na przykład utworzyć niebieski motyw.arkusz stylów css i umieść wszystkie powiązane obrazy w folderze blue-theme . Jeśli masz kod CSS lub Javascript, który jest używany tylko przez jedną stronę (w to mój indeks.html), możesz grupować kod strony w środku .css i .Pliki js o tej samej nazwie strony (np. my-index.css i mój-indeks.js). Twój kod CSS i Javascript powinien bądź generykiem jako możliwe, ale można śledzić wyjątki umieszczając je w oddzielne pliki.

Zalecenia Końcowe

Niektóre zalecenia końcowe muszą być wykonane wokół folderu i Pliku nazwiska. Zasadniczo upewnij się, że używasz małych liter w wszystkie nazwy folderów i plików. Przy użyciu wielu słów do nazwania pliku lub folder oddziela je myślnikiem (np. my-company-logo-small.png). Jeśli zastosujesz się do porad zawartych w tym artykule, powinieneś być w stanie połączyć wiele stron przy jednoczesnym zachowaniu wspólnych zasobów i niestandardowego kodu ładnie rozdzielone.

Wreszcie, nawet jeśli nie zdecydujesz się na korzystanie z struktura zalecana w tym artykule, ważne jest, aby trzymać się zjazd. To zwiększy twoją produktywność i ważniejsze it sprawi, że praca, którą wykonujesz, będzie łatwa do zrozumienia przez innych.