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 示例

示例二維碼：