Hammer.js分析（一）——基礎結構

從github上面將源碼下載下來，會發現有個src文件夾。當前版本是2.0.6。

總的結構如下：

 

一、常量

這里將常量全部列在一起是可以在對比源碼的時候，更方便的查看相應內容。

var VENDOR_PREFIXES = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];//前綴
var TEST_ELEMENT = document.createElement('div');//測試元素
var TYPE_FUNCTION = 'function';//函數

//----------------------------Input----------------------------------------
var MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;//判斷移動端的正則

var SUPPORT_TOUCH = ('ontouchstart' in window);//判斷是否支持touch事件
var SUPPORT_POINTER_EVENTS = prefixed(window, 'PointerEvent') !== undefined;//判斷是否支持指針事件
var SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);//判斷是觸屏

var INPUT_TYPE_TOUCH = 'touch';
var INPUT_TYPE_PEN = 'pen';
var INPUT_TYPE_MOUSE = 'mouse';
var INPUT_TYPE_KINECT = 'kinect';

var COMPUTE_INTERVAL = 25;

var INPUT_START = 1;//1 2 4 8 16方便使用"與"跟"或"判斷
var INPUT_MOVE = 2;
var INPUT_END = 4;
var INPUT_CANCEL = 8;

var DIRECTION_NONE = 1;
var DIRECTION_LEFT = 2;
var DIRECTION_RIGHT = 4;
var DIRECTION_UP = 8;
var DIRECTION_DOWN = 16;

var DIRECTION_HORIZONTAL = DIRECTION_LEFT | DIRECTION_RIGHT;
var DIRECTION_VERTICAL = DIRECTION_UP | DIRECTION_DOWN;
var DIRECTION_ALL = DIRECTION_HORIZONTAL | DIRECTION_VERTICAL;

var PROPS_XY = ['x', 'y'];
var PROPS_CLIENT_XY = ['clientX', 'clientY'];

var MOUSE_ELEMENT_EVENTS = 'mousedown';
var MOUSE_WINDOW_EVENTS = 'mousemove mouseup';

var POINTER_ELEMENT_EVENTS = 'pointerdown';
var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel';

var SINGLE_TOUCH_TARGET_EVENTS = 'touchstart';
var SINGLE_TOUCH_WINDOW_EVENTS = 'touchstart touchmove touchend touchcancel';

var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel';

//----------------------------TouchAction----------------------------------------
var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined;

// magical touchAction value
var TOUCH_ACTION_COMPUTE = 'compute';
var TOUCH_ACTION_AUTO = 'auto';
var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented
var TOUCH_ACTION_NONE = 'none';
var TOUCH_ACTION_PAN_X = 'pan-x';
var TOUCH_ACTION_PAN_Y = 'pan-y';

//----------------------------Recognizer----------------------------------------
var STATE_POSSIBLE = 1;
var STATE_BEGAN = 2;
var STATE_CHANGED = 4;
var STATE_ENDED = 8;
var STATE_RECOGNIZED = STATE_ENDED;//已完成recognize
var STATE_CANCELLED = 16;
var STATE_FAILED = 32;


//----------------------------Manager----------------------------------------
var STOP = 1;
var FORCED_STOP = 2;

 

二、utils.js

各種工具方法包含其中。

1）setTimeoutContext：封裝了一下setTimeout

2）invokeArrayArg：遍歷數組對象，並執行其中的某個方法

3）each：遍歷一個object對象或數組

4）deprecate：過時警告與棧追蹤

5）assign：拷貝對象，target中的屬性將會覆蓋source中的屬性。目標ES6中新增了一個Object.assign()特性

6）extend：用一個或多個其他對象來擴展一個對象，有個bool值“merge”控制是否會覆蓋屬性

7）merge：合並對象，dest中的屬性將不會覆蓋src中的屬性

8）inherit：簡單的類繼承方法

9）bindFn：指定作用域執行函數

10）boolOrFn：傳遞函數就執行函數，傳遞布爾值就返回boolean

11）ifUndefined：傳遞兩個值，第一個值是undefined就返回第二個值，否則返回第一值

12）addEventListeners：封裝了addEventListener方法，可通過空格綁定多個事件

13）removeEventListeners：移除綁定的事件

14）hasParent：判斷是否有父級元素，返回boolean

15）splitStr：根據空格分割字符串，返回Array

16）inStr：判斷某個字符串是否被包含，返回boolean

17）inArray：查找某個值在數組中的位置值，返回int

18）toArray：通過“Array.prototype.slice.call”將對象轉換成數組

19）uniqueArray：數組去重，返回Array

20）prefixed：獲取加了前綴的屬性，沒有則返回undefined，前綴包括['', 'webkit', 'Moz', 'MS', 'ms', 'o']

21）uniqueId：獲取唯一值，比較簡單就是一個遞增的數，返回int

22）getWindowForElement：獲取元素的窗口對象

 

三、hammer.js

1）Hammer方式初始化，帶預置“Recognizer”（識別器）數組

插件的使用方法是先創建一個Hammer對象，代碼如下：

var layer = document.getElementById('layer');
var mc = new Hammer(layer);

當new的時候，函數內部其實是初始化了一個Manager對象（上面的manager.js），並初始化默認參數defaults。

function Hammer(element, options) {
    options = options || {};
    options.recognizers = ifUndefined(options.recognizers, Hammer.defaults.preset);
    return new Manager(element, options);
}

“Hammer.defaults.preset”是一個“Recognizer”（識別器）對象數組。

可以讓Manager對象預先安裝tap、doubletap、 pan、 swipe、press、 pinch和rotate識別器。

preset: [
        // RecognizerClass, options, [recognizeWith, ...], [requireFailure, ...]
        [RotateRecognizer, {enable: false}],
        [PinchRecognizer, {enable: false}, ['rotate']],
        [SwipeRecognizer, {direction: DIRECTION_HORIZONTAL}],
        [PanRecognizer, {direction: DIRECTION_HORIZONTAL}, ['swipe']],
        [TapRecognizer],
        [TapRecognizer, {event: 'doubletap', taps: 2}, ['tap']],
        [PressRecognizer]
]

 

2）Manager方式初始化，不帶預置

如果不做上面的識別器預置操作，就需要手動添加相應的識別器對象，例如下面的“Tap”。

var mc = new Hammer.Manager(layer);
mc.add(new Hammer.Tap());

關於manager.js的詳細說明將會在下一篇文章做討論。

 

3）expose.js

在上一段代碼中，之所以能夠引用“Hammer.Tap”，就是因為這段代碼中做了拷貝。

assign(Hammer, {
  Tap: TapRecognizer,
  Pan: PanRecognizer,
  Swipe: SwipeRecognizer,
  //...省略其他值
});

除了拷貝，剩下的代碼做模塊化聲明、全局賦值等。

 

四、touchaction.js

模擬CSS中的一個屬性“touch-action”，這個屬性兼容性非常差，目前只有Chrome 35+, IE10+支持。

1）演示

在“Hammer.defaults”默認參數中有一個“touchAction”屬性，這個值可以阻止滾動。用手機掃描下面的二維碼體驗下這個屬性：

我用UC瀏覽器打開了這個demo操作頁面，滑動到“pan-y”處左右滑動屏幕，頁面不會出現左右拖動的情況。在“pan-x”處，上下滑動，屏幕不會跟着滾動。

這個屬性非常有用，比如圖片滾動展示， 你要看下一張圖，那就得用手指划，如果整個頁面跟着划過去，那體驗很不好，還可能導致誤操作。

下面的表格是描述設置哪個值比較適合對應的手勢操作：

 

2）update

 在很多地方都會引用到“this.touchAction.update()”，這個方法里面引用了對象中的另外一個方法“set”。

update: function() {
    this.set(this.manager.options.touchAction);
}

var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction');
var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined;
set: function(value) {
  // 自己做計算
  if (value == TOUCH_ACTION_COMPUTE) {
    value = this.compute();
  }
  //支持原生"touch-action"就直接賦值
  if (NATIVE_TOUCH_ACTION && this.manager.element.style) {
    this.manager.element.style[PREFIXED_TOUCH_ACTION] = value;
  }
  this.actions = value.toLowerCase().trim();//緩存屬性值，用於后面的polyfill
}

 

五、操作流程圖

var layer = document.getElementById('layer');
var mc = new Hammer.Manager(layer);
mc.add(new Hammer.Tap());

mc.on('tap', function(e) {
    layer.style.display = "none";
    e.preventDefault();
});

初始化的流程在下一篇文章會有介紹。這里就講一個點擊操作的流程，其中綠色框中的內部邏輯不同操作會各有不同：

 

最后一步中handlers中保存的事件就是 mc.on 中的內容。

 

demo源碼下載：

http://download.csdn.net/download/loneleaf1/9429375

 

 

參考資料：

http://tech.gilt.com/2014/09/23/five-things-you-need-to-know-about-hammer-js-2-0/   

FIVE THINGS YOU NEED TO KNOW ABOUT HAMMER.JS 2.0

http://www.cnblogs.com/iamlilinfeng/p/4239957.html   Hammer.js

http://colinued.leanote.com/post/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%89%8B%E5%8A%BF%E5%BA%93hammerJS-2.0.4%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%E7%BF%BB%E8%AF%91    移動端手勢庫hammerJS-2.0.4