Лучшие практики для организации библиотеки Javascript и структуры папок CSS

Как организовать файлы HTML, CSS и Javascript

                          

Я опишу рекомендуемую структуру для организации файлов в вашем приложении HTML5. Это не попытка создать любой стандарт. Вместо этого я сделаю предложения о том, как группировать и называть файлы логически удобным способом.

Ваш Проект

Предположим, вы создаете приложение HTML5. В в некоторых случаях вы можете использовать корень вашего сервера в качестве основного контейнера но для целей этой статьи я предполагаю, что вы HTML5 приложение содержится в папке. Внутри этой папки вы должны создайте файл индекса приложения или главную точку входа.

• appcropolis-project
  • my-index.html

Как правило, ваш приложение будет состоять из HTML, CSS, изображений и Javascript файлы. Некоторые из этих файлов будут специфичны для вашего приложения и некоторые другие могут использоваться в нескольких приложениях. Это очень важное различие. Для эффективной группировки ваших файлов вы должен начинаться с разделения файлов общего назначения от ресурсов приложения.

полный" >

• appcropolis-project
  • ресурсы
  • поставщики
  • my-index.html

Это простое разделение упрощает навигацию по вашим файлам. Как только вы разместите библиотеки и файлы общего назначения внутри поставщиков ясно, что файлы, которые вы будете редактирование будет расположено в папке ресурсов.

Помимо вашего кода HTML остальные файлы в вашем приложении в основном CSS, Javascript и изображения. Скорее всего, вы уже группируйте файлы приложений внутри папок, которые соответствуют этим вид активов.

• appcropolis-project
  • ресурсы
    • css
    • js
    • изображения
    • данные
  • поставщики
  • my-index.html

jsпапка будет содержать ваш код Javascript. Аналогичным образом, изображения папка - это место, где вы должны добавить изображения, которые используются непосредственно из index.html или любой другой страницы в ваше приложение. Эта папка изображений не должна быть используется для размещения файлов, связанных с таблицами стилей. Ваш код CSS и связанные с ним изображения должны находиться внутри папки css. От делая это, вы можете создавать страницы, которые могут легко использовать разные темы и вы позволяете вашему приложению быть более портативным.

• appcropolis-project
  • ресурсы
    • css
      • синяя тема
        • background.png
      • изображения
        • background.png
      • blue-theme.css
      • my-index.css

js

• my-index.js
• my-contact-info.js

изображения

• продукты
  • computer.jpg
  • cellphone.png
  • printer.jpg
• my-company-logo-small.png
• my-company-logo-large.png

данные

• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt

поставщики

• jquery
  • изображения
    • ajax-loader.gif
    • icons-18-white.png

jquery.min.js jquery.mobile-1.1.0.min.css jquery.mobile-1.1.0.min.js некоторые-CSS-библиотека some-plugin.jquery my-index.html my-contact-info.html my-products.html

Предыдущий пример показывает содержимое папки css. Заметить, что существует файл с именем default.css, который должен использоваться как ваш основной Файл CSS. Изображения, используемые таблицей стилей по умолчанию, должны располагаться внутри изображенияпапка. Если вы хотите создать альтернативу таблицы стилей или если вы хотите переопределить правила, определенные в стандарте по умолчанию stylesheet, вы можете создать дополнительные файлы CSS и корреспондент папки. Например, вы можете создать таблицу стилей blue-theme.css и поместите все связанные изображения в папку синяя тема. Если у вас есть код CSS или Javascript, который используется только одной страницей (в в этом случае my-index.html), вы можете группировать код страницы внутри .css и .js с тем же именем страницы (e.i. my-index.css и мой-index.js). Ваш CSS и Javascript-код должны быть возможно, но вы можете отслеживать исключения, помещая их в отдельные файлы.

 

Заключительные рекомендации

Некоторые окончательные рекомендации должны быть сделаны вокруг папки и файла имена. Как правило, убедитесь, что вы используете строчные буквы в все имена папок и файлов. При использовании нескольких слов для указания файла или папка разделяет их дефисом (т.е. my-company-logo-small.png). Если вы следуете рекомендациям в этой статье, вы должны иметь возможность комбинировать множественные страницы, сохраняя вместе общие ресурсы и настраиваемый код Наконец, даже если вы не хотите использовать структура, рекомендуемая в этой статье, важно придерживаться условность. Это увеличит вашу производительность и, что более важно, сделают работу, которую вы легко понимаете другими.