手机版官网技术总结（一）

首先

手机版官网暂告一段落了，终于舍得花时间来总结一下手机版官网当中学到的知识点以及技术总结。
目前所在的公司是一家创业公司，公司规模虽然不大，但是环境还是蛮不错的，也比较年轻化，体制不僵硬，而且互联网金融类的产品，我也非常喜欢。
这个手机版本的官网主要是用于从微信公共号打开浏览，因此适配都是按照微信来的。区别在于微信打开屏幕高度会把微信的头部包含进去，所以网页里的内容的高度就要以此为标准。

开发时间	10天
新接触的方向	优化、国际化、数据交互
新技术	hammer.js / zepto.js / i18n

第一篇

我打算从用到的js框架讲起–zepto.js
zepto.js和jQuery我觉得差不多，目前用到的API和方法里没有太大的差别，我对zepto最大的三点印象就是：
1、文件小，只有8K多
2、支持手机上的触摸事件，应用于手机版web
3、不支持IE浏览器
看了一篇博客讲了几点区别，但我没怎么遇到，这里贴一下链接
但据说zepto.js上的触摸事件不太好用，坑很多啊，没直接尝试，网上查了查，很多说zepto的touch事件存在问题，PS：提供一个zeptotouch触摸事件的解决办法，大致原因我看了一下都跟事件冒泡有关，通常阻止事件冒泡后，又有一些滑动或者滚动不能被触发，因此我果断用了hammer.js，百度还有一个touch.js
，大家也可以尝试一下，文件超级小,当时我没找到合适的demo来研究，所以选择了hammer.js。

简单举例

//定义变量，注意这里获取dom节点的时候一定不要用$符号，会报错
var map = new Hammer(document.getElementById('map'));
//绑定事件之前有一个类似于事件开关的东西，不设置的默认为true
map.get('pan').set({enable:false});
map.get('pinch').set({enable:true});
map.on("panstart", function(e){
    alert("1");
});
map.on("pan", function(a){
    alert("2");
});

hammer.js的demo，官网很详细，直接去看就好。在这里我主要总结一下它的事件包含的对象还有遇到的bug，最后再附上两个项目中提取出来的小demo。

Name	Value
type	事件的名称，比如panstart
deltaX	X坐标轴上的移动距离
deltaY	Y坐标轴上的移动距离
deltaTime	交互过程的总时长
distance	移动距离
angle	移动角度
velocityX	在X坐标轴上的移动速率，单位为px/ms
velocityY	在Y坐标轴上的移动速率，单位为px/ms
velocity	X/Y上最高的速率值
direction	移动方位，匹配DIRECTION常量
offsetDirection	从起始点算起的移动方位
scale	多点触摸结束时的缩放比例，若为单点触摸则为1
rotation	多点触摸结束时的旋转数值，若为单点触摸则为0
center	多点触摸的中心位置，或者单点的坐标
srcEvent	源事件对象，类型为TouchEvent,MouseEvent或PointerEvent
target	接受事件的目标
pointer	基本的指针类型，可以为touch、mouse、pen或kinect
eventType	事件类型，匹配INPUT常量
isFirst	true表示当前交互为首次交互
isFinal	true表示当前交互为最后一次交互

demo

在这儿分享两个中的一个我用hammer.js做的demo。 demo1

1、实现卡片式布局多个卡片的左右滑动

2、主要用到pan事件
具体实现方式如下：

//主要思想：通过改变绝对定位的left值，来实现滑动
var sub = new Hammer(document.getElementById("sub-con"));
var subcon = $(".sub-con");
moveCard(sub,subcon);
function moveCard(a,b){
    var _width = b.width();
    var num;
    //这里一定要先定位要最初的left值，panstart只触发一次，num保存最初元素的位置，从而在此基础上进行偏移
    a.on("panstart",function(d){
        num = parseInt(b.css('left'));
    });
    a.on("pan",function(e){
        var delta = num + e.deltaX;
        if(delta < 10 && delta > -(_width-screen.width+10)){
                b.css("left", delta);
        }
    });
}

demo 2

1、实现图片在手机上的双指放大缩小和双击放大可拖动

2、主要用到pinch和tap事件

此demo我分享在github上，有感兴趣的同学可以去看 我的github

hammer的冒泡事件

今天偶然发现hammer源码里写了了阻止冒泡的方法。
在swipe、pan、tap、press事件里，取消了阻止，在pinch和rotate事件里加了阻止。

 preventDefaults: function(input) {
        var srcEvent = input.srcEvent;
        var direction = input.offsetDirection;
        // if the touch action did prevented once this session
        if (this.manager.session.prevented) {
            srcEvent.preventDefault();
            return;
        }
        var actions = this.actions;
        var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE];
        var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y];
        var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X];
        if (hasNone) {
            //do not prevent defaults if this is a tap gesture
            var isTapPointer = input.pointers.length === 1;
            var isTapMovement = input.distance < 2;
            var isTapTouchTime = input.deltaTime < 250;
            if (isTapPointer && isTapMovement && isTapTouchTime) {
                return;
            }
        }
        if(scale == 1){
            return;
        }
        if (hasPanX && hasPanY) {
            // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent
            return;
        }
        if (hasNone ||
            (hasPanY && direction & DIRECTION_HORIZONTAL) ||
            (hasPanX && direction & DIRECTION_VERTICAL)) {
            return this.preventSrc(srcEvent);
        }
    },
    /**
     * call preventDefault to prevent the browser's default behavior (scrolling in most cases)
     * @param {Object} srcEvent
     */
    preventSrc: function(srcEvent) {
        this.manager.session.prevented = true;
        srcEvent.preventDefault();
    }
};

滞留一个问题，目前也还没解决，如何取消pinch的阻止冒泡？