Опыт разработки библиотеки UI компонентов от 1 до N - компонентов

внешний фреймворк
Опыт разработки библиотеки UI компонентов от 1 до N - компонентов

текст

Прошло 3 месяца с момента публикации первой статьи о библиотеке компонентов пользовательского интерфейса.В течение этого периода библиотека компонентов owl-ui постоянно обновлялась с разбросом времени.В настоящее время библиотека мобильных компонентов owl-ui была обновлена.3 категории(база, форма, всплывающий слой)9 компонентов(Кнопка, вкладки, ввод, выбор, переключатель, ящик, диалог, средство выбора, тост) для использования. В этой статье в основном описывается мой личный опыт разработки UI-компонентов за последние 3 месяца. Если вы хотите понять структуру проекта, вы можете прочитать предыдущую статью, а если вы хотите понять принцип реализации, вы можете прочитать исходный код.Все ссылки в конце статьи.

мы начинаем свсплывающий компонентговорить о

Предупреждение о нескольких изображениях впереди

Сначала посмотрите на визуализацию.

Когда я решаю написать компоненты, я сначала выбираю часть всплывающего слоя. Зачем? Я перечисляю следующие пункты.

  1. Высокая общность и возможность повторного использования.
  2. Высокая совместимость.
  3. Быстрая доставка, повысить чувство достижения.

Поговорим о первом пункте:Высокая общность и возможность повторного использования

Поскольку я очень глуп, мне нужно долго думать, прежде чем что-то делать, что сократит повторяющуюся работу в будущем. Например, при создании всплывающего слоя многие люди найдут общие точки вышеперечисленных компонентов. Да, они всепоказыватьилиСпрятать(ерунда). Затем мы анализируем его, в дополнение к отображению или скрытию, большинство из них имеютмаскирующий слойчасть. а такжеэффект анимацииТакже последовательно. Мы сначала абстрактны функции в соответствии с этими точками, как это сделать?

И в vue и меньшеmixinsпуть, согласноmixinsНам очень удобно извлекать общие черты в компонентах для достижения цели упрощения кода. Следующий код находится в компоненте всплывающего слояпоказыватьилиСпрятатьфункциональныйmixinsдокумент.

// src/common/mixins/visibility.js

const EVENT_TOGGLE = 'toggle'

export default {
  model: {
    prop: 'visible',
    event: EVENT_TOGGLE
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 100
    },
    maskStyle: {
      type: Object,
      default: () => {}
    },
    containerStyle: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      isVisible: false
    }
  },
  methods: {
    hide () {
      this.isVisible = false
    },
    show () {
      this.isVisible = true
    }
  },
  watch: {
    isVisible (val) {
      this.$emit('update:visible', val)
      this.$emit('callback', val)
      if (this.lockScroll) {
        document.body.style.overflow = val ? 'hidden' : ''
      }
    },
    visible: {
      handler (val) {
        this.isVisible = val
      }
    }
  },
  beforeDestroy () {
    this.lockScroll && (document.body.style.overflow = '')
  }
}

В основном делать что-то одно, согласноvisibleкомпонент атрибутивной оценкиэкспонатилиСпрятать.

Он используется следующим образом:

// 组件文件

<script>
import visibilityMixin from 'mixins/visibility'

export default {
    mixins: [ visibilityMixin ]
}
</script>

Кстати, использование меньшего количества миксинов в проекте, например проблема 1px.

// src/styles/common/border.less

.min-device-pixel-ratio(@scale2, @scale3) {
  @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
    transform: @scale2;
  }
  @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
    transform: @scale3;
  }
}

.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
  &::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border: 1PX @style @color;
    border-radius: @radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    @media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: @radius * 2;
      transform: scale(.5);
    }
    @media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: @radius * 3;
      transform: scale(.33);
    }
  }
}

.border-top-1px(@color: #DDD, @style: solid) {
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-top: 1Px @style @color;
    transform-origin: 0 0;
    .min-device-pixel-ratio(scaleY(.5), scaleY(.33));
  }
}

Эта функция может изменить цвет и тип линии, передав параметры.

Он используется следующим образом:

// src/styles/packages/dialog.less

@import "../common/border";

@dialog-prefix-cls: ~"@{css-prefix}dialog";

.@{dialog-prefix-cls} {
    ...
    &-btns {
        ...
        .border-top-1px(); // Here
    }
}

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

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

Абстрактно инкапсулируйте общедоступную часть во всплывающем слое, напримермаскирующий слой

// src/common/components/popup-mask.vue

<template>
  <div class="popup-mask"
       :style="{ ...maskStyle, zIndex: zIndex - 1 }"
       @click.stop.prevent="handleMask"></div>
</template>

<script>
export default {
  props: {
    name: String,
    maskStyle: Object,
    zIndex: Number
  },
  methods: {
    handleMask (event) {
      this.$emit('click', event)
    }
  }
}
</script>

Второй момент:Высокая совместимость

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

Что касается мобильных устройств, некоторые продукты особенно любят менять дизайн пользовательского интерфейса, особенно страницы с частями форм.Сегодня продукту не нравится маленький размер шрифта, но завтра может показаться, что размер шрифта слишком велик, сегодня поле ввода изменил на закругленные углы, а завтра мне нравятся прямые углы. . Я думаю, что горизонтальная раскладка хороша сегодня, может быть, завтра я попробую вертикальную раскладку. Продукт считает, что это не имеет значения, если он изменится таким образом, но если в проекте используется библиотека компонентов пользовательского интерфейса, после модификации код слишком избыточен. Это все для лучшего взаимодействия с пользователем, и это можно понять медленно. В нескольких мобильных проектах после этого библиотека компонентов пользовательского интерфейса практически не использовалась в части формы. Впрочем, ограничений на всплывающий слой не так уж и много, насколько я знаю, самый унифицированный продукт внутри продукта — это всплывающий слой. Если одноклассник хочет использоватьowl-uiЕсли часть всплывающего слоя файла отображается, вы можете уверенно использовать ее и поддерживать загрузку по требованию.

Третий пункт:Быстрые поставки, повысить их чувство выполненного долга

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

существуетВсплывающий слойкомпонент,mixinsПосле того, как это сделано, кактост, диалог, ящикКомпонент остается только с API-частью дизайна. а такжеpickerкомпоненты основаны наdrawerКомпоненты для реализации только контентной части. когдаpickerРеализация компонента завершена, и формаselectКомпоненты также готовы. Просто сказать, но не сложно сделать.

Наконец, при использовании компонента всплывающего слоя я хочу использовать его в виде вызовов API. Здесь я позаимствовал у cube-uivue-create-api, но так как некоторые методы мне не подходят, я внес небольшое изменение и позаимствовал (скопировал) его в свою библиотеку.

Например, компонент Toast, метод использования, указанный на официальном сайте, выглядит следующим образом:

const toast = this.$createToast({
    time: 1000,
    txt: 'Toast time 1s'
})
toast.show()

Я ленивый человек, для меня использовать напоминание о сообщении, чтобы написать так много, я чувствую себя очень раздражающим, поэтому я вowl-uiсредняя ручкаvue-create-apiПосле небольшой модификации,ToastОн используется следующим образом:

this.$toast('欢迎光临')

Гораздо круче.

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

Эпилог

Я написал библиотеку компонентов для двух целей. Первый пункт может помочь мне реорганизовать систему знаний Vue, понять свои недостатки, постоянно преодолевать трудности и позволить себе расти. Второй момент — встретить больше друзей в кругу и улучшить свои знания. Я буду продолжать обновлять и повторятьowl-uiБиблиотека компонентов, добро пожаловать, друзья, которым нравятся технологии, чтобы сделать больше предложений. Наконец прикрепленДоктор Ву ЦзюньСказав это, эта фраза принесла мне пользу на всю оставшуюся жизнь.

То, что достигается от 0 до 50, зависит от здравого смысла, от 50 до 90 зависит от техники, а от 90 до 100 зависит от искусства. Чтобы достичь 90 баллов, мы можем добиться этого упорным трудом, а сможем ли мы добиться большего, это зависит от человека.

Связь

Опыт разработки библиотеки UI компонентов от 0 до 1

github

домашняя страница owl-ui

vue-create-api изменить версию

схема меньше версии 1px

Желаю успехов в работе

Дэн Вэньбинь

20 мая 2019 г.

Категории