Kagol

1 Обзор

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

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

Я считаю, что большинство интерфейсных инженеров использовали библиотеки компонентов, такие какAnt Design,ElementUI, Мы очень хорошо знакомы с библиотекой компонентов, и наша командаDevUIбиблиотека компонентов.

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

2 Основные элементы интерфейса

С абстрактной точки зрения любой пользовательский интерфейс состоит из组件,数据а также交互состоит из.

2.1 Компоненты

Компоненты — это органы веб-страницы.

Концепцию компонентов следует отличать от концепции HTML-тегов. HTML-теги являются базовой единицей веб-страниц, а компоненты — это независимые единицы, основанные на HTML-тегах и содержащие определенные функции. Можно просто понять, что компоненты — это надмножество HTML. теги.

Внутренний пакет упакован в данные и взаимодействие, предоставляя необходимые интерфейсы другим компонентам для связи с другими компонентами.

2.2 Данные

Во фронтенд-разработке данные в основномJSONформат хранения и доставки.

2.3 Взаимодействие

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

На веб-страницах все взаимодействия отвечают на средствах событий.

Взаимодействие — это душа веб-страницы, а веб-страница, которая не может взаимодействовать, подобна высохшей реке, безжизненной.

Возможность повторного использования
Компонуемость
Масштабируемость

3.1 ReuSitive.

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

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

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

3.2 Композиционность

Компоненты можно комбинировать как строительные блоки, а объединенные компоненты имеют все функции подкомпонентов и становятся более мощными.

Комбинация может быть обернута в другие компоненты, может быть передана как параметр другого компонента.

3.3 Расширяемость

Существующие компоненты могут быть расширены для разработки более настраиваемых компонентов для удовлетворения потребностей бизнеса.

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

4 Связь между компонентами

4.1 Коммуникация снаружи внутрь

пройти черезpropsПередайте данные внутри компонента для использования самим компонентом или его подкомпонентами.

propsявляется неизменным:

Это означает, что мы не можем изменять внутри компонентаpropsпервоначальная стоимость
Это также означает, что только внешние входящиеprops

пройти черезrefrefСвойства, вы можете получить ссылку на экземпляр компонента, а затем получить данные и методы внутри компонента.
через обратные вызовы событий (например:click), через обратный вызов события можно передатьpropsПередайте функцию обратного вызова в компонент и передайте данные внутри компонента снаружи через обратный вызов

4.3 Двусторонняя связь

через глобальныйcontextспособ двусторонней связи.

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

4.4 Многотерминальная связь

Несколько компонентов могут взаимодействовать друг с другом посредством подписки на события.

Через настраиваемое событие (Custom Event) любой компонент может взаимодействовать с другими компонентами, используя режим публикации/подписки, добавляя события мониторинга и запуска к объекту события для достижения межкомпонентной связи.

5 случаев

Далее мы продемонстрируем, как использовать теорию строительных блоков для создания веб-страниц посредством разработки страниц сведений о рекламе.

Схема конструкции выглядит следующим образом:

5.1 Первый шаг: демонтаж строительных блоков

Распакуйте карту проекта в иерархическую структуру.

ChartBlock (компонент блока диаграммы)
DetailBlock (компонент блока детализации)
TableBlock (компонент табличного блока)

5.1.2 Промежуточные строительные блоки

Каждый большой блок можно разделить на несколько меньших блоков.
Некоторые из средних слоев представляют собой неразделимые атомарные строительные блоки, например:Button,Checkbox
Некоторые из них представляют собой составные строительные блоки, состоящие из атомарных строительных блоков, например:DateRangePicker,Table

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

Header
- Breadcrumb
- Button
- DateRangePicker
ChartBlock
- Tabs
- LineChart
- BarChart
DetailBlock
- Button
- List
TableBlock
- Checkbox
- Select
- Button
- Table

5.1.3 Основные строительные блоки

Нижние блоки представляют собой неразделимые атомарные блоки.

5.2 Второй шаг: строительные блоки

Иерархическая структура строительных блоков разработана, и следующим шагом является рассмотрение того, как создавать строительные блоки на каждом уровне.

В этом разделе будет написана серия статей, чтобы поделиться с вами тем, как сделать компоненты самостоятельно.

5.3 Третий шаг: строительные блоки

5.3.1 Верхний блок

<div class="ad-detail-container">
    <Header />
    <div class="content">
        <div class="chart-detail-block">
            <ChartBlock />
            <DetailBlock />
        </div>
        <TableBlock />
    </div>
</div>

один из них<div>

HeaderСоответствующий код:

<div class="header">
  <div class="breadcrumb-area">
    <div class="breadcrumb-current">gary audio</div>
      <div class="breadcrumb-from">
        From: 
        <d-breadcrumb class="breadcrumb" separator="">
          <d-breadcrumb-item href="http://www.qq.com">Campaign List</d-breadcrumb-item>
          <span class="breadcrumb-seprator">> </span>
          <d-breadcrumb-item href="http://www.qq.com">gary audio test</d-breadcrumb-item>
        </d-breadcrumb>
      </div>
    </div>
  </div>
  <div class="operation-area">
    <d-button icon="mail" class="flat" (click)="sendReportEmail()">Send Report Email</d-button>
    <d-date-range-picker (change)="changeDate()" />
  </div>
</div>

Следует отметить, что большинство атомарных компонентов здесь уже изготовлены (с использованиемDevUIБиблиотека компонентов), или вы можете создать свою собственную. Позже я напишу серию статей, чтобы поделиться с вами тем, как сделать компоненты самостоятельно.

ChartBlockСоответствующий код:

<div class="chart-block">
    <d-tabs [defaultActiveKey]="1">
        <d-tab-item tab="Ad performance" [key]="1">
            <d-line-chart></d-line-chart>
        </d-tab-item>
        <d-tab-item tab="Audience" [key]="2">
            <d-bar-chart></d-bar-chart>
        </d-tab-item>
    </d-tabs>
</div>

DetailBlockСоответствующий код:

<div class="detail-block">
    <div class="detail-header">
        <div class="detail-title">Ad detail</div>
        <div class="detail-operation">
            <d-button icon="edit" class="flat" (click)="edit()">Edit</d-button>
            <d-button icon="delete" class="flat" (click)="delete()">Delete</d-button>
            <d-button icon="eye" class="flat" (click)="preview">Preview</d-button>
        </div>
    </div>
    <d-list [data]="adDetail" [config]="detailConfig"></d-list>
</div>

TableBlockСоответствующий код:

<div class="table-block">
    <div class="table-operation-bar">
        <d-checkbox (change)="changeDelivery()">Has delivery</Checkbox>
        <d-select class="select-table-column" [defaultValue]="1" 
            (change)="select()">
            <d-select-option value="1">Performance</d-select-option>
            <d-select-option value="2">Customize</d-select-option>
        </Select>
        <d-button icon="export" (click)="exportData()">Export Data</d-button>
    </div>
    <d-table [dataSource]="adsList" [columns]="columns"></d-table>
</div>

Из-за недостатка места этот случай не включает интерактивные части, но в основном может объяснить основную идею теории строительных блоков.