Skip to content

Latest commit

 

History

History
167 lines (143 loc) · 7.46 KB

Файловая-структура.md

File metadata and controls

167 lines (143 loc) · 7.46 KB
Raw

Файловая структура

В общем случае структура каталогов и файлов может выглядеть следующим образом:

app/
  ├── bemer_components/
  |     ├── modal/
  |     |     ├── index.html
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     ├── top_navbar/
  |     |     ├── index.html.slim
  |     |     ├── bemhtml.slim
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     └── ...
  └── ...

Название каталога это название компонента, которое будет использоваться в представлениях (views) и/или хелперах (helpers) приложения. Каталог может содержать любые файлы (технологии) которые необходимы для компонента, например такие, как js, css, md и т.д.

Соглашения о файлах (технологиях):

  1. Каталог обязательно должен содержать индексный файл для технологии HTML (это может быть: index.html, index.html.slim, index.html.erb и т.д.), который описывает структуру компонента, используя для этого любой шаблонизатор (ERB, Slim, HAML и др.) или только HTML код.

  2. Если индексный файл технологии HTML для создания структуры (дерева) компонента использует хелпер define_component, тогда каталог может содержать индексный файл для шаблонов по умолчанию (технология bemhtml), он должен называться bemhtml с обязательным указанием шаблонизатора например: bemhtml.erb, bemhtml.slim и т.д.

  3. Все остальные технологии (js, css, md и т.д.) считаются дополнительными и их можно добавлять по мере необходимости, имена файлов могут быть любыми но для единообразия и удобства лучше использовать index в качестве имени:

    В случае если используется Sprockets, тогда подключение JS и CSS файлов компонента может быть таким:

    # Файл application.coffee
#= require modal
    // Файл application.js
//= require modal
    // Файл application.css или application.scss
//= require modal

    Возможно всё-таки появится поддержка индексных файлов и у SASS.

    При использовании Webpacker для JavaScript также можно не указывать index.js:

    import 'modal'

Структуру каталогов можно организовывать по-разному в зависимости от вида приложений и решаемых задач.

Пример №1

Компоненты разделены для использования в разных частях приложения, пользовательской (user), административной (admin) и общие (common) можно использовать/переопределять везде:

app/
  ├── bemer_components/
  |     ├── common/
  |     |     ├── modal/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── admin/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── user/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     └── ...
  └── ...

Пример №2

Приложение, в котором компоненты разделены для поддержки различных устройств:

app/
  ├── bemer_components/
  |     ├── common/
  |     |     ├── modal/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── desktop/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     ├── touch_pad/
  |     |     ├── top_navbar/
  |     |     |     ├── index.html.slim
  |     |     |     ├── bemhtml.slim
  |     |     |     ├── index.js
  |     |     |     ├── index.scss
  |     |     |     └── ...
  |     |     └── ...
  |     └── ...
  └── ...

Пример №3

Альтернативный способ структуры каталогов и файлов для поддержки различных устройств в приложениях начиная с Rails 4.1 это использовать Variants:

app/
  ├── bemer_components/
  |     ├── modal/
  |     |     ├── index.html.slim
  |     |     ├── index.html+phone.slim
  |     |     ├── index.html+tablet.slim
  |     |     ├── bemhtml.slim
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     ├── top_navbar/
  |     |     ├── index.html.slim
  |     |     ├── index.html+phone.slim
  |     |     ├── index.html+tablet.slim
  |     |     ├── bemhtml.slim
  |     |     ├── index.js
  |     |     ├── index.scss
  |     |     └── ...
  |     └── ...
  └── ...