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


110

Как вы организуете папку 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-плагины? Или еще где-нибудь?

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

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


храните CSS в той же папке, что и JS, если CSS относится к компоненту. То есть. у вас есть table.js, значит table.css рядом с ним в папке. Так вы не заблудитесь, пытаясь найти CSS,
Оливер Уоткинс,

Это зависит от масштаба проекта. вообще говоря, ИМХО, все проекты должны использовать средства запуска задач (NPM / GULP), поэтому у вас, вероятно, должна быть buildпапка и srcпапка.
vsync

Папки Css и Js - это современные стили и скрипты
Юша Алеайуб

Ответы:


140

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

Ваш проект

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

  • аппкрополис-проект
    • мой-index.html

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

  • аппкрополис-проект
    • Ресурсы
    • продавцы
    • мой-index.html

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

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

  • аппкрополис-проект
    • Ресурсы
      • css
      • JS
      • изображений
      • данные
    • продавцы
    • мой-index.html

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

  • аппкрополис-проект
    • Ресурсы
      • css
        • сине-тема
          • background.png
        • изображений
          • background.png
        • blue-theme.css
        • мой-index.css
      • JS
        • мой-index.js
        • мой-contact-info.js
      • изображений
        • товары
          • computer.jpg
          • cellphone.png
          • printer.jpg
        • my-company-logo-small.png
        • my-company-logo-large.png
      • данные
        • некоторые-данные.json
        • more-data.xml
        • таблица-данные.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
    • мой-index.html
    • my-contact-info.html
    • my-products.html

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

 

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

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

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

Источник: как организовать файлы HTML, CSS и Javascript


1
Привет, Анант. Не могли бы вы помочь мне со следующим вопросом: stackoverflow.com/questions/33837168/…
Максим Жуков

1
Куда бы вы поместили видео и аудио файлы? или пользовательские файлы шрифтов?
boblapointe

17
Вопиющий плагаизм
OneCricketeer

1
Папки Css и Js - это современные стили и скрипты
Юша Алеайуб

14
 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

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


но куда вы помещаете исходные файлы JS и минифицированные файлы?
Кокодоко

вы можете хранить в том же каталоге.
Ахлеш

4
Думаю, должны быть отдельные каталоги для исходного кода и распространения
Anoop D
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.