无线web开发经验（4）—— Javascript

DOM选择器

html5为了我们提供了一个非常好的DOM选择器，就是document.querySelector和document.querySelectorAll这两个方法，这两个方法在android2.1+以及ios3+以后，都可以使用，其接受的参数为css选择器。在实际web开发中，有一部大部分工作会用到DOM的操作，通过这个神器，可以解决大多数的DOM的操作。建议大家使用的时候，可以多多使用这两个方法。

其他的DOM的选择器的兼容性并不是太好，建议不要使用。

库和框架

对于jquery大家应该比较的熟悉，在web手机上也有一个轻量级的类库工具，那就是Zepto，它的很多api接口保持和jquery的接口兼容，其体积非常小，gzip的包在10k左右，非常适合在手机上的无线环境中加载。建议大家在使用类库的时候，推荐使用，其api地址为:http://zeptojs.com/
对于框架，我们熟悉的Angular以及比较新的vue、react等也都可以使用

click的300ms延迟响应

说到移动开发，不得不说一下这个click事件，在手机上被叫的最多的就是点击的反应慢，就是click惹出来的事情。情况是在这样，在手机早期，浏览器有系统级的放大和缩小的功能，用户在屏幕上点击两次之后，系统会触发站点的放大/缩小功能。不过由于系统需要判断用户在点击之后，有没有接下来的第二次点击，因此在用户点击第一次的时候，会强制等待300ms，等待用户在这个时间内，是否有用户第二次的提交，如果没有的话，就会click的事件，否则就会触发放大/缩小的效果。
这个设计本来没有问题，但是在绝大多数的手机操作中，用户的单击事件的概率大大大于双击的，因此所有用户的点击都必须要等300ms，才能触发click事件，造成给用户给反应迟钝的反应，这个难以解决。业界普遍解决的方案是自己通过touch的事件完成tap，替代click。不过tap事件来实际的应用中存在下面所说的问题。
好消息是，就是手机版chrome21.0之后，对于viewport width=device-width，并且禁止缩放的设置，click点击取消了300ms的强制等待时间，这个会使web的响应时间大大提升。但ios仍然存在这个问题。

移动事件

javascript有很多用户交互相关事件，在移动上有一些比较特有的事件，大家在日常开发中，可能会接触到，这些事件的特性，这里说一下：

orientationchange 这个事件是在当设备发生旋转的时候，发生的事件。这个在某些场合会非常的实用。
touchstart、touchmove、touchend、touchcancel等四个触摸事件，在所有移动web的中，都支持这四个事件。通过这两个事件，可以模拟出各种用户的手势，不过由于其处理比较复杂，可能模拟最多的是tap事件。很多web移动类库，都有tap的事件的实现，不过从实践中，tap都不是处理的很好，tap的主要问题，有两个，一个是tap和滚动同时触发的时候，往往会触发tap事件，二是tap的敏感度，经常会失误触发tap。
scroll事件这个事件在PC上的触发时机和手机上的触发时机不同，scroll事件在手机上，只有在滚动停止的时候才会发生,因此这个事件在移动端用的比较少，因为触发的时机已经晚了。对于需要在移动中，改变页面结构的功能，用scroll是无法完成的。

手势事件

touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel

触摸事件

gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend

屏幕旋转事件

onorientationchange

检测触摸屏幕的手指何时改变方向

orientationchange

touch事件支持的相关属性

touches
targetTouches
changedTouches
clientX　　　　// X coordinate of touch relative to + the viewport (excludes scroll offset)
clientY　　　　// Y coordinate of touch relative to + the viewport (excludes scroll offset)
screenX　　　 // Relative to the screen
screenY 　　 // Relative to the screen
pageX　　　　// Relative to the full page (includes scrolling)
pageY　　　　 // Relative to the full page (includes scrolling)
target　　　　 // Node the touch event originated from
identifier　　 // An identifying number, unique to each touch event
屏幕旋转事件：onorientationchange

判断屏幕是否旋转

function orientationChange() {
switch(window.orientation) {
　　case 0:
        alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
　　case -90:
        alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
　　case 90:
        alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
        break;
　　case 180:
    　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
    　　break;
};};

添加事件监听

addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
});

双手指滑动事件：

// 双手指滑动事件
addEventListener('load',
    function(){window.onmousewheel = twoFingerScroll;},
    false  // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)
);
function twoFingerScroll(ev) {
    var delta =ev.wheelDelta/120;  //对 delta 值进行判断(比如正负) ，而后执行相应操作
    return true;
};