[关闭]
@kirkzwy 2014-11-27T10:53:17.000000Z 字数 11802 阅读 3172

flipsnap.js源码学习笔记

coding flipsnap.js

1.引入全局命名空间

  1. (function(window, document, undefined){})(window, window.document)

2.定义全局变量

  1. /* 新建div节点 */
  2. var div = document.createElement('div');
  3. /* 浏览器前缀 */
  4. var prefix = ['webkit', 'moz', 'o', 'ms'];
  5. /* 存储属性对象 */
  6. var saveProp = {};
  7. /* 检测浏览器支持的对象 */
  8. var support = Flipsnap.support = {};
  9. /* 手势状态判断 */
  10. var gestureStart = false;
  11. /* 阀值设置 */
  12. var DISTANCE_THRESHOLD = 5;
  13. var ANGLE_THREHOLD = 55;

3.分别检测对transform3d， transform及trasition 3个css3属性的支持程度

  1. support.transform3d = hasProp([
  2.   'perspectiveProperty',
  3.   'WebkitPerspective',
  4.   'MozPerspective',
  5.   'OPerspective',
  6.   'msPerspective'
  7. ]);
  9. support.transform = hasProp([
  10.   'transformProperty',
  11.   'WebkitTransform',
  12.   'MozTransform',
  13.   'OTransform',
  14.   'msTransform'
  15. ]);
  17. support.transition = hasProp([
  18.   'transitionProperty',
  19.   'WebkitTransitionProperty',
  20.   'MozTransitionProperty',
  21.   'OTransitionProperty',
  22.   'msTransitionProperty'
  23. ]);

使用hasProp()函数

  1. function hasProp(props) {
  2.   return some(props, function(prop) {
  3.     return div.style[ prop ] !== undefined;
  4.   });
  5. }

其中some()闭包函数##为,只要数组内其中一个为true即判定为true

  1. function some(ary, callback) {
  2.   for (var i = 0, len = ary.length; i < len; i++) {
  3.     if (callback(ary[i], i)) {
  4.       return true;
  5.     }
  6.   }
  7.   return false;
  8. }

4.其他浏览器的属性支持（事件监听属性及IE的指针事件的支持）及总的css动画属性支持判断

  1. support.addEventListener = 'addEventListener' in window;
  2. support.mspointer = window.navigator.msPointerEnabled;
  4. support.cssAnimation = (support.transform3d || support.transform) && support.transition;

5.定义事件种类及相关事件对象

  1. var eventTypes = ['touch', 'mouse'];
  2. var events = {
  3.   start: {
  4.     touch: 'touchstart',
  5.     mouse: 'mousedown'
  6.   },
  7.   move: {
  8.     touch: 'touchmove',
  9.     mouse: 'mousemove'
  10.   },
  11.   end: {
  12.     touch: 'touchend',
  13.     mouse: 'mouseup'
  14.   }
  15. };

6.添加事件监听

  1. if (support.addEventListener) {
  2.   document.addEventListener('gesturestart', function() {
  3.     gestureStart = true;
  4.   });
  6.   document.addEventListener('gestureend', function() {
  7.     gestureStart = false;
  8.   });
  9. }

7.定义全局新类Flipsnap()，并初始化新类,其中使用了Flipsnap类的初始方法init（）

  1. function Flipsnap(element, opts) {
  2.   return (this instanceof Flipsnap)
  3.     ? this.init(element, opts)
  4.     : new Flipsnap(element, opts);
  5. }

8.定义Flipsnap类的初始化方法init（）

  1. Flipsnap.prototype.init = function(element, opts) {
  2.   var self = this;
  4.   // set element
  5.   self.element = element;
  6.   if (typeof element === 'string') {
  7.     self.element = document.querySelector(element);
  8.   }
  10.   if (!self.element) {
  11.     throw new Error('element not found');
  12.   }
  14.   if (support.mspointer) {
  15.     self.element.style.msTouchAction = 'pan-y';
  16.   }
  18.   // set opts
  19.   opts = opts || {};
  20.   self.distance = opts.distance;
  21.   self.maxPoint = opts.maxPoint;
  22.   self.disableTouch = (opts.disableTouch === undefined) ? false : opts.disableTouch;
  23.   self.disable3d = (opts.disable3d === undefined) ? false : opts.disable3d;
  24.   self.transitionDuration = (opts.transitionDuration === undefined) ? '350ms' : opts.transitionDuration + 'ms';
  25.   self.threshold = opts.threshold || 0;
  27.   // set property
  28.   self.currentPoint = 0;
  29.   self.currentX = 0;
  30.   self.animation = false;
  31.   self.use3d = support.transform3d;
  32.   if (self.disable3d === true) {
  33.     self.use3d = false;
  34.   }
  36.   // set default style
  37.   if (support.cssAnimation) {
  38.     self._setStyle({
  39.       transitionProperty: getCSSVal('transform'),
  40.       transitionTimingFunction: 'cubic-bezier(0,0,0.25,1)',
  41.       transitionDuration: '0ms',
  42.       transform: self._getTranslate(0)
  43.     });
  44.   }
  45.   else {
  46.     self._setStyle({
  47.       position: 'relative',
  48.       left: '0px'
  49.     });
  50.   }
  52.   // initilize
  53.   self.refresh();
  55.   eventTypes.forEach(function(type) {
  56.     // 为什么要传人self作回调函数，（self=Flipsnap（））？
  57.     self.element.addEventListener(events.start[type], self, false);
  58.   });
  60.   return self;
  61. };

其中_setStyle()为FLipsnap的内部方法

  1. Flipsnap.prototype._setStyle = function(styles) {
  2.   var self = this;
  3.   var style = self.element.style;
  5.   for (var prop in styles) {
  6.     setStyle(style, prop, styles[prop]);
  7.   }
  8. };

其中setStyle()函数，设置对应css属性为对应值，具体为

  1. function setStyle(style, prop, val) {
  2.   var _saveProp = saveProp[ prop ];
  3.   if (_saveProp) {
  4.     style[ _saveProp ] = val;
  5.   }
  6.   else if (style[ prop ] !== undefined) {
  7.     saveProp[ prop ] = prop;
  8.     style[ prop ] = val;
  9.   }
  10.   else {
  11.     some(prefix, function(_prefix) {
  12.       var _prop = ucFirst(_prefix) + ucFirst(prop);
  13.       if (style[ _prop ] !== undefined) {
  14.         saveProp[ prop ] = _prop;
  15.         style[ _prop ] = val;
  16.         return true;
  17.       }
  18.     });
  19.   }
  20. }

并在saveProp中设置过的属性

getCSSVal()函数用于获取已用的css属性值，具体如下

  1. function getCSSVal(prop) {
  2.   if (div.style[ prop ] !== undefined) {
  3.     return prop;
  4.   }
  5.   else {
  6.     var ret;
  7.     some(prefix, function(_prefix) {
  8.       var _prop = ucFirst(_prefix) + ucFirst(prop);
  9.       if (div.style[ _prop ] !== undefined) {
  10.         ret = '-' + _prefix + '-' + prop;
  11.         return true;
  12.       }
  13.     });
  14.     return ret;
  15.   }
  16. }

ucFirst()函数用于将首字母变大写，具体如下

  1. function ucFirst(str) {
  2.   return str.charAt(0).toUpperCase() + str.substr(1);
  3. }

cubic-bezier(0,0,0.25,1)为css3的变形值

self._getTranslate为Flipsnap的内部方法

定义3d属性值，具体为

  1. Flipsnap.prototype._getTranslate = function(x) {
  2.   var self = this;
  4.   return self.use3d
  5.     ? 'translate3d(' + x + 'px, 0, 0)'
  6.     : 'translate(' + x + 'px, 0)';
  7. };

refresh()的Flipsnap方法，具体如下

  1. Flipsnap.prototype.refresh = function() {
  2.   var self = this;
  4.   // setting max point
  5.   self._maxPoint = (self.maxPoint === undefined) ? (function() {
  6.     var childNodes = self.element.childNodes,
  7.       itemLength = -1,
  8.       i = 0,
  9.       len = childNodes.length,
  10.       node;
  11.     for(; i < len; i++) {
  12.       node = childNodes[i];
  13.       if (node.nodeType === 1) {
  14.         itemLength++;
  15.       }
  16.     }
  18.     return itemLength;
  19.   })() : self.maxPoint;
  21.   // setting distance
  22.   if (self.distance === undefined) {
  23.     if (self._maxPoint < 0) {
  24.       self._distance = 0;
  25.     }
  26.     else {
  27.       self._distance = self.element.scrollWidth / (self._maxPoint + 1);
  28.     }
  29.   }
  30.   else {
  31.     self._distance = self.distance;
  32.   }
  34.   // setting maxX
  35.   self._maxX = -self._distance * self._maxPoint;
  37.   self.moveToPoint();
  38. };

通过refresh方法设定_maxPoint（最多移动次数）、_distance（移动距离）和_maxX（最大x轴偏向值）属性，从而控制最多的滑动次数；

moveToPoint()的Flipsnap方法,判定是否需要滑动并触发事件，具体如下

  1. Flipsnap.prototype.moveToPoint = function(point, transitionDuration) {
  2.   var self = this;
  4.   transitionDuration = transitionDuration === undefined
  5.     ? self.transitionDuration : transitionDuration + 'ms';
  7.   var beforePoint = self.currentPoint;
  9.   // not called from `refresh()`
  10.   if (point === undefined) {
  11.     point = self.currentPoint;
  12.   }
  14.   if (point < 0) {
  15.     self.currentPoint = 0;
  16.   }
  17.   else if (point > self._maxPoint) {
  18.     self.currentPoint = self._maxPoint;
  19.   }
  20.   else {
  21.     self.currentPoint = parseInt(point, 10);
  22.   }
  24.   if (support.cssAnimation) {
  25.     self._setStyle({ transitionDuration: transitionDuration });
  26.   }
  27.   else {
  28.     self.animation = true;
  29.   }
  30.   self._setX(- self.currentPoint * self._distance, transitionDuration);
  32.   if (beforePoint !== self.currentPoint) { // is move?
  33.     // `fsmoveend` is deprecated
  34.     // `fspointmove` is recommend.
  35.     self._triggerEvent('fsmoveend', true, false);
  36.     self._triggerEvent('fspointmove', true, false);
  37.   }
  38. };

其中_setX()为Flipsnap的内部方法，具体如下

  1. Flipsnap.prototype._setX = function(x, transitionDuration) {
  2.   var self = this;
  4.   self.currentX = x;
  5.   if (support.cssAnimation) {
  6.     self.element.style[ saveProp.transform ] = self._getTranslate(x);
  7.   }
  8.   else {
  9.     if (self.animation) {
  10.       self._animate(x, transitionDuration || self.transitionDuration);
  11.     }
  12.     else {
  13.       self.element.style.left = x + 'px';
  14.     }
  15.   }
  16. };

其中_animate()为Flipsnap的内部方法，具体如下

  1. Flipsnap.prototype._animate = function(x, transitionDuration) {
  2.   var self = this;
  4.   var elem = self.element;
  5.   var begin = +new Date();
  6.   var from = parseInt(elem.style.left, 10);
  7.   var to = x;
  8.   var duration = parseInt(transitionDuration, 10);
  9.   var easing = function(time, duration) {
  10.     return -(time /= duration) * (time - 2);
  11.   };
  12.   var timer = setInterval(function() {
  13.     var time = new Date() - begin;
  14.     var pos, now;
  15.     if (time > duration) {
  16.       clearInterval(timer);
  17.       now = to;
  18.     }
  19.     else {
  20.       pos = easing(time, duration);
  21.       now = pos * (to - from) + from;
  22.     }
  23.     elem.style.left = now + "px";
  24.   }, 10);
  25. };

其中_triggerEvent() 为Flipsnap的内部方法，具体如下

  1. Flipsnap.prototype._triggerEvent = function(type, bubbles, cancelable, data) {
  2.   var self = this;
  4.   var ev = document.createEvent('Event');
  5.   ev.initEvent(type, bubbles, cancelable);
  7.   if (data) {
  8.     for (var d in data) {
  9.       if (data.hasOwnProperty(d)) {
  10.         ev[d] = data[d];
  11.       }
  12.     }
  13.   }
  15.   return self.element.dispatchEvent(ev);
  16. };

9.定义Flipsnap类的事件控制方法handleEvent()

  1. Flipsnap.prototype.handleEvent = function(event) {
  2.   var self = this;
  4.   switch (event.type) {
  5.     // start
  6.     case events.start.touch: self._touchStart(event, 'touch'); break;
  7.     case events.start.mouse: self._touchStart(event, 'mouse'); break;
  9.     // move
  10.     case events.move.touch: self._touchMove(event, 'touch'); break;
  11.     case events.move.mouse: self._touchMove(event, 'mouse'); break;
  13.     // end
  14.     case events.end.touch: self._touchEnd(event, 'touch'); break;
  15.     case events.end.mouse: self._touchEnd(event, 'mouse'); break;
  17.     // click
  18.     case 'click': self._click(event); break;
  19.   }
  20. };

通过event.type进行条件判断，确定执行Flipsnap的四个内部处理方法中的一个

_touchStart()方法

  1. Flipsnap.prototype._touchStart = function(event, type) {
  2.   var self = this;
  4.   if (self.disableTouch || self.scrolling || gestureStart) {
  5.     return;
  6.   }
  8.   self.element.addEventListener(events.move[type], self, false);
  9.   document.addEventListener(events.end[type], self, false);
  11.   var tagName = event.target.tagName;
  12.   if (type === 'mouse' && tagName !== 'SELECT' && tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'BUTTON') {
  13.     event.preventDefault();
  14.   }
  16.   if (support.cssAnimation) {
  17.     self._setStyle({ transitionDuration: '0ms' });
  18.   }
  19.   else {
  20.     self.animation = false;
  21.   }
  22.   self.scrolling = true;
  23.   self.moveReady = false;
  24.   self.startPageX = getPage(event, 'pageX');
  25.   self.startPageY = getPage(event, 'pageY');
  26.   self.basePageX = self.startPageX;
  27.   self.directionX = 0;
  28.   self.startTime = event.timeStamp;
  29.   self._triggerEvent('fstouchstart', true, false);
  30. };

通过touchStart方法记录下触摸开始点开始时间等参数，并触发fstouchstart事件；

getPage()函数如下

  1. function getPage(event, page) {
  2.   return event.changedTouches ? event.changedTouches[0][page] : event[page];
  3. }

_touchMove()方法如下

  1. Flipsnap.prototype._touchMove = function(event, type) {
  2.   var self = this;
  4.   if (!self.scrolling || gestureStart) {
  5.     return;
  6.   }
  8.   var pageX = getPage(event, 'pageX');
  9.   var pageY = getPage(event, 'pageY');
  10.   var distX;
  11.   var newX;
  13.   if (self.moveReady) {
  14.     event.preventDefault();
  16.     distX = pageX - self.basePageX;
  17.     newX = self.currentX + distX;
  18.     if (newX >= 0 || newX < self._maxX) {
  19.       newX = Math.round(self.currentX + distX / 3);
  20.     }
  22.     // When distX is 0, use one previous value.
  23.     // For android firefox. When touchend fired, touchmove also
  24.     // fired and distX is certainly set to 0. 
  25.     self.directionX =
  26.       distX === 0 ? self.directionX :
  27.       distX > 0 ? -1 : 1;
  29.     // if they prevent us then stop it
  30.     var isPrevent = !self._triggerEvent('fstouchmove', true, true, {
  31.       delta: distX,
  32.       direction: self.directionX
  33.     });
  35.     if (isPrevent) {
  36.       self._touchAfter({
  37.         moved: false,
  38.         originalPoint: self.currentPoint,
  39.         newPoint: self.currentPoint,
  40.         cancelled: true
  41.       });
  42.     } else {
  43.       self._setX(newX);
  44.     }
  45.   }
  46.   else {
  47.     // https://github.com/pxgrid/js-flipsnap/pull/36
  48.     var triangle = getTriangleSide(self.startPageX, self.startPageY, pageX, pageY);
  49.     if (triangle.z > DISTANCE_THRESHOLD) {
  50.       if (getAngle(triangle) > ANGLE_THREHOLD) {
  51.         event.preventDefault();
  52.         self.moveReady = true;
  53.         self.element.addEventListener('click', self, true);
  54.       }
  55.       else {
  56.         self.scrolling = false;
  57.       }
  58.     }
  59.   }
  61.   self.basePageX = pageX;
  62. };

其中getTriangleSide()函数如下

  1. function getTriangleSide(x1, y1, x2, y2) {
  2.   var x = Math.abs(x1 - x2);
  3.   var y = Math.abs(y1 - y2);
  4.   var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  6.   return {
  7.     x: x,
  8.     y: y,
  9.     z: z
  10.   };
  11. }

其中getAngle()函数如下

  1. function getAngle(triangle) {
  2.   var cos = triangle.y / triangle.z;
  3.   var radina = Math.acos(cos);
  5.   return 180 / (Math.PI / radina);
  6. }

_touchEnd()方法如下

  1. Flipsnap.prototype._touchEnd = function(event, type) {
  2.   var self = this;
  4.   self.element.removeEventListener(events.move[type], self, false);
  5.   document.removeEventListener(events.end[type], self, false);
  7.   if (!self.scrolling) {
  8.     return;
  9.   }
  11.   var newPoint = -self.currentX / self._distance;
  12.   newPoint =
  13.     (self.directionX > 0) ? Math.ceil(newPoint) :
  14.     (self.directionX < 0) ? Math.floor(newPoint) :
  15.     Math.round(newPoint);
  17.   if (newPoint < 0) {
  18.     newPoint = 0;
  19.   }
  20.   else if (newPoint > self._maxPoint) {
  21.     newPoint = self._maxPoint;
  22.   }
  24.   if (Math.abs(self.startPageX - self.basePageX) < self.threshold) {
  25.     newPoint = self.currentPoint;
  26.   }
  28.   self._touchAfter({
  29.     moved: newPoint !== self.currentPoint,
  30.     originalPoint: self.currentPoint,
  31.     newPoint: newPoint,
  32.     cancelled: false
  33.   });
  35.   self.moveToPoint(newPoint);
  36. };

触发fstouchend事件

其中_touchAfter()方法如下

  1. Flipsnap.prototype._touchAfter = function(params) {
  2.   var self = this;
  4.   self.scrolling = false;
  5.   self.moveReady = false;
  7.   setTimeout(function() {
  8.     self.element.removeEventListener('click', self, true);
  9.   }, 200);
  11.   self._triggerEvent('fstouchend', true, false, params);
  12. };

_clic()方法如下

  1. Flipsnap.prototype._click = function(event) {
  2.   var self = this;
  4.   event.stopPropagation();
  5.   event.preventDefault();
  6. };

10.定义Flipsnap类的状态判断方法hasNext()

  1. Flipsnap.prototype.hasNext = function() {
  2.   var self = this;
  4.   return self.currentPoint < self._maxPoint;
  5. };

11.定义Flipsnap类的状态判断方法hasPrev()

  1. Flipsnap.prototype.hasPrev = function() {
  2.   var self = this;
  4.   return self.currentPoint > 0;
  5. };

12.定义Flipsnap类的跳转下一个方法toNext()

  1. Flipsnap.prototype.toNext = function(transitionDuration) {
  2.   var self = this;
  4.   if (!self.hasNext()) {
  5.     return;
  6.   }
  8.   self.moveToPoint(self.currentPoint + 1, transitionDuration);
  9. };

13.定义Flipsnap类的跳转上一个方法toPrev()

  1. Flipsnap.prototype.toPrev = function(transitionDuration) {
  2.   var self = this;
  4.   if (!self.hasPrev()) {
  5.     return;
  6.   }
  8.   self.moveToPoint(self.currentPoint - 1, transitionDuration);
  9. };

14.定义Flipsnap类的跳转上一个方法destroy()

  1. Flipsnap.prototype.destroy = function() {
  2.   var self = this;
  4.   eventTypes.forEach(function(type) {
  5.     self.element.removeEventListener(events.start[type], self, false);
  6.   });
  7. };

取消在各个节点上的事件监听

15.将Flipsnap模块化

  1. if (typeof exports == 'object') {
  2.   module.exports = Flipsnap;
  3. }
  4. else if (typeof define == 'function' && define.amd) {
  5.   define(function() {
  6.     return Flipsnap;
  7.   });
  8. }
  9. else {
  10.   window.Flipsnap = Flipsnap;
  11. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注