it-swarm.com.ru

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

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

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

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

Но это сложнее, когда я использую много библиотек JavaScript и плагин CSS. Плагин Javascript поставляется с собственным файлом .js, а иногда и с собственным файлом .css.

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

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

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

88
Willy Lazuardi

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

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

Ваш проект

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

  • appcropolis-проект
    • мой-index.html

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

Полный ">
  • appcropolis-проект
    • ресурсы
    • поставщиков
    • мой-index.html

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

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

  • appcropolis-проект
    • ресурсы
      • CSS
      • JS
      • изображения
      • Данные
    • поставщиков
    • мой-index.html

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

  • appcropolis-проект
    • ресурсы
      • CSS
        • сине-тема
          • background.png
        • изображения
          • background.png
        • сине-theme.css
        • мой-index.css
      • JS
        • мой-index.js
        • мой контактирующие-info.js
      • изображения
        • продукты
          • computer.jpg
          • cellphone.png
          • printer.jpg
        • мой-компания-логотип-small.png
        • мой-компания-логотип-large.png
      • Данные
        • некоторые-data.json
        • более-data.xml
        • стол-data.csv
        • экстра-data.txt
    • поставщиков
      • JQuery
        • изображения
          • ajax-loader.gif
          • иконки-18-white.png
        • jquery.min.js
        • jquery.mobile-1.1.0.min.css
        • jquery.mobile-1.1.0.min.js
      • некоторые-CSS-библиотека
      • некоторые-plugin.jquery
    • мой-index.html
    • мой контакт-info.html
    • мой-products.html

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

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

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

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

122
Anant Dabhi
 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

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

9
Akhlesh