【iScroll源码学习02】分解iScroll三个核心事件点

前言

最近两天看到很多的总结性发言，我想想今年好像我的变化挺大的，是不是该晚上来水一发呢？嗯，决定了，晚上来水一发！

上周六，我们简单模拟了下iScroll的实现，周日我们开始了学习iScroll的源码，今天我们接着上次的记录学习，因为最近事情稍微有点多了

学习进度可能要放慢，而且iScroll这个库实际意义很大，不能囫囵吞枣的学习，要学到精华，并且要用于项目中的，所以初步规划是最近两周主要围绕iScroll展开

而后两个选择：① 分离iScroll代码用于项目；② 抄袭iScroll精华部分用于项目。无论如何都要用于项目......

• iScroll源码学习01准备阶段
• SPA移动站点APP化研究之上中下页面的iScroll化

几个事件点

iScroll的整体逻辑由三大事件点组成：

① touchStart（mousedown）

② touchMove（mousemove）

③ touchEnd（mouseUp）

也就是iScroll整体的功能逻辑其实是由这几个事件串起来的，其中

touchStart会保留一些初始化操作，或者停止正在进行的动画

touchMove会带动dom一起移动

而touchEnd最为复杂，在touchend阶段可能需要处理很多东西

① 一般性拖动结束事件
② 超出边界还原后触发的事件（此时可以滚动加载数据）
③ 如果此次为一次按钮点击，需要触发按钮事件那么还有对preventDefault进行处理（preventDefault可能导致事件不触发）
④ 如果此次为一次点击事件，并且对象为文本框或者select（其它会获得焦点的事件），那么应该让其获得焦点，并且弹出键盘
⑤ ......

以上为主观臆测下的猜想，我们来看看iScroll实际干了些什么，下面再细细的分析各个阶段

start

 _start: function (e) {
   // React to left mouse button only
   if (utils.eventType[e.type] != 1) {
     if (e.button !== 0) {
       return;
     }
   }
   if (!this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated)) {
     return;
   }
   if (this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultException(e.target, this.options.preventDefaultException)) {
     e.preventDefault();
   }
   var point = e.touches ? e.touches[0] : e,
 pos;
 
   this.initiated = utils.eventType[e.type];
   this.moved = false;
   this.distX = 0;
   this.distY = 0;
   this.directionX = 0;
   this.directionY = 0;
   this.directionLocked = 0;
 
   this._transitionTime();
 
   this.startTime = utils.getTime();
 
   if (this.options.useTransition && this.isInTransition) {
     this.isInTransition = false;
     pos = this.getComputedPosition();
     this._translate(Math.round(pos.x), Math.round(pos.y));
     this._execEvent('scrollEnd');
   } else if (!this.options.useTransition && this.isAnimating) {
     this.isAnimating = false;
     this._execEvent('scrollEnd');
   }
 
   this.startX = this.x;
   this.startY = this.y;
   this.absStartX = this.x;
   this.absStartY = this.y;
   this.pointX = point.pageX;
   this.pointY = point.pageY;
 
   this._execEvent('beforeScrollStart');
 },

 if ( utils.eventType[e.type] != 1 ) {
     if ( e.button !== 0 ) {
         return;
     }
 }

首先一段代码特别针对非touch事件进行了处理，其中的意图暂时不明，应该是只有点击鼠标左键的情况下才会触发下面逻辑

 if ( !this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated) ) {
     return;
 }

第二段代码做了一次是否开始的验证，this.enabled应该是程序功能总开关，this.initiated为首次触发touchStart的事件类型

可能是mousedown，touchstart或者其他，如果两次不等的话，这里也会终止流程（此段代码确实不明意图）

// This should find all Android browsers lower than build 535.19 (both stock browser and webview)
me.isBadAndroid = /Android/.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));

 if ( this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
     e.preventDefault();
 }

第三段做了一些兼容性操作，各位可以看到只有这里有preventDefault的操作，如果默写dom元素在你手触碰会有默认的事件，比如文本框，便会触发

但是我们默认是阻止的，而在一些android设备上市必须阻止的，这里建议都阻止

 var point = e.touches ? e.touches[0] : e,
 pos;
 
 this.initiated = utils.eventType[e.type];
 this.moved = false;
 this.distX = 0;
 this.distY = 0;
 this.directionX = 0;
 this.directionY = 0;
 this.directionLocked = 0;

接下来进行了一些初始化属性的定义，其中比较重要的是

① point做了最简单的兼容性处理

② this.moved你想知道现在控件是不是在拖动就看他了

然后这里执行了一个方法：_transitionTime

 _transitionTime: function (time) {
   time = time || 0;
 
   this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
 
   if (!time && utils.isBadAndroid) {
     this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
   }
 
   if (this.indicators) {
     for (var i = this.indicators.length; i--; ) {
       this.indicators[i].transitionTime(time);
     }
   }
 
   // INSERT POINT: _transitionTime
 },

utils具有以下style属性：

 me.extend(me.style = {}, {
     transform: _transform,
     transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
     transitionDuration: _prefixStyle('transitionDuration'),
     transitionDelay: _prefixStyle('transitionDelay'),
     transformOrigin: _prefixStyle('transformOrigin')
 });

这里为其设置了适合放弃浏览器的运动时间属性，就是简单的兼容处理

在有些android浏览器上，这个使用是有问题的，所以就直接当没传时间，直接给了个0.001s

其中的indicators就是我们的滚动条，这里既然涉及到了，我们也暂时不管，因为涉及到滚动条的篇幅也不小，我们暂时不关注

这个方法也涉及滚动条相关，我们这里先简单提一下，后面在补充，现在继续看下面的逻辑

再下面就开始真正初始化信息，这些信息在以下会被用到

 this.startTime = utils.getTime();
 
 if ( this.options.useTransition && this.isInTransition ) {
     this.isInTransition = false;
     pos = this.getComputedPosition();
     this._translate(Math.round(pos.x), Math.round(pos.y));
     this._execEvent('scrollEnd');
 } else if ( !this.options.useTransition && this.isAnimating ) {
     this.isAnimating = false;
     this._execEvent('scrollEnd');
 }
 
 this.startX    = this.x;
 this.startY    = this.y;
 this.absStartX = this.x;
 this.absStartY = this.y;
 this.pointX    = point.pageX;
 this.pointY    = point.pageY;

首先记录了手指触屏屏幕的时间，而后记录手指所处的位置，其中有两个if语句需要我们注意，这里的代码还是相当关键的

这段话的意义是告诉我们，如果我们当前正在运动，而此时触屏了，那么就触发scrollEnd事件停止动画（这里非常关键）

其中若是使用了CSS3的属性实现动画会做一些特别的处理，这里的this.isAnimating = false 是一个关键点，各位要注意

他在首次为undefined（我觉得这种属性应该给他一个初始化值false），运动过程中为true，运动结束为false

这里再提一下若是使用CSS3的话，会马上让dom移动到特定位置，然后停止动画

 _translate: function (x, y) {
     if ( this.options.useTransform ) {
         this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
 
     } else {
         x = Math.round(x);
         y = Math.round(y);
         this.scrollerStyle.left = x + 'px';
         this.scrollerStyle.top = y + 'px';
     }
     this.x = x;
     this.y = y;
 if ( this.indicators ) {
     for ( var i = this.indicators.length; i--; ) {
         this.indicators[i].updatePosition();
     }
 }
 // INSERT POINT: _translate
 },

下面的代码依旧在操作滚动条，不用现在关注，这里将信息全部写入了scrollerStyle对象，同事dom style属性的引用，这里就直接给赋值了

然我们来看看this._execEvent('scrollEnd');这段代码

首先_execEvent是用于触发存储在this._event数组中的事件的方法，然后我们只看scrollEnd即可，这里的事件机制，我们提到后面来说

很奇怪的是，这里有触发事件的代码却没有注册的代码，这是因为这个接口应该是开放给用户的，然后这里的beforeScrollStart也是开放给用户注册事件的

到此touchstart相关事件就结束了，我们接下来看move事件

move

 _move: function (e) {
   if (!this.enabled || utils.eventType[e.type] !== this.initiated) {
     return;
   }
 
   if (this.options.preventDefault) {    // increases performance on Android? TODO: check!
     e.preventDefault();
   }
 
   var point = e.touches ? e.touches[0] : e,
     deltaX = point.pageX - this.pointX,
     deltaY = point.pageY - this.pointY,
     timestamp = utils.getTime(),
     newX, newY,
     absDistX, absDistY;
 
   this.pointX = point.pageX;
   this.pointY = point.pageY;
 
   this.distX += deltaX;
   this.distY += deltaY;
   absDistX = Math.abs(this.distX);
   absDistY = Math.abs(this.distY);
 
   // We need to move at least 10 pixels for the scrolling to initiate
   if (timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10)) {
     return;
   }
 
   // If you are scrolling in one direction lock the other
   if (!this.directionLocked && !this.options.freeScroll) {
     if (absDistX > absDistY + this.options.directionLockThreshold) {
       this.directionLocked = 'h';     // lock horizontally
     } else if (absDistY >= absDistX + this.options.directionLockThreshold) {
       this.directionLocked = 'v';     // lock vertically
     } else {
       this.directionLocked = 'n';     // no lock
     }
   }
 
   if (this.directionLocked == 'h') {
     if (this.options.eventPassthrough == 'vertical') {
       e.preventDefault();
     } else if (this.options.eventPassthrough == 'horizontal') {
       this.initiated = false;
       return;
     }
 
     deltaY = 0;
   } else if (this.directionLocked == 'v') {
     if (this.options.eventPassthrough == 'horizontal') {
       e.preventDefault();
     } else if (this.options.eventPassthrough == 'vertical') {
       this.initiated = false;
       return;
     }
 
     deltaX = 0;
   }
 
   deltaX = this.hasHorizontalScroll ? deltaX : 0;
   deltaY = this.hasVerticalScroll ? deltaY : 0;
 
   newX = this.x + deltaX;
   newY = this.y + deltaY;
 
   // Slow down if outside of the boundaries
   if (newX > 0 || newX < this.maxScrollX) {
     newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
   }
   if (newY > 0 || newY < this.maxScrollY) {
     newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
   }
 
   this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
   this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
 
   if (!this.moved) {
     this._execEvent('scrollStart');
   }
 
   this.moved = true;
 
   this._translate(newX, newY);
 
   /* REPLACE START: _move */
 
   if (timestamp - this.startTime > 300) {
     this.startTime = timestamp;
     this.startX = this.x;
     this.startY = this.y;
   }
 
   /* REPLACE END: _move */
 
 },

move为功能第二个阶段，首先仍然是做全局开关检测，如果不通过就直接给干掉

 if (!this.enabled || utils.eventType[e.type] !== this.initiated) {
   return;
 }
 
 if (this.options.preventDefault) {    // increases performance on Android? TODO: check!
   e.preventDefault();
 }

然后这个时候必须要将浏览器默认事件搞掉，否则你滚动时候，如果body跟着一起滚动就麻烦了

PS：Android下有些浏览器preventDefault并不能阻止浏览器滚动，这事情很烦

接下来就是记录当前移动数据，为dom移动做准备了：

 var point = e.touches ? e.touches[0] : e,
 deltaX = point.pageX - this.pointX,
 deltaY = point.pageY - this.pointY,
 timestamp = utils.getTime(),
 newX, newY,
 absDistX, absDistY;
 
 this.pointX = point.pageX;
 this.pointY = point.pageY;
 
 this.distX += deltaX;
 this.distY += deltaY;
 absDistX = Math.abs(this.distX);
 absDistY = Math.abs(this.distY);

首先记录了当前鼠标位置，而后记录移动位置后，重置当前鼠标位置，然后这里做了一个判断，这个判断是如果我们手指一直停到一个位置不动的话，就给他终止了

这里也做了一个优化，为了防止浏览器不停的重绘吗，一定是移动10px以上才真正的移动

 if (!this.directionLocked && !this.options.freeScroll) {
   if (absDistX > absDistY + this.options.directionLockThreshold) {
     this.directionLocked = 'h';     // lock horizontally
   } else if (absDistY >= absDistX + this.options.directionLockThreshold) {
     this.directionLocked = 'v';     // lock vertically
   } else {
     this.directionLocked = 'n';     // no lock
   }
 }

这里做了一个判断，让DOM朝一个方向运动即可，因为我们关注的是Y方向，这里可以暂时不予关注

然后开始计算新位置了，这里要开始移动了哦（注意：这里做了一个判断如果超出边界的话，拖动率要减低）

 newX = this.x + deltaX;
 newY = this.y + deltaY;
 
 // Slow down if outside of the boundaries
 if (newX > 0 || newX < this.maxScrollX) {
   newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
 }
 if (newY > 0 || newY < this.maxScrollY) {
   newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
 }

我们在touchstart时候将this.moved设置为了false，这里就触发一个scrollSatrt事件后将其还原为true，所以这个事件只会触发一次，

这个事件同样是开放给用户的，iScroll本身并未注册任何事件

 if (timestamp - this.startTime > 300) {
   this.startTime = timestamp;
   this.startX = this.x;
   this.startY = this.y;
 }

每300ms会重置一次当前位置以及开始时间，这个就是为什么我们在抓住不放很久突然丢开仍然有长距离移动的原因，这个比较精妙哦！

最后我们说下其中的_translate方法，这个方法用于移动DOM，这种封装的思想很不错的，值得借鉴，现在就进入关键点了touchend

end

 _end: function (e) {
   if (!this.enabled || utils.eventType[e.type] !== this.initiated) {
     return;
   }
 
   if (this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException)) {
     e.preventDefault();
   }
 
   var point = e.changedTouches ? e.changedTouches[0] : e,
     momentumX,
     momentumY,
     duration = utils.getTime() - this.startTime,
     newX = Math.round(this.x),
     newY = Math.round(this.y),
     distanceX = Math.abs(newX - this.startX),
     distanceY = Math.abs(newY - this.startY),
     time = 0,
     easing = '';
 
   this.isInTransition = 0;
   this.initiated = 0;
   this.endTime = utils.getTime();
 
   // reset if we are outside of the boundaries
   if (this.resetPosition(this.options.bounceTime)) {
     return;
   }
 
   this.scrollTo(newX, newY); // ensures that the last position is rounded
 
   // we scrolled less than 10 pixels
   if (!this.moved) {
     if (this.options.tap) {
       utils.tap(e, this.options.tap);
     }
 
     if (this.options.click) {
       utils.click(e);
     }
 
     this._execEvent('scrollCancel');
     return;
   }
 
   if (this._events.flick && duration < 200 && distanceX < 100 && distanceY < 100) {
     this._execEvent('flick');
     return;
   }
 
   // start momentum animation if needed
   if (this.options.momentum && duration < 300) {
     momentumX = this.hasHorizontalScroll ? utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0) : { destination: newX, duration: 0 };
     momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0) : { destination: newY, duration: 0 };
     newX = momentumX.destination;
     newY = momentumY.destination;
     time = Math.max(momentumX.duration, momentumY.duration);
     this.isInTransition = 1;
   }
 
   if (this.options.snap) {
     var snap = this._nearestSnap(newX, newY);
     this.currentPage = snap;
     time = this.options.snapSpeed || Math.max(
             Math.max(
                 Math.min(Math.abs(newX - snap.x), 1000),
                 Math.min(Math.abs(newY - snap.y), 1000)
             ), 300);
     newX = snap.x;
     newY = snap.y;
 
     this.directionX = 0;
     this.directionY = 0;
     easing = this.options.bounceEasing;
   }
 
   // INSERT POINT: _end
 
   if (newX != this.x || newY != this.y) {
     // change easing function when scroller goes out of the boundaries
     if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) {
       easing = utils.ease.quadratic;
     }
 
     this.scrollTo(newX, newY, time, easing);
     return;
   }
 
   this._execEvent('scrollEnd');
 },

开始我们就说过，touchend为这个控件一个关键点与难点，现在我们就来啃一啃，这个看完了，iScroll核心部分也就结束了，后面就只需要拆解分析即可

首先仍然是一点初始化操作

 if (!this.enabled || utils.eventType[e.type] !== this.initiated) {
   return;
 }
 
 if (this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException)) {
   e.preventDefault();
 }

而后逐步好戏上场了，在手指离开前做了状态保存

 var point = e.changedTouches ? e.changedTouches[0] : e,
 momentumX,
 momentumY,
 duration = utils.getTime() - this.startTime,
 newX = Math.round(this.x),
 newY = Math.round(this.y),
 distanceX = Math.abs(newX - this.startX),
 distanceY = Math.abs(newY - this.startY),
 time = 0,
 easing = '';
 
 this.isInTransition = 0;
 this.initiated = 0;
 this.endTime = utils.getTime();

duration是当前拖动的事件，这里可不是手指触屏到离开哦，因为move时候每300ms变了一次

PS：这里想象一下如果我们想要快速的滑动是不是触屏屏幕很快呢，而我们一直拖动DOM在最后也是有可能想让他快速移动的

记录当前x，y位置记录当前移动位置distanceY，然后重置结束时间，这里有一个resetPosition方法：

 resetPosition: function (time) {
     var x = this.x,
         y = this.y;
 
     time = time || 0;
 
     if ( !this.hasHorizontalScroll || this.x > 0 ) {
         x = 0;
     } else if ( this.x < this.maxScrollX ) {
         x = this.maxScrollX;
     }
 
     if ( !this.hasVerticalScroll || this.y > 0 ) {
         y = 0;
     } else if ( this.y < this.maxScrollY ) {
         y = this.maxScrollY;
     }
 
     if ( x == this.x && y == this.y ) {
         return false;
     }
 
     this.scrollTo(x, y, time, this.options.bounceEasing);
 
     return true;
 },

他是记录我们是不是已经离开了边界了，如果离开边界了就不会执行后面逻辑，而直接重置DOM位置，这里还用到了我们的scrollTo方法，该方法尤其关键

scrollTo

 scrollTo: function (x, y, time, easing) {
     easing = easing || utils.ease.circular;
 
     this.isInTransition = this.options.useTransition && time > 0;
 
     if ( !time || (this.options.useTransition && easing.style) ) {
         this._transitionTimingFunction(easing.style);
         this._transitionTime(time);
         this._translate(x, y);
     } else {
         this._animate(x, y, time, easing.fn);
     }
 },

这个方法是此处一个重要的方法，传入距离与时间后，他就会高高兴兴的移动到对应位置

如果启用了CSS3的动画，便会使用CSS3动画方式进行动画（这个动画我们下期再说），否则使用_animate方法（js实现方案）

 _animate: function (destX, destY, duration, easingFn) {
     var that = this,
         startX = this.x,
         startY = this.y,
         startTime = utils.getTime(),
         destTime = startTime + duration;
 
     function step () {
         var now = utils.getTime(),
             newX, newY,
             easing;
 
         if ( now >= destTime ) {
             that.isAnimating = false;
             that._translate(destX, destY);
 
             if ( !that.resetPosition(that.options.bounceTime) ) {
                 that._execEvent('scrollEnd');
             }
 
             return;
         }
 
         now = ( now - startTime ) / duration;
         easing = easingFn(now);
         newX = ( destX - startX ) * easing + startX;
         newY = ( destY - startY ) * easing + startY;
         that._translate(newX, newY);
 
         if ( that.isAnimating ) {
             rAF(step);
         }
     }
 
     this.isAnimating = true;
     step();
 },

这里用到了前文说描述的settimeout实现动画方案，这里有一点需要我们回到start部分重新思考，为什么CSS停止了动画？

原因是因为transitionend事件

transitionend 事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的transition-property 属性，事件将不会被触发.

 _transitionEnd: function (e) {
     if ( e.target != this.scroller || !this.isInTransition ) {
         return;
     }
 
     this._transitionTime();
     if ( !this.resetPosition(this.options.bounceTime) ) {
         this.isInTransition = false;
         this._execEvent('scrollEnd');
     }
 },

所以，我们第二次touchstart时候，便高高兴兴停止了动画（之一_transitionTime未传time时候会重置时间），所以先取消动画再移动位置

于是继续回到我们的end事件，

 this.scrollTo(newX, newY);

如果没有超出边界便滑动到应该去的位置（这里有动画哦）

点击情况

当然，我们手指可能当前只不过想点击而已，这个时候就要触发相关的点击事件了，如果需要获取焦点，便获取焦点

PS：他这里还模拟的fastclick想提升响应速度，但是他这样会引起大量BUG

 if (!this.moved) {
   if (this.options.tap) {
     utils.tap(e, this.options.tap);
   }
 
   if (this.options.click) {
     utils.click(e);
   }
 
   this._execEvent('scrollCancel');
   return;
 }
 
 if (this._events.flick && duration < 200 && distanceX < 100 && distanceY < 100) {
   this._execEvent('flick');
   return;
 }

运动参数

第一步的scrollTo其实可以放到move里面去，后面就用到了我们上文所说，根据动力加速度计算出来的动画参数：

 if (this.options.momentum && duration < 300) {
   momentumX = this.hasHorizontalScroll ? utils.momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0) : { destination: newX, duration: 0 };
   momentumY = this.hasVerticalScroll ? utils.momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0) : { destination: newY, duration: 0 };
   newX = momentumX.destination;
   newY = momentumY.destination;
   time = Math.max(momentumX.duration, momentumY.duration);
   this.isInTransition = 1;
 }

那个snap不必关注，直接看下面，在此使用

 this.scrollTo(newX, newY, time, easing);

开始运动，最后触发scrollend事件，这里如果超出边界会执行resetPosition方法还原的，不必关心

由此，我们几大核心事件点便学习结束了，轻松愉快哈

结语

今天学习了iScroll的几个核心点，我们下次来说下他的滚动条以及事件机制相关，整个iScroll就七七八八了