Резюме разработки компонента Vue

внешний интерфейс Ресурсы изображений Icon Vue.js

Компонентизация — это процесс уточнения сущности в процессе долгосрочного развития, основные цели которого заключаются в следующем:

  1. Улучшить возможность повторного использования
  2. разъединение
  3. Повышение эффективности разработки в будущем

Итак, как добиться этого эффекта, мы можем сделать это шаг за шагом в несколько шагов.

Ниже приведены в основном идеи, если вы хотите получить код напрямую, вы можете начать войнуГитхаб ElementUIперейти к исходному коду

Определение компонента

Компоненты можно разделить на две категории:

  • Основные компоненты: напр.ElementUI
  • Бизнес-компонент: он состоит из основных компонентов или бизнес-компонентов и тесно связан с бизнесом или даже тесно связан с ним.

Размер частиц двух компонентов

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

Трехкомпонентный интерфейс

  1. Компоненты Vue в основном настраиваются через свойства, а затем контролируют функциональные изменения компонентов. Поэтому перед разработкой компонента мы должны четко определить, что представляет собой переменная, и дать понять, что компоненту нужен открытый интерфейс.
  2. Нам нужно понять, какова основная функция каждого компонента, которую можно рассмотреть с помощью шаблона проектирования, такого как Единая ответственность. Основная функция компонента не может быть изменена, что также необходимо для обратной совместимости интерфейса.
  3. Для бизнес-компонентов можно напрямую привязать некоторые данные, которые не меняются круглый год с UI, чтобы удалить некоторые интерфейсы. Вам не нужно беспокоиться о связи.Предпосылкой разделения является необходимость быть отделенным.

Четыре компонента развития

1 спецификация пользовательского интерфейса

Спецификации пользовательского интерфейса — это физическая основа для разработки компонентов, и вы должны знать, что делать, прежде чем сможете это сделать. Спецификация пользовательского интерфейса должна иметь четкие семантические определения и понятные аннотации для каждого визуального элемента (длина, ширина, отступы, поля, закругленные углы, цвет, шрифт, размер шрифта, граница, значок, тень) всего набора компонентов, чтобы -конечные инженеры могут делать до тех пор, пока не будет закона, которому нужно следовать.

2 Развитие

举例：
1.sass或less来写样式
2.重置样式文件和样式的公共变量文件（将视觉元素翻译成代码中的常量形成的文件），这是根据自己的UI规范来决定的
3.ES6的哪些特性不使用，用哪一个stage的babel来翻译
4.需要引入的第三方包有哪些，这个也决定了最后打包出来组件js的大小
5.工程的目录结构

3 упаковки

Для Vue мы обычно используем webpack. Конкретная конфигурация здесь подробно не объясняется, вы можете обратиться кДля начала работы с Webpack этого достаточно, Существует также быстрый способ внесения изменений через шаблон проекта, сгенерированный Vue-cli. Далее нам нужно определить нашу стратегию упаковки:

举例：
1.所有的样式打到一个文件
2.有fonts则单独打出来
3.组件JS和VueJS不打在一起
4.非通用的第三方包需和组件打在一起

Пять лучших практик

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

用法.png
Тогда давайте посмотрим, как реализован код

<template>
  <span class="el-breadcrumb__item">
    <span class="el-breadcrumb__inner" ref="link" role="link">
      <slot></slot>
    </span>
    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
  </span>
</template>
<script>
  export default {
    name: 'ElBreadcrumbItem',
    props: {
      to: {},
      replace: Boolean
    },
    data() {
      return {
        separator: '',
        separatorClass: ''
      };
    },

    inject: ['elBreadcrumb'],

    mounted() {
      this.separator = this.elBreadcrumb.separator;
      this.separatorClass = this.elBreadcrumb.separatorClass;
      let self = this;
      if (this.to) {
        let link = this.$refs.link;
        link.setAttribute('role', 'link');
        link.addEventListener('click', _ => {
          let to = this.to;
          self.replace ? self.$router.replace(to)
            : self.$router.push(to);
        });
      }
    }
  };
</script>

Реквизиты — это два интерфейса, предоставляемые ElBreadcrumbItem, который является содержимым, упомянутым в третьем пункте выше.Значение интерфейса передается из родительского компонента. Давайте еще раз взглянем на ElBreadcrumb, который является кодовой реализацией родительского компонента.

Вот краткое объяснение inject: inject и provider приходят парами, что является новой функцией vue@2.2.0. С помощью этого метода свойства в компонентах, которые обеспечивают предоставление, могут быть вызваны напрямую, а сводка — внедрение зависимостей (DI).

<template>
  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ElBreadcrumb',

    props: {
      separator: {
        type: String,
        default: '/'
      },
      separatorClass: {
        type: String,
        default: ''
      }
    },

    provide() {
      return {
        elBreadcrumb: this
      };
    },

    mounted() {
      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
      if (items.length) {
        items[items.length - 1].setAttribute('aria-current', 'page');
      }
    }
  };
</script>

Слот на самом деле зарезервирован для ElBreadcrumbItem.На самом деле, ElBreadcrumb не использует никакого пользовательского интерфейса.Он также предоставляет два интерфейса через свойства.Значения этих двух передаются пользователем. Мы видим, что разделителем по умолчанию является «/», если разделитель, который вы передаете через свойство в ElBreadcrumbItem, равен «+», то разделитель на каждом уровне хлебных крошек также будет «+», обратите внимание Предоставить в коде соответствует введенному выше. Последнее, что нужно сделать, это сделать компонент регистрируемым

import ElBreadcrumb from './src/breadcrumb';

/* istanbul ignore next */
ElBreadcrumb.install = function(Vue) {
  Vue.component(ElBreadcrumb.name, ElBreadcrumb);
};

export default ElBreadcrumb;

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

Суммировать

В этой статье кратко рассматриваются идеи разработки компонентов с акцентом на следующих предварительных условиях для разработки компонентов:

  • определить компоненты
  • Детализация разделов
  • Уточнить основной интерфейс компонента
  • Как определить стратегию упаковки и спецификацию пользовательского интерфейса

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

Категории