无线端web开发学习总结

无线web开发之前要做一些准备工作：
一、必需的reset样式库
1、其中的重点是盒模型box-sizing：由原来pc端的content-box改为border-box。

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

2、设定root元素的字体大小，便于子元素rem单位的设置。

html { font-size: 100%; }

3、使Chrome使用小于12px的字体。

*, *:before, *:after {
    -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
}

4、去除点击元素后的高亮效果。

*, *:before, *:after {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

5、去除焦点元素周围的虚线。

*:focus {
    outline: none;
}

6、其余样式reset等同pc端的样式reset。

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

/* 消除图片下方3像素空白 */
img {
    display: block;
}

/* 重置默认字体和大小 */
body {
    font-size: 0.75rem;
    line-height: 1.5;
}

二、必需的js基础库
基于学习成本以及性能方面考虑，我选择的是jQuery2.0以上版本的库文件 jquery-2.1.1.min.js。
三、touch事件的掌握

touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。
touchend：当手指从屏幕上移开时触发。
上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。
因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
originalEvent.touches：表示当前跟踪的触摸操作的Touch对象的数组。
originalEvent.targetTouchs：特定于事件目标的Touch对象的数组。
originalEvent.changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。
注意，在touchend事件发生时，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作；此时，就必须转而使用changeTouchs集合。
也就是说：touchstart和touchmove事件只可以使用originalEvent.touches对象。touchend事件只可以使用originalEvent.changeTouches对象。
四、HTML5标签、CSS3
除了上面必需的基础，多多少少也要掌握一些HTML5、CSS3方面的知识，尤其是HTML5标签的使用、CSS3过渡（transition）、CSS3动画（@-webkit-keyframes）、CSS3 3D等。
这些知识可以让我们在做无线web开发时游刃有余。比如：有些动画效果使用css3完全可以胜任，而且与js实现相比性能更优。
下面是我写的一个滑动效果的js部分：

;(function($, wind, undefined) {
    //缓存全局变量
    var jwind = $(wind);
    var carouselEffect = {
        init: function() {
            //操作容器
            this.wrap = $('.list');
            this.ul = this.wrap.find('ul');
            //列表项内容宽度自适应
            this.styleInit();
            //事件绑定集
            this.event();
        },
        //列表项内容宽度自适应
        styleInit: function() {
            this.ul.each(function(i, el) {
                var ul = $(el), item = ul.find('li'), itemCount = item.length, itemWidth = jwind.width();
                //设置列表项父层容器的宽度
                ul.css('width', itemCount*itemWidth);
                //设置列表项内容的宽度
                item.css('width', itemWidth);
            });
        },
        //事件绑定集
        event: function() {
            var that = this;
            //窗口大小改变时列表项内容宽度自适应
            jwind.on('resize.th', function() {
                if (wind.timeid) clearTimeout(wind.timeid);
                wind.timeid = setTimeout($.proxy(that.styleInit, that), 1000/60);
            });
            //绑定触摸事件
            this.wrap.on('touchstart', 'li', touchstart);
            this.wrap.on('touchmove', 'li', touchmove);
            this.wrap.on('touchend', 'li', touchend);
        }
    };

    $(function() {
        carouselEffect.init();
    })

    //预定义常用的变量
    var touch, startx, cachex, cacheulx, ul, ulx, endx, diffx;

    //触摸开始
    function touchstart(ev) {
        touch = ev.originalEvent.touches[0];
        cachex = startx = touch.clientX;
        cacheulx = parseInt($(this).parent('ul').css('margin-left'));
    }

    //触摸移动
    function touchmove(ev) {
        //阻止浏览器的默认拖动行为
        ev.preventDefault();
        //计算移动距离
        touch = ev.originalEvent.touches[0];
        endx = touch.clientX;
        diffx = endx - startx;
        ulx = parseInt((ul=$(this).parent('ul')).css('margin-left'));
        startx = endx;
        //移动对象
        ul.css('margin-left', ulx+diffx);
    }

    //触摸结束
    function touchend(ev) {
        var resultx, boundvalue = 50, itemCount = (ul=$(this).parent('ul')).find('li').length, itemWidth = jwind.width();
        //手指抬起时横坐标
        endx = ev.originalEvent.changedTouches[0].clientX;
        //向左滑动
        if (cachex > endx) {
            //计算下一项的位置
            resultx = cacheulx % itemWidth === 0 ? cacheulx-itemWidth : itemWidth;
            resultx = resultx < -(itemCount-1)*itemWidth ? -(itemCount-1)*itemWidth : resultx;
            //滑动一定距离则切换到下一项
            if (cachex - endx > boundvalue) {
                ul.animate({'margin-left': resultx}, 'fast', function() {
                    //滑动完毕读取的距离才可信
                    cacheulx = parseInt(ul.css('margin-left'));
                });
            }
            //未滑动一定距离则返回到原来位置
            else {
                ul.animate({'margin-left': cacheulx}, 'fast', function() {
                    //滑动完毕读取的距离才可信
                    cacheulx = parseInt(ul.css('margin-left'));
                });
            }
        }
        //向右滑动
        else {
            //计算下一项的位置
            resultx = cacheulx % itemWidth === 0 ? cacheulx+itemWidth : itemWidth;
            resultx = resultx > 0  ? 0 : resultx;
            //滑动一定距离则切换到下一项
            if (endx - cachex > boundvalue) {
                ul.animate({'margin-left': resultx}, 'fast', function() {
                    //滑动完毕读取的距离才可信
                    cacheulx = parseInt(ul.css('margin-left'));
                });
            }
            //未滑动一定距离则返回到原来位置
            else {
                ul.animate({'margin-left': cacheulx}, 'fast', function() {
                    //滑动完毕读取的距离才可信
                    cacheulx = parseInt(ul.css('margin-left'));
                });
            }
        }
    }
})(jQuery, window);

二维码访问：

效果图：