Структура смарт-компонента

Новый компонент размещается в директории src/smart/Название_компонента

Имя должно отображать суть смарт-компонента.

Структура смарт-компонента

📂 Имя компонента
  📂 scss
    📄 index.scss
  📂 js
    📄 events.js
    📄 parameters.js
  📂 template
    📂 default
        📄 events.js
        📄 index.html
        📄 styles.css
  📄 index.js
  📄 rule.js

Описание

📂 Имя компонента
  📄 index.js

• index.js - Основной класс компонента, наследуемый от суперкласса SmartComponent.
  Содержит в себе основную логику инициализации компонента, включая в себя не обязательные стили scss/index.scss и события js/events.js

📂 Имя компонента
  📄 rule.js

• rule.js - Правило для кеширования смарт-компонента

📂 Имя компонента
  📂 js
    📄 events.js
    📄 parameters.js

• events.js - Список событий смарт-компонента, компилируемый непосредственно во время сборки webpack
• properties.js - Параметры отображения смарт-компонента

📂 Имя компонента
  📂 scss
    📄 index.scss

• index.scss - Дополнительный список стилей, который компилируется во время сборки webpack

📂 Имя компонента
  📂 template
    📂 default
        📄 events.js
        📄 index.html
        📄 styles.css

• index.html - Список Html-элементов, компилируемые в последствии с помощью js-шаблонизатора Lodash
• events.js - События смарт-компонента, которые подключаются во время загрузки шаблона
• style.css - Стили смарт-компонента, которые подключаются во время загрузки шаблона

Изменить статью