前言

想不到又到周末了，周末的时间要抓紧学习才行，前几天我们学习了iScroll几点基础知识：

今天我们来学习其事件机制以及滚动条的实现，完了后我们iScroll就学习的差不多了，最后会抽离iScroll的精华部分组成一个阉割版iScroll

并总结下iScroll的一些地方结束iScroll的学习，然后彻底扑向nodeJS了

iScroll事件机制

我们平时所说的事件机制其实应该分开，分成两块：

① DOM的事件相关

② 系统自建事件机制

在我们前端的页面里面，最重要的当然是交互，交互其实就是一个个事件的体现，所以任何前端库的核心一定是其事件，iScroll就是由三大事件串联整个流程

iScroll同样包括DOM事件以及自建事件，其中DOM事件便是浏览器的表现，而自建事件就是用户可以插一脚的地方了

DOM事件参数盲点

iScroll DOM事件实现与可能让一些不熟悉javascript事件机制的同学大跌眼镜（在与Aaron讨论前，我其实也摸不着头脑）

简单来说，标准情况下我们这样实现事件注册

el.addEventListener(type, fn, capture)

其中的所有参数都没有问题，唯独第二个参数，为什么这么说呢？请看以下代码：

 var eventObj = {};

 eventObj.a = 1;

 document.addEventListener('click', eventObj)

各位觉得这个代码有问题吗？第二个参数显然不是一个函数，但是function也是object呢，其实这样也是javascript规范之一，不知道只是我们寡闻而已

这样写有以下好处，我们的作用域就是我们的对象：

var eventObj = {};

eventObj.a = 1;

eventObj.handleEvent = function () {

  alert(this.a);

}

document.addEventListener('click', eventObj)

//这个代码点击会弹出1

这个便是一个javascript规范，我们传入的对象如果具有handleEvent 函数，便会执行，如果没有，此次注册便无意义，这样绑定的话，作用域便指向了eventObj

iScroll DOM 事件

有了以上知识，再说回iScroll的DOM事件：

① 构造函数会执行_initEvents方法初始化事件，我们抽出我们关心的一块：

 eventType(this.wrapper, 'touchstart', this);

 eventType(target, 'touchmove', this);

 eventType(target, 'touchcancel', this);

 eventType(target, 'touchend', this);
var eventType = remove ? utils.removeEvent : utils.addEvent

这个代码其实就是调用的addEvent方法：

 me.addEvent = function (el, type, fn, capture) {

   el.addEventListener(type, fn, !!capture);

 };

那么iScroll事件绑定的具体点便捕捉到了：

可以看到我们这里的fn是一个对象，但是不要担心，我们的具体的方法在此：

 handleEvent: function (e) {

   switch (e.type) {

     case 'touchstart':

     case 'MSPointerDown':

     case 'mousedown':

       this._start(e);

       break;

     case 'touchmove':

     case 'MSPointerMove':

     case 'mousemove':

       this._move(e);

       break;

     case 'touchend':

     case 'MSPointerUp':

     case 'mouseup':

     case 'touchcancel':

     case 'MSPointerCancel':

     case 'mousecancel':

       this._end(e);

       break;

     case 'orientationchange':

     case 'resize':

       this._resize();

       break;

     case 'transitionend':

     case 'webkitTransitionEnd':

     case 'oTransitionEnd':

     case 'MSTransitionEnd':

       this._transitionEnd(e);

       break;

     case 'wheel':

     case 'DOMMouseScroll':

     case 'mousewheel':

       this._wheel(e);

       break;

     case 'keydown':

       this._key(e);

       break;

     case 'click':

       if (!e._constructed) {

         e.preventDefault();

         e.stopPropagation();

       }

       break;

   }

 }

高大帅哈，如此整个iScroll的DOM事件相关就没问题了，在具体就回到了上次的三大事件点了

自定义事件机制

其实在我们学习backbone时候我们就提到了这块操作

 var Events = Backbone.Events = {

   on: function (name, callback, context) {

     if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;

     this._events || (this._events = {});

     var events = this._events[name] || (this._events[name] = []);

     events.push({ callback: callback, context: context, ctx: context || this });

     return this;

   },

   off: function (name, callback, context) {

     var retain, ev, events, names, i, l, j, k;

     if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;

     if (!name && !callback && !context) {

       this._events = {};

       return this;

     }

     names = name ? [name] : _.keys(this._events);

     for (i = 0, l = names.length; i < l; i++) {

       name = names[i];

       if (events = this._events[name]) {

         this._events[name] = retain = [];

         if (callback || context) {

           for (j = 0, k = events.length; j < k; j++) {

             ev = events[j];

             if ((callback && callback !== ev.callback && callback !== ev.callback._callback) ||

               (context && context !== ev.context)) {

               retain.push(ev);

             }

           }

         }

         if (!retain.length) delete this._events[name];

       }

     }

     return this;

   },

   trigger: function (name) {

     if (!this._events) return this;

     var args = slice.call(arguments, 1);

     if (!eventsApi(this, 'trigger', name, args)) return this;

     var events = this._events[name];

     var allEvents = this._events.all;

     if (events) triggerEvents(events, args);

     if (allEvents) triggerEvents(allEvents, arguments);

     return this;

   },

 };

 // Regular expression used to split event strings.

 var eventSplitter = /\s+/;

 // Implement fancy features of the Events API such as multiple event

 // names `"change blur"` and jQuery-style event maps `{change: action}`

 // in terms of the existing API.

 var eventsApi = function (obj, action, name, rest) {

   if (!name) return true;

   // Handle event maps.

   if (typeof name === 'object') {

     for (var key in name) {

       obj[action].apply(obj, [key, name[key]].concat(rest));

     }

     return false;

   }

   // Handle space separated event names.

   if (eventSplitter.test(name)) {

     var names = name.split(eventSplitter);

     for (var i = 0, l = names.length; i < l; i++) {

       obj[action].apply(obj, [names[i]].concat(rest));

     }

     return false;

   }

   return true;

 };

所谓自建事件机制，其实是唬人的，就是用一个数组保存各个阶段的函数，到特定阶段执行便可，iScroll这块做的尤其简单，而且又注册没有注销：

 on: function (type, fn) {

   if (!this._events[type]) {

     this._events[type] = [];

   }

   this._events[type].push(fn);

 },

 _execEvent: function (type) {

   if (!this._events[type]) {

     return;

   }

   var i = 0,

     l = this._events[type].length;

   if (!l) {

     return;

   }

   for (; i < l; i++) {

     this._events[type][i].call(this);

   }

 },

iScroll在构造函数中定义了_events这一对象，然后便可以开开心心使用on注册各种各样的事件了，其中每种事件对象是一个数组

定义好好，在特定阶段，比如touchstart阶段，便开开有没有注册相关事件，注册了便执行一发即可：

this._execEvent('scrollEnd');

这里要注意的是，他的this执行为iScroll，那么就可以使用很多有用的属性了

至此，iScroll事件机制一块我们便分析结束了，接下来来简单看看我们关心的滚动条的实现

这里需要注意的一点是，这种实现的好处其实一个是方便在各个阶段注册、触发相关事件，主要缘由还是便于放出接口给外部调用

滚动条的实现

其实到这里，我们队iScroll的解析都七七八八了，这里我不得不说，iScroll虽然动画感受做的好以外，还是可能导致一些问题

iScroll本身没什么问题，问题出在各种各样的浏览器中，据我读代码的感受以及平时工作中遇到的问题，我相信项目中使用iScroll的朋友有可能

当然，这些问题出现在手机中：

① 当滑动碰到input可能出现滑动不顺的问题

② 滑动时候具有input时候滑动顺畅的话，input获取焦点不易

③ 点击时候可能出现问题（可能不能点击，可能双次点击）

④ 当你在ios点击时候碰到alert类似的东西，再点其它地方事件可能会重复触发

⑤ ......

当然以上问题只是我的猜测，是否真会导致问题还得经过验证，请各位不要搭理我，如果真有类似问题，获取其它问题请留言

上面扯了那么多也没有什么意义，我们现在还是来看滚动条的实现吧：

滚动条

iScroll为滚动条单独搞了一个类出来，因为在iScroll里面的滚动条是一等公民，具有以下特性：

① 鼠标中间滚动

② 可拖动滚动条

其实，多数时间以上功能可以取缔，尤其在手机上，其可点击区域还是过小，单独用于手机的话，鼠标中间也无意义

PS：iscroll使用键盘上下键也可以滚动，真的是大而全的功能啊，但是无意义......至少在移动端意义不大，去掉还可以节约1k的流量

 function Indicator(scroller, options) {

   this.wrapper = typeof options.el == 'string' ? document.querySelector(options.el) : options.el;

   this.wrapperStyle = this.wrapper.style;

   this.indicator = this.wrapper.children[0];

   this.indicatorStyle = this.indicator.style;

   this.scroller = scroller;

   this.options = {

     listenX: true,

     listenY: true,

     interactive: false,

     resize: true,

     defaultScrollbars: false,

     shrink: false,

     fade: false,

     speedRatioX: 0,

     speedRatioY: 0

   };

   for (var i in options) {

     this.options[i] = options[i];

   }

   this.sizeRatioX = 1;

   this.sizeRatioY = 1;

   this.maxPosX = 0;

   this.maxPosY = 0;

   if (this.options.interactive) {

     if (!this.options.disableTouch) {

       utils.addEvent(this.indicator, 'touchstart', this);

       utils.addEvent(window, 'touchend', this);

     }

     if (!this.options.disablePointer) {

       utils.addEvent(this.indicator, 'MSPointerDown', this);

       utils.addEvent(window, 'MSPointerUp', this);

     }

     if (!this.options.disableMouse) {

       utils.addEvent(this.indicator, 'mousedown', this);

       utils.addEvent(window, 'mouseup', this);

     }

   }

   if (this.options.fade) {

     this.wrapperStyle[utils.style.transform] = this.scroller.translateZ;

     this.wrapperStyle[utils.style.transitionDuration] = utils.isBadAndroid ? '0.001s' : '0ms';

     this.wrapperStyle.opacity = '0';

   }

 }

设个就是滚动条的构造函数，这有一个关键点：

interactiveScrollbars: true

默认我们的滚动条是不会具有滚动等事件的，如果设置了此参数便具有可拖动特性了

 if (this.options.interactive) {

   if (!this.options.disableTouch) {

     utils.addEvent(this.indicator, 'touchstart', this);

     utils.addEvent(window, 'touchend', this);

   }

   if (!this.options.disablePointer) {

     utils.addEvent(this.indicator, 'MSPointerDown', this);

     utils.addEvent(window, 'MSPointerUp', this);

   }

   if (!this.options.disableMouse) {

     utils.addEvent(this.indicator, 'mousedown', this);

     utils.addEvent(window, 'mouseup', this);

   }

 }

这里虽然给滚动条绑定的事件，但是会一并操作我们的body主体，但是我们后面会直接忽略这步操作

 if (this.options.fade) {

   this.wrapperStyle[utils.style.transform] = this.scroller.translateZ;

   this.wrapperStyle[utils.style.transitionDuration] = utils.isBadAndroid ? '0.001s' : '0ms';

   this.wrapperStyle.opacity = '0';

 }

然后，会给滚动条一个渐隐的效果，这个影响较小，直接使用了CSS3实现

下面继续实现了他的事件handleEvent

 handleEvent: function (e) {

   switch (e.type) {

     case 'touchstart':

     case 'MSPointerDown':

     case 'mousedown':

       this._start(e);

       break;

     case 'touchmove':

     case 'MSPointerMove':

     case 'mousemove':

       this._move(e);

       break;

     case 'touchend':

     case 'MSPointerUp':

     case 'mouseup':

     case 'touchcancel':

     case 'MSPointerCancel':

     case 'mousecancel':

       this._end(e);

       break;

   }

 }

接下来又是touch几个事件了：

 _start: function (e) {

   var point = e.touches ? e.touches[0] : e;

   e.preventDefault();

   e.stopPropagation();

   this.transitionTime();

   this.initiated = true;

   this.moved = false;

   this.lastPointX = point.pageX;

   this.lastPointY = point.pageY;

   this.startTime = utils.getTime();

   if (!this.options.disableTouch) {

     utils.addEvent(window, 'touchmove', this);

   }

   if (!this.options.disablePointer) {

     utils.addEvent(window, 'MSPointerMove', this);

   }

   if (!this.options.disableMouse) {

     utils.addEvent(window, 'mousemove', this);

   }

   this.scroller._execEvent('beforeScrollStart');

 },

 _move: function (e) {

   var point = e.touches ? e.touches[0] : e,

     deltaX, deltaY,

     newX, newY,

     timestamp = utils.getTime();

   if (!this.moved) {

     this.scroller._execEvent('scrollStart');

   }

   this.moved = true;

   deltaX = point.pageX - this.lastPointX;

   this.lastPointX = point.pageX;

   deltaY = point.pageY - this.lastPointY;

   this.lastPointY = point.pageY;

   newX = this.x + deltaX;

   newY = this.y + deltaY;

   this._pos(newX, newY);

   // INSERT POINT: indicator._move

   e.preventDefault();

   e.stopPropagation();

 },

 _end: function (e) {

   if (!this.initiated) {

     return;

   }

   this.initiated = false;

   e.preventDefault();

   e.stopPropagation();

   utils.removeEvent(window, 'touchmove', this);

   utils.removeEvent(window, 'MSPointerMove', this);

   utils.removeEvent(window, 'mousemove', this);

   if (this.scroller.options.snap) {

     var snap = this.scroller._nearestSnap(this.scroller.x, this.scroller.y);

     var time = this.options.snapSpeed || Math.max(

             Math.max(

                 Math.min(Math.abs(this.scroller.x - snap.x), 1000),

                 Math.min(Math.abs(this.scroller.y - snap.y), 1000)

             ), 300);

     if (this.scroller.x != snap.x || this.scroller.y != snap.y) {

       this.scroller.directionX = 0;

       this.scroller.directionY = 0;

       this.scroller.currentPage = snap;

       this.scroller.scrollTo(snap.x, snap.y, time, this.scroller.options.bounceEasing);

     }

   }

   if (this.moved) {

     this.scroller._execEvent('scrollEnd');

   }

 },

这个地方由于我们后面不会实现便直接不予关注了

结语

突然来了几个BUG，等下要发布测试环境了，今天暂时到这里，我们下次继续好了，下次我们就直接分离iScroll了，抽出我们想要的功能

最新文章

  1. SQL Server-聚焦APPLY运算符（二十七）
  2. Android Studio升级后，开启时遇到tools.jar seems to be not in Android Studio错误？
  3. knockout.js的简介和简单使用
  4. 使用C#的is和as操作符来转型
  5. C语言中的关键字
  6. 字符集设置为UTF-8
  7. hdu 4539(状态压缩dp)
  8. Java web的读取Excel简单Demo
  9. php-fpm 启动不了 libiconv.so.2找不到
  10. SharePoint中修改密码的WEB Part之终极版:即可以修改AD，又可以修改本机用户密码的Web Part!!
  11. spring boot1.3.0版本及以上版本profile指定参数无法被打入
  12. 【JAVA】导出jar包时，Class files on classpath not found
  13. 取消svn版本控制
  14. spring事务管理方式，aop
  15. ch03 课下作业——缓冲区溢出漏洞实验
  16. 洛古 P2568 莫比乌斯+暴力
  17. 学习笔记TF056:TensorFlow MNIST，数据集、分类、可视化
  18. Linux-3.0.8中基于S5PV210的GPIO模块代码追踪和分析
  19. Chakra调试笔记 TypedArray
  20. cvc-complex-type.2.4.a: Invalid content was found starting with element &#39;property&#39;. One of &#39;{&quot;http:// www.springframework.org/schema/beans&quot;:import, &quot;http:// www.springframework.org/schema/beans&quot;:a

热门文章

  1. hibernate（九）多对多关联
  2. Objective-C中@property的所有属性详解
  3. .NET应用服务器
  4. 机器学习&amp;数据挖掘笔记_18（PGM练习二：贝叶斯网络在遗传图谱在的应用）
  5. 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像
  6. 【环境配置】Linux环境下下载、配置java环境、安装eclipse、建立eclipse快捷方式详解
  7. JVM的GC概述
  8. Android上滑手势触发和不增加布局层级扩大点击区域
  9. SQL Server如何在变长列上存储索引
  10. BitCoinJ之Hello World示例程序