Выпущен BetterScroll 2.0: продолжайте совершенствоваться, идите с вами

внешний интерфейс Открытый исходный код

BetterScrollС момента выхода версии v1 прошло более двух лет, за это времяBetterScrollКак во внутреннем бизнесе нашей компании, так и в сообществе он выдержал множество сценических тестов, а также добавил много новых функций. Будь то наша внутренняя библиотека компонентов с открытым исходным кодомcube-uiили внутри сообществаmpx,taro,vue-better-scrollНижний уровень компонентов также зависит от реализации BetterScroll. почему все хотят попробоватьBetterScroll, одна из них — хорошая система событий, другая — отличная возможность прокрутки, а третья охватывает более распространенные сценарии прокрутки на мобильных терминалах.

v1 оценки

  • выпускать30Несколько версий
  • Суммарная обработка600+ issues
  • Ежемесячные загрузки npm50000
  • Накопительная звезда12600несколько
  • github 40000Несколько зависимостей репозиториев

BetterScrollБыть предварительнымiscrollВдохновленный , текущее количество звезд превзошло количество звезд предшественников. iscroll прекратил техническое обслуживание в 2017 году, но мы по-прежнему поддерживаем BetterScroll, и нас вдохновило и подтолкнуло большое количество бизнес-сценариев и мнение сообщества.

Почему v2

Первоначальное намерение сделать версию v2 связано с потребностью сообщества:

  • Может ли BetterScroll поддерживать загрузку по требованию?

Этот вопрос очень хорош, и он также указывает на недостатки версии v1, потому что для версии v1 все функции реализованы с помощью опции options и с помощью методов прототипа класса BScroll и расширения.

Давайте взглянем на часть кода для v1:

// 节选 BetterScroll v1 部分源码
BScroll.prototype._init = function (options) {
  this._iniExtFeatures()
}

BScroll.prototype._iniExtFeatures = function (options) {
  if (this.options.snap) {
    this._initSnap()
  }
  if (this.options.scrollbar) {
    this._initScrollbar()
  }
  if (this.options.wheel) {
    this._initWheel()
  }
  // ... 省略后续代码
}

Таким образом, ответ на вопрос о нагрузке по требованию, конечно,не можем.

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

Конечно, нельзя сказать, что реализация версии v1 плохая, это именно история развития библиотеки классов.простая сценаподдерживатьМногофункциональная сцена, наконец, чтобыПодпакет и реализация подключаемого модуля, BetterScroll 2.0 родился.

что сделал v2

BetterScroll 2.0 принятплагинархитектурный дизайн. Являясь самой маленькой единицей прокрутки, CoreScroll предоставляет богатыймероприятиетак же каккрюк, остальные функции расширены различными плагинами, что сделает BetterScroll более гибким и разделит разные сценарии. Ниже приведена общая схема архитектуры:

架构图

В проекте используется метод организации монорепозиториев, каждый плагин представляет собой пакет npm, а код написан на TypeScript, в то же время мы также широко используем преимущества TypeScript внутри, о чем мы поговорим позже. Таким образом, для реализации базового требования прокрутки v2 код выглядит следующим образом:

import BScroll from '@better-scroll/core'

const bs = new BScroll('.wrapper', {})

За исключением введения пакета, все остальное точно такое же, как и в v1.

Ниже последовательно представлены функции различных плагинов.

плагин

Возможности 1.x будут реализованы в виде плагинов.плагинДизайн полезен не только для реализациинагрузка по требованию, также очень подходит для более позднего итеративного обновления собственной библиотеки, уменьшая вторжение в основную логику. Плагины используются примерно так же. разделен напредставлять——регистр——параметры конфигурациитри шага. Ниже сpulldownПлагины например.

import BScroll from '@better-scroll/core'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullDown)

// pullDownRefresh 可以配置为 true
const bs = new BScroll('.wrapper', {
  pullDownRefresh: true
})

// or pullDownRefresh 也可以配置为选项对象
const bs = new BScroll('.wrapper', {
  pullDownRefresh: {
    threshold: 50,
    stop: 30
  }
})

Давайте посмотрим на все коллекции плагинов в версии v2:

  • pulldown

    Реализуйте эффект обновления имитации выпадающего приложения.

  • pullup

    Реализуйте эффект имитации загрузки приложения.

  • movable

    Имитация движимого вида апплета WeChat.

    新增于 v2 版本，来源于社区对我们提的需求

  • slide

    Карта фокуса карусели.

    v2 对 slide 底层进行重构：
  1. 支持 autoplay 配置项;
  2. 友好响应 resize 事件;
  3. 支持在 loop 模式下动态添加 slidePage。
  4. 添加 `slideWillChange` 事件，支持焦点实时更改
注意：实例化 slide 的 options 配置项不再是 `snap`，而是 `slide`

  • zoom

    Картинка увеличивается и уменьшается.

    v2 对 zoom 进行重构：
  1. 支持以某一个原点进行缩放；
  2. 精确派发 beforeZoomStart、zoomStart、zooming、zoomEnd 等事件
     并且暴露当前 scale 供用户消费。

  • picker

    Имитация компонента выбора iOS.

  • scrollbar

    Настраиваемая полоса прокрутки.

  • mouse-wheel

    Взаимодействие через колесико мыши.

    v2 对 mouse-wheel 进行重构：
  1. 搭配 picker；
  2. 搭配 pulldown；
  3. 搭配 pullup；

  • infinity

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

  • nested-scroll

    Координация двухуровневой вложенной прокрутки BetterScroll.

    于 v2 版本新增，解决横向套横向，竖向套竖向的双层嵌套滚动的协调问题。

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

TypeScript

Для более дружественного опыта разработки мы выбрали TypeScript.Как восходящая звезда, TypeScript, естественно, имеет много преимуществ.Конечно, в динамическом языке Javascript и Javascript объектно-ориентированном программировании использование нами TypeScript при рефакторинге BetterScroll 2.0 можно охарактеризовать как повороты и получается, но мы все равно преодолеваем все трудности.В нашей библиотеке с классом как основным телом проектирования архитектуры мы полностью используем преимущества TypeScript.В качестве примера возьмем плагин выпадающего списка.

  • Плагины не загружаются

    Плагин не загружен, приглашение для pullDownRefresh при передаче параметров отсутствует, и нет приглашения для метода autoPullDownRefresh, введенного подключаемым модулем раскрывающегося списка в экземпляре bs.

  • Загрузить плагин

    При загрузке подключаемого модуля раскрывающегося списка появляется подсказка параметров, соответствующая этому подключаемому модулю, а экземпляр bs также имеет подсказку, соответствующую методу autoPullDownRefresh. В этом прелесть TypeScript.

Такая подсказка очень крутая, как для пользователей, так и для наших внутренних разработчиков. Поскольку это круто, все больше людей будут пробовать BetterScroll.

Документация

В версии документации v1 есть много недостатков, и мы получили много отзывов от сообщества.После использования предложений сообщества мы расширили возможности уценки на основе VuePress, поддерживая такие функции, как примеры, коды, QR коды и копирование, которые удобны для всех.Вы можете легко просмотреть и отладить код на ПК или мобильном телефоне. Конечно, если вы хотите отлаживать примеры, вы можете клонировать репозиторий и выполнять его напрямую.yarn vue:devВот и все.

А чтобы удешевить некоторые «трудности» при использовании BetterScroll, мы также разработалиFAQверсии, вы также можете объединить классические проблемы, с которыми вы сталкиваетесь здесь, с помощью PR.

пойти с тобой

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

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

Сводное планирование

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

  1. Идеальный одиночный тест и функциональный тест
  2. Оптимизируйте пример кода и документацию, чтобы упростить начало работы.
  3. Существующая оптимизация плагинов и дополнительная поддержка плагинов, таких как привязки клавиш, полноэкранные переходы сцен и многое другое.
  4. Предоставьте пример версии реакции

Если вы заинтересованы в BetterScroll или воспользовались преимуществами BetterScroll, поставьте нам звезду,GitHub.com/US ТБ Хуан И….

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

Адрес Гите:

Адрес гитхаба:

Пример QR-кода:

示例二维码

Категории