共计 26381 个字符，预计需要花费 66 分钟才能阅读完成。
结尾
TypeScript曾经进去很多年了，当初用的人也越来越多，毋庸置疑，它会越来越风行，然而我还没有用过，因为首先是我的项目上不必，其次是我对强类型并不敏感，所以纯正的光看文档看不了几分钟就心不在焉，始终就被耽误了。
然而，当初很多风行的框架都开始用 TypeScript 重构，很多文章的示例代码也变成TypeScript，所以这就很难堪了，你不会就看不懂，所以好了，没得选了。
既然目前我的痛点是看源码看不懂，那不如就在看源码的过程中遇到不懂的 TypeScript 语法再去具体理解，这样可能比单纯看文档更无效，接下来我将在浏览 BetterScroll 源码的同时恶补TypeScript。
BetterScroll是一个针对挪动端的滚动库，应用纯 JavaScript，2.0 版本应用TypeScript 进行了重构，通过插件化将性能进行了拆散，外围只保留根本的滚动性能。
不便起见，后续 TypeScript 缩写为 TS，BetterScroll 缩写为BS。
BS的外围性能代码在 /packages/core/ 文件夹下，构造如下：
index.ts文件只用来对外裸露接口，咱们从 BScroll.ts 开始浏览。
入口类
interface PluginCtor {
pluginName: string
applyOrder?: ApplyOrder
new (scroll: BScroll): any
}interface接口用来定义值的构造，之后 TS 的类型查看器就会对值进行查看，下面的 PluginCtor 接口用来对 BS 的插件对象构造进行定义及限度，意思为须要一个必填的字符串类型插件名称 pluginName，? 的意思为可选，可有可不有的 ApplyOrder 类型的调用地位，找到 ApplyOrder 的定义：
export const enum ApplyOrder {
Pre = 'pre',
Post = 'post'
}enum的意思是枚举，能够定义一些带名字的常量，应用枚举能够清晰的晓得可选的选项是什么，枚举反对数字枚举和字符串枚举，数字枚举还有自增的性能，上述通过 const 来润饰的枚举称为常量枚举，常量枚举的特点是在编译阶段会被删除而间接内联到应用的中央。
回到接口，interface能够为类和实例来定义接口，这里有个 new 意味着这是为类定义的接口，这里咱们就能够晓得 BS 的插件主体须要是一个类，且有两个动态属性，构造函数入参是 BS 的实例，any代表任何类型。
再往下：
interface PluginsMap {[key: string]: boolean
}这里同样是个接口定义，[key: string]的属性称作索引签名，因为 TS 会对对象字面量进行额定属性查看，即呈现了接口里没有定义的属性时会认为是个谬误，解决这个问题的其中一个办法就是在接口定义里减少索引签名。
type ElementParam = HTMLElement | stringtype意为类型别名，相当于给一个类型起了一个别名，不会新建类型，是一种援用关系，应用的时候和接口差不多，然而有一些细微差别。
|代表联结类型，示意一个值能够是几种类型之一。
export interface MountedBScrollHTMLElement extends HTMLElement {isBScrollContainer?: boolean}接口是能够继承的，继承能从一个接口里复制成员到另一个接口里，减少可重用性。
export class BScrollConstructor<O = {}> extends EventEmitter {}<o = {}>，<>称为泛型，即能够反对多种类型，不限度为具体的一种，为扩大提供了可能，也比应用 any 谨严，<>就像 () 一样，调用的时候传入类型，<>里的参数来接管，<>里的参数称为类型变量，比方上面的泛型函数：
function fn<T>(arg: T): T {}
fn<Number>(1)示意入参和返回参数的类型都是 Number，除了<>，入参里的T 和返回参数类型的 T 能够了解为是占位符。
static plugins: PluginItem[] = [][]代表数组类型，定义数组有两种形式：
let list: number[] = [1,2,3]// 1. 元素类型前面跟上[]
let list: Array<number> = [1,2,3]// 2. 应用数组泛型，Array< 元素类型 >所以下面的意思是定义了一个元素类型是 PluginItem 的数组。
BS应用插件须要在 new BS 之前调用 use 办法，use是 BS 类的一个静态方法：
class BS {static use(ctor: PluginCtor) {
const name = ctor.pluginName
// 插件名称查看、插件是否曾经注册查看...
BScrollConstructor.pluginsMap[name] = true
BScrollConstructor.plugins.push({
name,
applyOrder: ctor.applyOrder,
ctor,
})
return BScrollConstructor
}
}use办法就是简略的把插件增加到 plugins 数组里。
class BS {constructor(el: ElementParam, options?: Options & O) {
super([// 注册的事件名称])
const wrapper = getElement(el)// 获取元素
this.options = new OptionsConstructor().merge(options).process()// 参数合并
if (!this.setContent(wrapper).valid) {return}
this.hooks = new EventEmitter([// 注册的钩子名称])
this.init(wrapper)
}
}构造函数做的事件是注册事件，获取元素，参数合并解决，参数解决里进行了环境检测及浏览器兼容工作，以及进行初始化。BS自身继承了事件对象，实例派发的叫事件，这里又创立了一个事件对象的实例 hooks，在BS 里为了辨别叫做钩子，普通用户更关注事件，而插件开发个别要更关注钩子。
setContent函数的作用是设置 BS 要解决滚动的 content，BS 默认是将 wrapper 的第一个子元素作为content`，也能够通过配置参数来指定。
class BS {private init(wrapper: MountedBScrollHTMLElement) {
this.wrapper = wrapper
// 创立一个滚动实例
this.scroller = new Scroller(wrapper, this.content, this.options)
// 事件转发
this.eventBubbling()
// 主动失焦
this.handleAutoBlur()
// 启用 BS，并派发对应事件
this.enable()
// 属性和办法代理
this.proxy(propertiesConfig)
// 实例化插件，遍历 BS 类的 plugins 数组挨个进行实例化，并将插件实例以 key：插件名，value：插件实例保留到 BS 实例的 plugins 对象上
this.applyPlugins()
// 调用 scroller 实例刷新办法，并派发刷新事件
this.refreshWithoutReset(this.content)
// 上面的用来设置初始滚动的地位
const {startX, startY} = this.options
const position = {
x: startX,
y: startY,
}
if (
// 如果你的插件要批改初始滚动地位，那么能够监听这个事件
this.hooks.trigger(this.hooks.eventTypes.beforeInitialScrollTo, position)
) {return}
this.scroller.scrollTo(position.x, position.y)
}
}init办法里做了很多事件，一一来看：
{private eventBubbling() {
bubbling(this.scroller.hooks, this, [
this.eventTypes.beforeScrollStart,
// 事件...
])
}
}
// 事件转发
export function bubbling(source,target,events) {
events.forEach(event => {
let sourceEvent
let targetEvent
if (typeof event === 'string') {sourceEvent = targetEvent = event} else {
sourceEvent = event.source
targetEvent = event.target
}
source.on(sourceEvent, function(...args: any[]) {return target.trigger(targetEvent, ...args)
})
})
}BS 实例的构造函数里注册了一系列事件，有些是 scroller 实例派发的，所以须要监听 scroller 对应的事件来派发本人注册的事件，相当于事件转发。
{private handleAutoBlur() {if (this.options.autoBlur) {this.on(this.eventTypes.beforeScrollStart, () => {
let activeElement = document.activeElement as HTMLElement
if (
activeElement &&
(activeElement.tagName === 'INPUT' ||
activeElement.tagName === 'TEXTAREA')
) {activeElement.blur()
}
})
}
}
}配置项里有一个参数：autoBlur，如果设为 true 会监听行将滚动的事件来将当前页面上激活的元素（input、textarea）失去焦点，document.activeElement能够获取文档中以后取得焦点的元素。
另外这里呈现了 as，TS 反对的数据类型有：boolean、number、string、T[]|Array<T>、元组、枚举 enum、任意 any、空 void、undefined、null、永不存在的值的类型 never、非原始类型 object，有时候你会确切的晓得某个值是什么类型，可能会比 TS 更精确，那么能够通过 as 来指明它的类型，这称作类型断言，这样 TS 就不再进行判断了。
{proxy(propertiesConfig: PropertyConfig[]) {propertiesConfig.forEach(({ key, sourceKey}) => {propertiesProxy(this, sourceKey, key)
})
}
}插件会有一些本人的属性和办法，proxy办法用来代理到 BS 实例，这样能够间接通过 BS 的实例拜访，propertiesConfig的定义如下：
export const propertiesConfig = [
{
sourceKey: 'scroller.scrollBehaviorX.currentPos',
key: 'x'
},
// 其余属性和办法...
]export function propertiesProxy(target,sourceKey,key) {sharedPropertyDefinition.get = function proxyGetter() {return getProperty(this, sourceKey)
}
sharedPropertyDefinition.set = function proxySetter(val) {setProperty(this, sourceKey, val)
}
Object.defineProperty(target, key, sharedPropertyDefinition)
}通过 defineProperty 来定义属性，须要留神的是 sourceKey 的格局都是须要能让 BS 的实例 this 通过 . 能拜访到源属性才行，比方这里的 this.scroller.scrollBehaviorX.currentPos 能够拜访到 scroller 实例的 currentPos 属性，如果是一个插件的话，你的 propertiesConfig 须要这样：
{
sourceKey: 'plugins.myPlugin.xxx',
key: 'xxx'
}plugins是 BS 实例上的一个属性，这样通过 this.plugins.myPlugin.xxx 就能拜访到你的源属性，也就可能间接通过 this 批改到源属性的属性值。所以 setProperty 和getProperty的逻辑也就很简略了：
const setProperty = (obj, key, value) => {let keys = key.split('.')
// 一级一级进行拜访
for(let i = 0; i < keys.length - 1; i++) {let tmp = keys[i]
if (!obj[tmp]){obj[tmp] = {}}
obj = obj[tmp]
}
obj[keys.pop()] = value
}
const getProperty = (obj,key) => {const keys = key.split('.')
for (let i = 0; i < keys.length - 1; i++) {obj = obj[keys[i]]
if (typeof obj !== 'object' || !obj) return
}
const lastKey = keys.pop()
if (typeof obj[lastKey] === 'function') {return function () {return obj[lastKey].apply(obj, arguments)
}
} else {return obj[lastKey]
}
}获取属性时如果是函数的话要非凡解决，起因是如果你这么调用的话：
let bs = new BS()
bs.xxx()// 插件的办法xxx办法尽管是插件的办法，然而这样调用的时候 this 是指向 bs 的，然而显然，this应该指向这个插件实例才对，所以须要应用 apply 来指定上下文。
除上述之外，BS实例还有几个办法：
class BS {
// 从新计算，个别当 DOM 构造发生变化后须要手动调用
refresh() {// 调用 setContent 办法，调用 scroller 实例的刷新办法，派发相干事件}
// 启用 BS
enable() {this.scroller.enable()
this.hooks.trigger(this.hooks.eventTypes.enable)
this.trigger(this.eventTypes.enable)
}
// 禁用 BS
disable() {this.scroller.disable()
this.hooks.trigger(this.hooks.eventTypes.disable)
this.trigger(this.eventTypes.disable)
}
// 销毁 BS
destroy() {this.hooks.trigger(this.hooks.eventTypes.destroy)
this.trigger(this.eventTypes.destroy)
this.scroller.destroy()}
// 注册事件
eventRegister(names: string[]) {this.registerType(names)
}
}都很简略，就不细说了，总的来说实例化 BS 时大抵做的事件时参数解决、设置滚动元素、实例化滚动类，代理事件及办法，接下来看外围的滚动类/scroller/Scroller.ts。
滚动类
export interface ExposedAPI {
scrollTo(
x: number,
y: number,
time?: number,
easing?: EaseItem,
extraTransform?: {start: object; end: object}
): void
}上述为类定义了一个接口，scrollTo是实例的一个办法，定义了这个办法的入参及类型、返回参数。
export default class Scroller implements ExposedAPI {
constructor(
public wrapper: HTMLElement,
public content: HTMLElement,
options: BScrollOptions
) {}}public关键字代表公开，public申明的属性或办法能够在类的内部应用，对应的 private 关键字代表公有的，即在类的内部不能拜访，比方：
class S {
public name: string,
private age: number
}
let s = new S()
s.name// 能够拜访
s.age// 报错另外还有一个关键字 protected，申明的变量不能在类的内部应用，然而能够在继承它的子类的外部应用，所以这个关键字如果用在constructor 上，那么这个类只能被继承，本身不能被实例化。
对于下面这个示例，它把成员的申明和初始化合并在构造函数的参数里，称作参数属性：
constructor(public wrapper: HTMLElement)class Scroller {
constructor(
public wrapper: HTMLElement,
public content: HTMLElement,
options: BScrollOptions
) {
// 注册事件
this.hooks = new EventEmitter([// 事件...])
// Behavior 类次要用来存储管理滚动时的一些状态
this.scrollBehaviorX = new Behavior()
this.scrollBehaviorY = new Behavior()
// Translater 用来获取和设置 css 的 transform 的 translate 属性
this.translater = new Translater()
// BS 反对应用 css3 transition 和 requestAnimationFrame 两种形式来做动画，createAnimater 会依据配置来创立对应类的实例
this.animater = createAnimater()
// ActionsHandler 用来绑定 dom 事件
this.actionsHandler = new ActionsHandler()
// ScrollerActions 用来做真正的滚动管制
this.actions = new ScrollerActions()
// 绑定手机的旋转事件和窗口尺寸变动事件
this.resizeRegister = new EventRegister()
// 监听 content 的 transitionend 事件
this.registerTransitionEnd()
// 监听上述类的各种事件来执行各种操作
this.init()}
}下面是 Scroller 类简化后的构造函数，能够看到做了十分多的事件，new了一堆实例，这么多挨个关上看不出一会就得劝退，所以大抵的晓得每个类是做什么的后，咱们来简略思考一下，要能实现一个最根本的滚动大略要做一些什么事，首先必定要先获取一些根本信息，例如 wrapper 和content元素的尺寸信息，而后监听事件，比方触摸事件，而后判断是否须要滚动，怎么滚动，最初进行滚动，依据这个思路咱们来挨个看一下。
初始信息计算
获取和计算尺寸信息的在 new Behavior 的时候，构造函数里会执行 refresh 办法，咱们以 scrollBehaviorY 的状况来看：
refresh(content: HTMLElement) {
// size：height、position：top
const {size, position} = this.options.rect
const isWrapperStatic =
window.getComputedStyle(this.wrapper, null).position === 'static'
// wrapper 的尺寸信息
const wrapperRect = getRect(this.wrapper)
// wrapper 的高
this.wrapperSize = wrapperRect[size]
// 设置 content 元素，如果有变动则复位一些数据
this.setContent(content)
// content 元素的尺寸信息
const contentRect = getRect(this.content)
// content 元素的高
this.contentSize = contentRect[size]
// content 距 wrapper 的间隔
this.relativeOffset = contentRect[position]
// getRect 办法里获取一般元素信息用的是 offset 相干属性，所以 top 是绝对于 offsetParent 来说的，如果 wrapper 没有定位那么 content 的 offsetParent 则还要在下层持续查找，那么 top 就不是绝对于 wrapper 的间隔，须要减去 wrapper 的 offsetTop
if (isWrapperStatic) {this.relativeOffset -= wrapperRect[position]
}
// 设置边界，即能够滚动的最大和最小间隔
this.computeBoundary()
// 设置默认滚动方向
this.setDirection(Direction.Default)
}
export function getRect(el: HTMLElement): DOMRect {if (el instanceof (window as any).SVGElement) {let rect = el.getBoundingClientRect()
return {
top: rect.top,
left: rect.left,
width: rect.width,
height: rect.height,
}
} else {
return {
top: el.offsetTop,
left: el.offsetLeft,
width: el.offsetWidth,
height: el.offsetHeight,
}
}
}看一下 computeBoundary 办法，这个办法次要获取了能滚动的最大间隔，也就是两个边界值：
computeBoundary() {
const boundary: Boundary = {
minScrollPos: 0,// 能够了解为 translateY 的最小值
maxScrollPos: this.wrapperSize - this.contentSize,// 能够了解为 translateY 的最大值
}
// wrapper 的高小于 content 的高，那么显然是须要滚动的
if (boundary.maxScrollPos < 0) {
// 因为 content 是绝对于本身的地位进行偏移的，所以如果后面还有元素占了地位的话即便滚动了 maxScrollPos 的间隔后还会有一部分是不可见的，须要持续向上滚动 relativeOffset 的间隔
boundary.maxScrollPos -= this.relativeOffset
// 这里属实没看懂，然而个别 offsetTop 为 0 的话这里也不影响
if (this.options.specifiedIndexAsContent === 0) {boundary.minScrollPos = -this.relativeOffset}
}
this.minScrollPos = boundary.minScrollPos
this.maxScrollPos = boundary.maxScrollPos
// 判断是否须要滚动
this.hasScroll =
this.options.scrollable && this.maxScrollPos < this.minScrollPos
if (!this.hasScroll && this.minScrollPos < this.maxScrollPos) {
this.maxScrollPos = this.minScrollPos
this.contentSize = this.wrapperSize
}
}首先要搞明确的是滚动是作用在 content 元素上的，https://better-scroll.github.io/examples/#/core/specified-content，这个示例能够很分明的看到，wrapper里非 content 的元素是不会动的。
事件监听解决
接下来就是监听事件，这个在 ActionsHandler 里，分 pc 和手机端绑定了鼠标和触摸两套事件，处理函数其实都是同一个，咱们以触摸事件来看，有 start 触摸开始、move触摸中、end触摸完结三个事件处理函数。
private start(e: TouchEvent) {
// 鼠标相干事件的 type 为 1，触摸为 2
const _eventType = eventTypeMap[e.type]
// 防止鼠标和触摸事件同时作用？if (this.initiated && this.initiated !== _eventType) {return}
// 设置 initiated 的值
this.setInitiated(_eventType)
// 如果查看到配置了某些元素不须要响应滚动，这里间接返回
if (tagExceptionFn(e.target, this.options.tagException)) {this.setInitiated()
return
}
// 只容许鼠标左键单击
if (_eventType === EventType.Mouse && e.button !== MouseButton.Left) return
// 这里依据配置来判断是否要阻止冒泡和阻止默认事件
this.beforeHandler(e, 'start')
// 记录触摸开始的点距页面的间隔，pageX 和 pageY 会包含页面被卷去局部的长度
let point = (e.touches ? e.touches[0] : e) as Touch
this.pointX = point.pageX
this.pointY = point.pageY
}触摸开始事件最次要的就是记录一下触摸点的地位。
private move(e: TouchEvent) {let point = (e.touches ? e.touches[0] : e) as Touch
// 计算触摸挪动的差值
let deltaX = point.pageX - this.pointX
let deltaY = point.pageY - this.pointY
this.pointX = point.pageX
this.pointY = point.pageY
// 页面被卷去的长度
let scrollLeft =
document.documentElement.scrollLeft ||
window.pageXOffset ||
document.body.scrollLeft
let scrollTop =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop
// 以后触摸的地位间隔视口的地位，为什么不必 clientX、clientY？let pX = this.pointX - scrollLeft
let pY = this.pointY - scrollTop
// 如果你疾速滑动幅度过大的时候可能手指会滑出屏幕导致没有触发 touchend 事件，这里就是进行判断，当你的手指地位间隔边界小于某个值时就主动调用 end 办法来完结本次滑动
const autoEndDistance = this.options.autoEndDistance
if (
pX > document.documentElement.clientWidth - autoEndDistance ||
pY > document.documentElement.clientHeight - autoEndDistance ||
pX < autoEndDistance ||
pY < autoEndDistance
) {this.end(e)
}
}触摸中的办法次要做了两件事，记录和上次滑动的差值以及满足条件主动完结滚动。
private end(e: TouchEvent) {
// 复位 initiated 的值，这样 move 事件就不会再响应
this.setInitiated()
// 派发事件
this.hooks.trigger(this.hooks.eventTypes.end, e)
}滚动逻辑
以上仍只是绑定了事件，还没到滚动那一步，接下来看 ScrollerActions，构造函数里调用了bindActionsHandler 办法，这个办法里监听了方才 actionsHandler 里绑定的那些事件：
private bindActionsHandler() {// [mouse|touch]触摸开始事件
this.actionsHandler.hooks.on(
this.actionsHandler.hooks.eventTypes.start,
(e: TouchEvent) => {if (!this.enabled) return true
return this.handleStart(e)
}
)
// [mouse|touch]触摸中事件
this.actionsHandler.hooks.on(
this.actionsHandler.hooks.eventTypes.move,
({deltaX, deltaY, e}) => {if (!this.enabled) return true
return this.handleMove(deltaX, deltaY, e)
}
)
// [mouse|touch]触摸完结事件
this.actionsHandler.hooks.on(
this.actionsHandler.hooks.eventTypes.end,
(e: TouchEvent) => {if (!this.enabled) return true
return this.handleEnd(e)
}
)
}接下来是下面三个事件对应的处理函数：
private handleStart(e: TouchEvent) {
// 获取触摸开始的工夫戳
const timestamp = getNow()
this.moved = false
this.startTime = timestamp
// directionLockAction 次要是用来做方向锁定的，比方判断某次滑动时应该进行程度滚动还是垂直滚动等，reset 办法是复位锁定的方向变量
this.directionLockAction.reset()
// start 办法同样也是做一些初始化或复位工作，包含滑动的间隔、滑动方向
this.scrollBehaviorX.start()
this.scrollBehaviorY.start()
// 强制完结上次滚动
this.animater.doStop()
// 复位滚动开始的地位
this.scrollBehaviorX.resetStartPos()
this.scrollBehaviorY.resetStartPos()}这个办法次要是做一系列的复位工作，毕竟是开启一次新的滚动。
private handleMove(deltaX: number, deltaY: number, e: TouchEvent) {
// deltaX 和 deltaY 记录的是 move 事件每次触发时和上一次的差值，getAbsDist 办法是用来记录以后和触摸开始的相对间隔
const absDistX = this.scrollBehaviorX.getAbsDist(deltaX)
const absDistY = this.scrollBehaviorY.getAbsDist(deltaY)
const timestamp = getNow()
// 要么滑动间隔大于阈值，要么在上次滑动完结后又立刻滑动，否则不认为要进行滚动
/**/
private checkMomentum(absDistX: number, absDistY: number, timestamp: number) {
return (
timestamp - this.endTime > this.options.momentumLimitTime &&
absDistY < this.options.momentumLimitDistance &&
absDistX < this.options.momentumLimitDistance
)
}
/**/
if (this.checkMomentum(absDistX, absDistY, timestamp)) {return true}
// 这里用来依据 eventPassthrough 配置项来判断是否要进行锁定，保留原生滚动
// 如果本次检测到你是进行程度滚动，那么程度方向上会进行锁定，如果你这个配置设置的也是 horizontal，这个办法会返回 true，就相当于这次不进行模仿滚动而间接应用原生滚动，如果你传的是 vertical，就会调用 e.preventDefault()来阻止原生滚动
if (this.directionLockAction.checkMovingDirection(absDistX, absDistY, e)) {this.actionsHandler.setInitiated()
return true
}
// 这个办法会把锁定的那个方向的另外一个方向的 delta 值设为 0，即另外那个方向不进行滚动
const delta = this.directionLockAction.adjustDelta(deltaX, deltaY)
// move 办法做了两件事，1 是设置本次滑动的方向值，把右 -> 左、下 -> 上作为正向 1，反之作为负向 -1；2 是调用阻尼办法，这个阻尼是啥意思呢，就是没到边界的话滑动的时候你能感觉到页面是跟你的手指同步滑动的，阻尼之后你就会感觉到有阻力，页面滑动变慢跟不上你的手指了：/**/
performDampingAlgorithm(delta: number, dampingFactor: number) {
// 滑动开始的地位加上本次滑动偏移量即以后滑动到的地位
let newPos = this.currentPos + delta
// 曾经滑动到了边界
if (newPos > this.minScrollPos || newPos < this.maxScrollPos) {
if ((newPos > this.minScrollPos && this.options.bounces[0]) ||
(newPos < this.maxScrollPos && this.options.bounces[1])
) {
// 阻尼原理很简略，将本次滑动的间隔乘一个小于 1 的小数就能够了
newPos = this.currentPos + delta * dampingFactor
} else {
// 如果配置敞开了阻尼成果，那么本次滑动就到头了，滑不动了
newPos =
newPos > this.minScrollPos ? this.minScrollPos : this.maxScrollPos
}
}
return newPos
}
/**/
const newX = this.scrollBehaviorX.move(delta.deltaX)
const newY = this.scrollBehaviorY.move(delta.deltaY)
// 无论是应用 css3 transition 还是 requestAnimationFrame 做动画，实际上扭转的都是 css 的 transform 属性的值，这里的 translate 最终调用的是上述 this.translater 实例的 translate 办法
/**/
//point:{x:10,y:10}
translate(point: TranslaterPoint) {let transformStyle = [] as string[]
Object.keys(point).forEach((key) => {if (!translaterMetaData[key]) {return}
// translateX/translateY
const transformFnName = translaterMetaData[key][0]
if (transformFnName) {
// px
const transformFnArgUnit = translaterMetaData[key][1]
// x，y 的值
const transformFnArg = point[key]
transformStyle.push(`${transformFnName}(${transformFnArg}${transformFnArgUnit})`
)
}
})
this.hooks.trigger(
this.hooks.eventTypes.beforeTranslate,
transformStyle,
point
)
// 赋值
this.style[style.transform as any] = transformStyle.join(' ')
this.hooks.trigger(this.hooks.eventTypes.translate, point)
}
/**/
// 能够看到间接调用这个办法是没有设置 transition 的值或是应用 requestAnimationFrame 来扭转位移，所以是没有动画的，到这里 content 元素就曾经会跟着你的触摸进行滚动了
this.animater.translate({
x: newX,
y: newY
})
// 这个办法次要是用来重置 startTime 的值以及依据 probeType 配置来判断如何派发 scroll 事件
/**/
private dispatchScroll(timestamp: number) {
// 每 momentumLimitTime 工夫派发一次事件
if (timestamp - this.startTime > this.options.momentumLimitTime) {
// 刷新起始工夫和地位，这个用来判断是否要进行 momentum 动画
this.startTime = timestamp
// updateStartPos 会将元素以后滚动到的新地位作为起始地位 startPos
this.scrollBehaviorX.updateStartPos()
this.scrollBehaviorY.updateStartPos()
if (this.options.probeType === Probe.Throttle) {this.hooks.trigger(this.hooks.eventTypes.scroll, this.getCurrentPos())
}
}
// 实时派发事件
if (this.options.probeType > Probe.Throttle) {this.hooks.trigger(this.hooks.eventTypes.scroll, this.getCurrentPos())
}
}
/**/
this.dispatchScroll(timestamp)
}到这个函数内容就会跟着咱们的触摸开始滚动了，其实这样就能够完结了，然而呢，还有两件事要做，一是个别如果咱们滑动一个货色，滑动较快的时候，即便手松开了物体也还会持续滚动一会，不会你一松开它也立马停下来，所以要判断是否是疾速滑动以及如何进行这个松开后的动量动画；二是如果开启了回弹动画，这里须要判断是否要回弹。
动量动画及回弹动画
先来看触摸完结的处理函数：
private handleEnd(e: TouchEvent) {if (this.hooks.trigger(this.hooks.eventTypes.beforeEnd, e)) {return}
// 调用 scrollBehaviorX 和 scrollBehaviorY 的同名办法来获取以后 currentPos 的值
const currentPos = this.getCurrentPos()
// 更新本次的滚动方向
this.scrollBehaviorX.updateDirection()
this.scrollBehaviorY.updateDirection()
if (this.hooks.trigger(this.hooks.eventTypes.end, e, currentPos)) {return true}
// 更新元素地位到完结触摸点的地位
this.animater.translate(currentPos)
// 计算最初一次区间耗时
this.endTime = getNow()
const duration = this.endTime - this.startTime
this.hooks.trigger(this.hooks.eventTypes.scrollEnd, currentPos, duration)
}这个函数就派发了几个事件，具体做了什么还要找到订阅了这几个事件的中央，那么就要回到Scroller.ts，
Scroller类构造函数最初的 init 办法里会执行一系列事件的订阅，找到 end 事件的中央：
actions.hooks.on(
actions.hooks.eventTypes.end,
(e: TouchEvent, pos: TranslaterPoint) => {this.hooks.trigger(this.hooks.eventTypes.touchEnd, pos)
if (this.hooks.trigger(this.hooks.eventTypes.end, pos)) {return true}
// 判断是否是点击操作
if (!actions.moved) {this.hooks.trigger(this.hooks.eventTypes.scrollCancel)
if (this.checkClick(e)) {return true}
}
// 这里这里，这个就是用来判断是否越界及进行调整的办法
if (this.resetPosition(this.options.bounceTime, ease.bounce)) {this.animater.setForceStopped(false)
return true
}
}
)看 resetPosition 办法：
resetPosition(time = 0, easing = ease.bounce) {
// checkInBoundary 办法用来返回边界值及是否刚好在边界，具体逻辑看上面
const {
position: x,
inBoundary: xInBoundary,
} = this.scrollBehaviorX.checkInBoundary()
const {
position: y,
inBoundary: yInBoundary,
} = this.scrollBehaviorY.checkInBoundary()
// 如果都刚好在边界那么阐明不须要回弹
if (xInBoundary && yInBoundary) {return false}
// 超过边界了那么就滚回去~（诶，你怎么骂人呢），scrollTo 办法详见上面
this.scrollTo(x, y, time, easing)
return true
}
/*scrollBehavior 的相干办法 */
checkInBoundary() {const position = this.adjustPosition(this.currentPos)
// 如果边界值和本次地位一样那么阐明刚好在边界
const inBoundary = position === this.getCurrentPos()
return {
position,
inBoundary,
}
}
// 越界调整地位
adjustPosition(pos: number) {let roundPos = Math.round(pos)
if (
!this.hasScroll &&
!this.hooks.trigger(this.hooks.eventTypes.ignoreHasScroll)
) {// 满足条件返回最小滚动间隔
roundPos = this.minScrollPos
} else if (roundPos > this.minScrollPos) {// 越过最小滚动间隔了则须要回弹到最小间隔
roundPos = this.minScrollPos
} else if (roundPos < this.maxScrollPos) {// 超过最大滚动间隔了则须要回弹到最大间隔
roundPos = this.maxScrollPos
}
return roundPos
}
/**/上述的最初就是调用 scrollTo 办法进行滚动，那么接下来就来看动画相干的逻辑。
scrollTo(
x: number,
y: number,
time = 0,
easing = ease.bounce,
extraTransform = {start: {},
end: {},}
) {
// 依据是应用 transition 还是 requestAnimationFrame 来判断是应用 css cubic-bezier 还是函数
/*
bounce: {style: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
fn: function(t: number) {return 1 - --t * t * t * t}
}
*/
const easingFn = this.options.useTransition ? easing.style : easing.fn
const currentPos = this.getCurrentPos()
// 动画开始地位
const startPoint = {
x: currentPos.x,
y: currentPos.y,
...extraTransform.start,
}
// 动画完结地位
const endPoint = {
x,
y,
...extraTransform.end,
}
this.hooks.trigger(this.hooks.eventTypes.scrollTo, endPoint)
// 终点起点雷同当然就不须要动画了
if (isSamePoint(startPoint, endPoint)) return
// 调用动画办法
this.animater.move(startPoint, endPoint, time, easingFn)
}这个办法的最初终于调用了动画的办法，因为反对两种动画办法，所以咱们先来简略思考一下这两种的原理别离是什么。
动画
应用 css3 的 transition 来做动画是很简略的，只有设置好过渡属性 transition 的值，接下来扭转 transform 的值本人就会利用动画，transition是个简写属性，蕴含四个属性，一般来说咱们次要设置它的transition-property（指定你要利用动画的 css 属性名称，如 transform，不设置则默认利用到所有能够利用的属性）、transition-duration（过渡工夫，必须要设置，不然为 0 没有过渡）、transition-timing-function（动画曲线）。
应用 requestAnimationFrame 的话就须要本人来设置计算每次的地位了，配合一些罕用的动画曲线函数这个也是很简略的，比方上述的函数，更多函数可拜访 http://robertpenner.com/easing/：
function(t: number) {return 1 - --t * t * t * t}你只有把动画曾经进行了的时长和过渡工夫的比例传入，返回的值你再和本次动画的间隔相乘，即可失去此刻的位移。
接下来看具体的实现，须要先阐明的是这两个类都继承了一个基类，因为它们存在很多的独特操作。
1.css3 形式
move(
startPoint: TranslaterPoint,
endPoint: TranslaterPoint,
time: number,
easingFn: string | EaseFn
) {
// 设置一个 pending 变量，用来判断以后是否正在动画中
this.setPending(time > 0)
// 设置 transition-timing-function 属性
this.transitionTimingFunction(easingFn as string)
// 设置 transition-property 的值为 transform
this.transitionProperty()
// 设置 transition-duration 属性
this.transitionTime(time)
// 调用上述提到过的 this.translater 的 translate 办法来设置元素的 transform 值
this.translate(endPoint)
// 如果工夫不存在，那么在一个事件周期里里扭转属性值不会触发 transitionend 事件，所以这里通过触发回流强制更新
if (!time) {
this._reflow = this.content.offsetHeight
this.hooks.trigger(this.hooks.eventTypes.move, endPoint)
this.hooks.trigger(this.hooks.eventTypes.end, endPoint)
}
}2.requestAnimationFrame形式
move(
startPoint: TranslaterPoint,
endPoint: TranslaterPoint,
time: number,
easingFn: EaseFn | string
) {
// time 为 0 间接调用 translate 办法设置地位就能够了
if (!time) {this.translate(endPoint)
this.hooks.trigger(this.hooks.eventTypes.move, endPoint)
this.hooks.trigger(this.hooks.eventTypes.end, endPoint)
return
}
// 不为 0 再进行动画
this.animate(startPoint, endPoint, time, easingFn as EaseFn)
}
private animate(
startPoint: TranslaterPoint,
endPoint: TranslaterPoint,
duration: number,
easingFn: EaseFn
) {let startTime = getNow()
const destTime = startTime + duration
// 动画办法，会被 requestAnimationFrame 递归调用
const step = () => {let now = getNow()
// 以后工夫大于本次动画完结的工夫示意动画完结了
if (now >= destTime) {
// 可能距目标值有一点小误差，手动设置一下进步准确度
this.translate(endPoint)
this.hooks.trigger(this.hooks.eventTypes.move, endPoint)
this.hooks.trigger(this.hooks.eventTypes.end, endPoint)
return
}
// 工夫耗时比例
now = (now - startTime) / duration
// 调用缓动函数
let easing = easingFn(now)
const newPoint = {} as TranslaterPoint
Object.keys(endPoint).forEach((key) => {const startValue = startPoint[key]
const endValue = endPoint[key]
// 失去本次动画的指标地位
newPoint[key] = (endValue - startValue) * easing + startValue
})
// 执行滚动
this.translate(newPoint)
if (this.pending) {this.timer = requestAnimationFrame(step)
}
}
// 设置标记位
this.setPending(true)
// 基本操作，开始新的定时器或 requestAnimationFrame 时先做一次革除操作
cancelAnimationFrame(this.timer)
// 开始动画
step()}下面的代码里都只有设置 pending 为true，而没有重置为 false 的中央，聪慧的你肯定能想到必定是通过事件订阅在其余中央进行重置了，是的，让咱们回到 Scroller.ts，Scroller 类外面绑定了 content 元素的 transitionend 事件和订阅了 end 事件：
// 这是 transitionend 的处理函数
private transitionEnd(e: TouchEvent) {if (e.target !== this.content || !this.animater.pending) {return}
const animater = this.animater as Transition
// 删除 transition-duration 的属性值
animater.transitionTime()
// 这里也调用了 resetPosition 来进行边界回弹，之前是在触摸完结后的 end 事件调用了，因为间接调用 translate 办法时是不会触发 transitionend 事件的，以及触摸完结后可能会有回弹动画，所以这里也须要调用
if (!this.resetPosition(this.options.bounceTime, ease.bounce)) {this.animater.setPending(false)
}
}this.animater.hooks.on(
this.animater.hooks.eventTypes.end,
(pos: TranslaterPoint) => {
// 同上，边界回弹
if (!this.resetPosition(this.options.bounceTime)) {this.animater.setPending(false)
this.hooks.trigger(this.hooks.eventTypes.scrollEnd, pos)
}
}
)当然，上述边界回弹的函数里最初动画实现后又会触发这两个事件，就又走到了 resetPosition 的判断逻辑，然而因为它们曾经回弹实现在边界上了，所以会间接返回 false。
回弹逻辑看完了，然而动量动画还是没看到，别急，下面说了个别是当你松开手指的时候才判断是否要进行动量静止，所以回到下面的 handleEnd 办法，发现最初触发了一个 scrollEnd 事件，在 Scroller 里找到订阅该事件的处理函数：
actions.hooks.on(
actions.hooks.eventTypes.scrollEnd,
(pos: TranslaterPoint, duration: number) => {
// 这个 duration=this.endTime - this.startTime，然而 startTime 在一次触摸中每超过 momentumLimitTime 都会进行重置的，所以不是从手指触摸到手指来到的总工夫
// 最初这段时间片段滚动的间隔
const deltaX = Math.abs(pos.x - this.scrollBehaviorX.startPos)
const deltaY = Math.abs(pos.y - this.scrollBehaviorY.startPos)
// 判断是否是轻拂动作，应该是为插件服务的，这里不论
/**/
private checkFlick(duration: number, deltaX: number, deltaY: number) {
const flickMinMovingDistance = 1 // distinguish flick from click
if (
this.hooks.events.flick.length > 1 &&
duration < this.options.flickLimitTime &&
deltaX < this.options.flickLimitDistance &&
deltaY < this.options.flickLimitDistance &&
(deltaY > flickMinMovingDistance || deltaX > flickMinMovingDistance)
) {return true}
}
/**/
if (this.checkFlick(duration, deltaX, deltaY)) {this.animater.setForceStopped(false)
this.hooks.trigger(this.hooks.eventTypes.flick)
return
}
// 判断是否进行 momentum 动画
if (this.momentum(pos, duration)) {this.animater.setForceStopped(false)
return
}
}
)private momentum(pos: TranslaterPoint, duration: number) {
const meta = {
time: 0,
easing: ease.swiper,
newX: pos.x,
newY: pos.y,
}
// 判断是否满足动量条件，满足则计算动量数据，也就是最初要滚动到的地位，这个办法代码较多，就不放进去了，反正做的事件时依据配置来判断是否满足动量条件，满足再依据配置判断是否在某个方向上容许回弹，最初再动用另一个办法 momentum 来计算动量数据, 这个办法见上面
const momentumX = this.scrollBehaviorX.end(duration)
const momentumY = this.scrollBehaviorY.end(duration)
// 做一下判断
meta.newX = isUndef(momentumX.destination)
? meta.newX
: (momentumX.destination as number)
meta.newY = isUndef(momentumY.destination)
? meta.newY
: (momentumY.destination as number)
meta.time = Math.max(
momentumX.duration as number,
momentumY.duration as number
)
// 地位变了，那么意味着要进行动量动画
if (meta.newX !== pos.x || meta.newY !== pos.y) {this.scrollTo(meta.newX, meta.newY, meta.time, meta.easing)
return true
}
}// 计算动量数据
private momentum(
current: number,
start: number,
time: number,
lowerMargin: number,
upperMargin: number,
wrapperSize: number,
options = this.options
) {
// 最初滑动的工夫片段
const distance = current - start
// 最初滑动的速度
const speed = Math.abs(distance) / time
const {deceleration, swipeBounceTime, swipeTime} = options
const momentumData = {
// 指标地位计算形式：手指松开后元素最初的地位 + 额定间隔
// deceleration 代表减速度，默认值是 0.0015，如果 distance = 15px，time = 300ms，那么 speed = 0.05px/ms，则 speed / deceleration = 33，即从以后间隔持续滑动 33px，你速度越快或 deceleration 设置的越小，滑动的越远
destination: current + (speed / deceleration) * (distance < 0 ? -1 : 1),
duration: swipeTime,
rate: 15,
}
// 超过最大滑动间隔
if (momentumData.destination < lowerMargin) {
// 如果用户配置容许该方向回弹，那么再次计算动量间隔，为什么？？否则最多只能滚动到最大间隔
momentumData.destination = wrapperSize
? Math.max(
lowerMargin - wrapperSize / 4,
lowerMargin - (wrapperSize / momentumData.rate) * speed
)
: lowerMargin
momentumData.duration = swipeBounceTime
} else if (momentumData.destination > upperMargin) {// 超过最小滚动间隔，同上
momentumData.destination = wrapperSize
? Math.min(
upperMargin + wrapperSize / 4,
upperMargin + (wrapperSize / momentumData.rate) * speed
)
: upperMargin
momentumData.duration = swipeBounceTime
}
momentumData.destination = Math.round(momentumData.destination)
return momentumData
}动量逻辑其实也很简略，就是依据最初时刻的耗时和间隔来进行一下判断，再依据肯定算法来计算动量数据也就是最终要滚动到的地位，而后滚过来。
到这里，外围的滚动逻辑曾经全副完结了，最初来看一下如何强制完结 transition 滚动，因为 requestAnimationFrame 完结很简略，调用一下 cancelAnimationFrame 就能够了。
doStop(): boolean {
const pending = this.pending
if (pending) {
// 复位标记位
this.setPending(false)
// 获取 content 元素以后的 translateX 和 translateY 的值
const {x, y} = this.translater.getComputedPosition()
// 将 transition-duration 的值设为 0
this.transitionTime()
// 设置到以后地位
this.translate({x, y})
}
return pending
}首先获取到元素此刻的地位，而后删除过渡工夫，最初再批改目标值为此刻的地位，因为不批改，即便你把过渡工夫改回 0 了过渡动画依然会持续，此时你强制批改一下地位，它立马就会完结。
例行总结
因为是第一次认真的浏览一份源码，所以可能会有很多问题，通篇就像在给这个源码加正文，而且因为是凭空浏览并没有通过运行代码进行断点调试，所以难免会存在谬误。
首先说说 TypeScript，后半局部根本没有再介绍过它，所以能够发现想要浏览一份TypeScript 代码是并不难的，只有理解一些罕用的语法根本就没有阻碍了，然而离本人能纯熟的应用那还是存在很远的间隔，很多货色就是这样，你能够看的懂，然而你本人写就不会了，也没啥捷径，归根结底还是要多用多思考。
而后是 BetterScroll，代码总体来说还是比拟清晰的，因为是插件化，所以事件机制是少不了的，长处是性能解耦，各局部独立，毛病也不言而喻，首先是每个类都有本人的事件，很多事件还是同名的，所以很容易看着看着就晕了，其次是因为事件订阅公布，很难分明的了解事件流，所以这也是比方vue 更提倡通过属性来显示传递和接管。
总的来说，这个库的外围滚动是一个很简略的性能，本人实现什么都不思考的话一百多行代码可能也就够了，然而并不障碍能够将它扩大成一个功能强大的库，这样要思考的事件就比拟多了，首先要思考到各种边界状况，其次是要思考兼容性，比方 css 款式，可能还会遇到特定机型的 bug，代码如何组织也很重要，要尽量的复用，比方 BetterScroll 里两种动画形式就存在很多独特操作，那么就能够把这些提取到公共的父类里，又比方程度滚动和垂直滚动必定也是大量代码都是一样的，所以也须要进行形象提炼，因为设计成插件化，所以还要思考插件的开发和集成，最初还须要欠缺的测试，所以一个优良的开源我的项目都是不容易的。
