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

Как организовать папку js & css в веб-приложении?

моя текущая структура проекта выглядит так:

root/
  assets/
    js/
      lib/
    css/
    img/
  index.html

но это сложнее, когда я использую много javascript library & css plugin. Плагин Javascript поставляется со своим собственным .JS файл, а иногда и со своим собственным .файл CSS.

например, когда я использую jQuery с плагином JQueryUI, я помещаю jquery.js и jQuery-ui.js внутри каталога JS / lib. Но JQueryUI поставляется с собственным css файл. Где я должен поместить CSS из плагина javascript для лучшей практики? Я должен поместить их в папку lib, чтобы отличить мой CSS и JavaScript плагин для CSS? Или где-то еще?

Я знаю, что это личные предпочтения, но я просто хочу знать, как вы организовать ваши папки проекта.

спасибо заранее :)

2 ответов


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

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

ваш Проект

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

  • appcropolis-project
    • my-index.HTML-код

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

полный">
  • appcropolis-project
    • ресурсы
    • поставщики
    • my-index.HTML-код

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

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

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

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

  • appcropolis-project
    • ресурсы
      • в CSS
        • сине-тема
          • фон.формат PNG
        • изображения
          • фон.формат PNG
        • сине-тема.в CSS
        • my-index.в CSS

      • js
        • my-index.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
      • некоторые-css-библиотека
      • некоторые-плагин.в jQuery
    • my-index.HTML-код
    • my-contact-info.HTML-код
    • мои продукты.HTML-код

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

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

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

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


 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

вот как я организовал статические ресурсы моего приложения.