The original

The open source project, Better scroll by Huang Yi, is quite good, but it always feels inconvenient to use. To understand why, it’s worth digging a little deeper. Due to space reasons, this article will only give a brief overview of the source code, and the implementation will be analyzed later.

Better-scroll version is 2.0.5.

The overall architecture

cd packages && tree -L 1

├─ Better - Scroll ├─ Core - Infinity ├─ mouse- Wheel ├─ obseve-dom ├─ pull-down ├─ Pull Up Heavy Exercises ── Scroll Bar Heavy Exercises ── Shared-Utils Heavy Exercises ── Slide Heavy Exercises ── Blues Heavy Exercises ── zoomCopy the code

The plugable architecture is adopted, core is the socket, infinity/mouse-wheel is the plug-in.

better-scroll

Let’s look at the implementation under the better-Scroll folder.

import BScroll from '@better-scroll/core'
import MouseWheel from '@better-scroll/mouse-wheel'
// ...

export {
  createBScroll,
  BScrollInstance,
  Options,
  CustomOptions,
  TranslaterPoint,
  MountedBScrollHTMLElement,
  Behavior,
  Boundary,
  CustomAPI
} from '@better-scroll/core'

export {
  MouseWheel,
  // ...
}

BScroll.use(MouseWheel)
// ...

export default BScroll

Copy the code

On the whole, it serves as a unified export. Pay attention to the use of bscroll.use (), which indicates that this package has complete plug-in capability. Of course, the overall volume is too large.

core

This is the core code of Better Scroll, bearing the core scroll capability of Better Scroll.

Core source code structure

cd packages/core && tree -L 3 -I ‘__mocks__|__tests__’

SRC ├─ Bsc.ts ├── instance.Ts ├─ Options.Ts ├─ animater │ ├─ animation.ts │ ├─ base.ts │ ├─ Transition ├── bass exercises ── bass Exercises ── bass Exercises ── bass Exercises ── bass Exercises │ ├─ ├─ bass exercises - - Bass Exercises - - Bass Exercises - - Bass Exercises Compare the ts └ ─ ─ typesHelper. TsCopy the code

Core source entry

// index.ts

import { BScroll } from './BScroll'

export { BScrollInstance } from './Instance'
export { Options, CustomOptions } from './Options'
export { TranslaterPoint } from './translater'
export { MountedBScrollHTMLElement } from './BScroll'
export { Behavior, Boundary } from './scroller/Behavior'
export { createBScroll, CustomAPI } from './BScroll'

export default BScroll

Copy the code

You can see that the core code is located in bscroll.ts, which exports the BScrollConstructor class

// BScroll.ts
export class BScrollConstructor<O = {} >extends EventEmitter {
  static plugins: PluginItem[] = []
  static pluginsMap: PluginsMap = {}
  scroller: Scroller
  options: OptionsConstructor
  hooks: EventEmitter
  plugins: { [name: string]: any }
  wrapper: HTMLElement
  content: HTMLElement
  [key: string]: any

  static use(ctor: PluginCtor) {}
  constructor(el: ElementParam, options? : Options & O) {}
  init() {}
  refresh() {}
  enable() {}
  disable() {}
  destroy() {}
  eventRegister() {}
  // ...
}

Copy the code

Note that BScrollConstructor inherits EventEmitter, which resides in the shared-utils folder and is a self-implemented event class for event registration and listening, as explained below.

The plug-in

According to the source code in Core, a Better-Scroll plug-in must include a static attribute called pluginName, which is used as a unique identifier for the plug-in. Of course, this article will not focus on the implementation of plug-ins, interested partners can do their own research.

export default class MouseWheel {
  static pluginName = 'mouseWheel'
}
Copy the code

shared-utils

This is some common tools, will be combined with the source code to enjoy together.

summary

So now we should have a clear understanding of the basic architecture of Better-Scroll. Core, as the core part of scroll, plays an important role. The next article will end up analyzing the source code under the directory ~