Рекомендуется организовать структуру папок Javascript Library & CSS [закрыто]

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

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

ваш Проект

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

• appcropolis-project
• мой индекс.HTML-код

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

полный">

• appcropolis-project
• ресурсы
• поставщики
• мой индекс.HTML-код

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

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

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

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

• appcropolis-project
• ресурсы
• css
• сине-тема
• фон.png
• изображения
• фон.png
• сине-тема.css
• мой индекс.css
• js
• мой индекс.js
• my-contact-info.js
• изображения
• продукты
• компьютер.jpg
• телефон.png
• принтер.jpg
• мой-компания-Логотип-маленький.png
• мой-компания-Логотип-большой.png
• данные
• некоторых-данных.json
• больше-данных.xml
• таблицы-данные.csv
• дополнительные сведения.txt
• поставщики
• jquery
• изображения
• ajax-загрузчик.gif
• иконы-18-белый.png
• jquery.минута.js
• jquery.мобильный-1.1.0.минута.css
• jquery.мобильный-1.1.0.минута.js
• some-css-library
• некоторые-плагин.jquery
• мой индекс.HTML-код
• my-contact-info.HTML-код
• мои продукты.HTML-код

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

Окончательные Рекомендации

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

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