BetterScroll 2.0 发布：精益求精，与你同行

BetterScroll v1 版本发布至今已经两年多，这期间 BetterScroll 不管是在咱们公司内部的业务以及社区内，经受住了大量的场景考验，同时也新增了很多特性。不管是咱们内部开源组件库的 cube-ui，仍是社区内的 mpx、taro、vue-better-scroll 的组件底层也都是依赖 BetterScroll 实现。为何你们都愿意尝试 BetterScroll，其一是良好的事件系统，其二是优秀的滚动体验，其三是涵盖了较多的移动端常见滚动场景。

v1 的成绩

• 发布 30 多个版本
• 累计处理 600 多个 issues
• npm 月下载量 5 万
• 累计 star 12600 多个
• github 4 万多个 repos 依赖

BetterScroll 是受前辈 iscroll 的启发而来，目前 star 数量也已经超过前辈。iscroll 在 2017 年已经中止了维护，但咱们依然在维护着 BetterScroll，而且从大量的业务场景以及社区的声音中获得了启发和沉淀。

为何作 v2

作 v2 版本的初衷源于社区的一个需求：

• BetterScroll 能不能支持按需加载？

这个问题提的很是好，也一针见血地指出 v1 版本的缺陷，由于对于 v1 版本，全部的 feature 都是经过 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 版本没法作到按需加载，而且随着功能扩展，用户被迫加载许多冗余代码，由于对于用户来讲，绝对多数场景只须要其中的几个 feature。

固然咱们也不能说 v1 版本的实现很差，这偏偏是一个类库的演化史，从简单的场景到支持多功能场景，最后到分包而且实现可插拔，BetterScroll 2.0 也所以得以诞生。

v2 作了什么

BetterScroll 2.0 采用了插件化的架构设计。CoreScroll 做为最小的滚动单元，暴露了丰富的事件以及钩子，其他的功能都由不一样的插件来扩展，这样会让 BetterScroll 更加的灵活，也能解耦不一样的场景。下面是总体的架构图：

项目采用的是 monorepos 的组织方式，每一个插件都是一个 npm package，代码都是使用 TypeScript 来编写，同时咱们内部也是极大的利用了 TypeScript 的优势，这个会在后面讲到。所以，对于 v2 实现一个基本的滚动需求，代码以下：

import BScroll from '@better-scroll/core'

const bs = new BScroll('.wrapper', {})
复制代码

除了 package 的引入，其他与 v1 的使用方式如出一辙。

下面逐一介绍一下各类插件的功能。

插件

1.x 的 feature 都将以 plugin 的形式实现，这种插件化的设计不只有益于实现按需加载，也很是适合自身库的后期迭代升级，减小对主逻辑的侵入。插件的使用方式都大同小异。分为引入——注册——配置 options 三个步骤。下面以 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

  实现仿 App 下拉刷新效果。

• pullup

  实现仿 App 上拉加载效果。

• movable

  仿微信小程序 movable-view。

  新增于 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 picker 组件。

• scrollbar

  定制化滚动条。

• mouse-wheel

  经过鼠标滚轮进行交互。

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

• infinity

  实现列表的无限滚动加载，对于大量数据渲染有显著效果。

• nested-scroll

  协调双层 BetterScroll 嵌套滚动行为。

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

从上述插件来看，得益于插件化的架构设计，BetterScroll 能够基于不少种滚动的场景延伸出更多的插件，因为插件是在不一样的 npm 包中，对于用户来讲，再也没有被迫加载冗余代码的心智负担。

TypeScript

为了更友好的开发体验，咱们选择了 TypeScript，TypeScript 做为冉冉上升的新星，天然存在不少的优势，固然对于 Javascript 动态语言以及 Javascript OOP 编程中，咱们在 BetterScroll 2.0 的重构当中的 TypeScript 使用可谓是一波三折，不过咱们依旧排除了万难，在咱们这种以 class 类做为架构设计主体的库里面，充分的使用了 TypeScript 优势，咱们以 pulldown 插件为例子。

• 不加载插件

  不加载插件，传入 options 时也没有 pullDownRefresh 的提示，bs 实例上没有 pulldown 插件注入的 autoPullDownRefresh 方法的提示。

• 加载插件

  加载 pulldown 插件，有对应插件的 options 提示，bs 实例也有对应 autoPullDownRefresh 方法的提示，这就是 TypeScript 的魅力。

这种提示不论是对于用户仍是咱们本身内部的开发者，都很爽。由于爽，才会有更多的人来尝试 BetterScroll。

文档

v1 版本的文档存在不少不足，也收到了社区不少的反馈，在汲取了社区的建议以后，咱们基于 VuePress 拓展了 markdown 的能力，支持示例、代码、二维码、复制等功能于一体，方便你们可以在 PC 或者手机都能方便预览、调试代码。固然，你们若是想要调试 examples，能够 clone repo，直接执行 yarn vue:dev 便可。

并且为了下降你们在使用 BetterScroll 的时候遇到一些 “疑难杂症” 的成本，咱们还开辟了一个 FAQ 版本，你们也能够把本身遇到的经典问题经过 PR 的方式聚集在这里。

与你同行

以上十多个插件，可能也只是 BetterScroll 的冰山一角，可能对于你的场景，能够抽象出新的 BetterScroll 插件，所以很是欢迎你一块儿参与到 BetterScroll 生态的共建当中，抽象出更多的插件。咱们已经为你们准备了如何写一个 BetterScroll 插件的教程。完整的 github repo 在这，你也能够经过预览地址看看效果。

固然，不仅是插件，包括测试、示例、文档，只要是好的建议，咱们均可以一块儿来完善 BetterScroll 生态。

总结规划

BetterScroll 仍然是一个成长中的项目，在这个过程当中，咱们也在不断的思考，不断的巩固 BetterScroll，同时也很是欢迎社区的同窗一块儿参与。后续咱们会朝着如下方向继续努力：

1. 单测、功能测试完善
2. 优化示例代码和文档，下降上手难度
3. 现有插件优化以及更多的插件支持，如 keyBindings，全屏场景转换等等
4. 提供 react 版本示例

若是你对 BetterScroll 感兴趣或者曾经受益于 BetterScroll，欢迎给咱们一个 Star，github.com/ustbhuangyi…。

最后附上文档、示例，欢迎体验&使用：

Gitee 地址：

• BetterScroll 文档
• BetterScroll 示例

GitHub 地址：

• BetterScroll 文档
• BetterScroll 示例

示例二维码：