微信翻页效果

今天闲得蛋疼，重构了之前写的微信翻页效果。

先上地址，觉得可以给颗星星，觉得有问题请大力吐槽。

github：https://github.com/skyweaver213/slide

3个demo地址：
http://skyweaver213.github.io/slide/widget/slide1/slide.html
http://skyweaver213.github.io/slide/widget/slide2/slide.html
http://skyweaver213.github.io/slide/widget/slide3/slide.html 

下面说的东西没啥深度，高手到这里止步哈。  if(codeMaster) return;

然后说说我重构的思路，每次说到重构2字我都手心冒汗，我写的破东西也敢称得上重构？勉强说，再改了一下。

我一开始封装的方法很挫的，就是随便传几个参数

/*
 param1 滑动页面的class或者 id  -------------  (必传)
 param2 一共几个滑动的页面      -------------  (必传)
 param3 吸附翻页的范围      -------------  (不必传)
 param4 滑动页面委托事件的父节点，不传默认是document
 */
function slide(slide_page_dom, page_count, slide_range, parent_wrap) {
    //code  
}

这样我觉得有一点很不好的地方，就是别人一定要记住参数的顺序，还有是否必传 ，还有如果后续参数扩展更多的话，还可能需要判断参数的类型再作操作，例如添加一个callback函数，还要先检查一下是不是函数才能执行。
还有如果touchstart、touchmove和touchend同时都用callback的时候，就乱得一团糟了。

所以今天我把所有参数都当作一个对象，然后跟他们分别指定特定的名字。
例如：

/**
 * Created by huangjianhua on 14-12-20.
 */
/*
 param1 所有用到参数的obj {
     slide_page_wrap          //滑动区域的class或者 id，            必传
     slide_page_dom          //滑动页面的class或者 id，             必传
     page_count              //一共滑动的页面的总个数               不必传（不传默认是page_dom.length）
     slide_range             //触发翻页效果移动的步长               不必传
 }
 startCallback: function,     //touchStart的回调函数                 不必传
 moveCallback: function,      //touchmove的回调函数                  不必传
 endCallback: function        //touchend的回调函数                   不必传
 */
function slide(options) {

    //默认的值
    var defaultObj = {
        cur_page: 0,
        slide_range: 130,
        parent_wrap: document
    };

    //自定义的参数
    $.extend(defaultObj, options);

    //滑动区域的class或id
    var slide_page_wrap = defaultObj.slide_page_wrap;
    //滑动页面的class或id
    var slide_page_dom= defaultObj.slide_page_dom;
    var $slide_page =  $(slide_page_dom);

    //当前滑动的页码，从0开始算
    var cur_page= 0;
    //保存touchstart的事件对象
    var touchFirst_obj;
    //保存touchend的事件对象
    var touchLast_obj;
    //touch事件移动的Y轴距里
    var moveY;
    //touchstart开始时translateY的坐标点
    var startTranslateY;
    //touchmove时translateY的坐标点
    var currentTranslateY;
    //当touchmove大于设置的slide_range触发翻页
    var slide_range = +defaultObj.slide_range;
    //一共滑动总页数
    var page_count = defaultObj.page_count || $slide_page.length;
    //总滑动页面的包裹器
    var parent_wrap = defaultObj.parent_wrap;


    //兼容不支持calc的浏览器
    $slide_page.css('height', (100 / page_count) + '%');


    //滑动页面的事件绑定
    $(parent_wrap).on('touchstart', slide_page_wrap, function (e) {
        //禁止浏览器默认事件
        e.preventDefault();

        //防止事件冒泡
        e.stopPropagation();

        touchFirst_obj = {
            startY : e.touches[0].clientY
        };

        //移除transition的过渡效果
        $(this).removeClass('transition_fast');

        //取translateY的值
        var transfrom_info = window.getComputedStyle(e.currentTarget, null).getPropertyValue("-webkit-transform").match(/matrix\((\d+,\s?){1,5}(\-?\d+)/);
        startTranslateY = transfrom_info && transfrom_info[2] || 0;

        $(this).css('-webkit-transform', 'translateY('+ startTranslateY +'px) translateZ(0)');
//        console.log(startTranslateY , 'startY',window.getComputedStyle(e.currentTarget, null).getPropertyValue("-webkit-transform"));

        //touchstart的回调函数
        defaultObj.startCallback && defaultObj.startCallback($(this));

    }).on('touchmove', slide_page_wrap, function (e) {
        e.preventDefault();
        e.stopPropagation();

        touchLast_obj = e.touches[0];

        //计算滑动的移动距里
        moveY = touchLast_obj.clientY - touchFirst_obj.startY;
        currentTranslateY = +startTranslateY + +moveY;

        //第一张往上、和最后一张往下 return；
        if((startTranslateY ==0 && moveY > 0) || (startTranslateY == -window.innerHeight * (page_count-1) &&  moveY < 0)) {
            return;
        }
        $(this).css('-webkit-transform', 'translateY('+ currentTranslateY +'px) translateZ(0)');

        //touchmove的回调函数
        defaultObj.moveCallback && defaultObj.moveCallback($(this));

    }).on('touchend', slide_page_wrap, function (e) {
        //添加过渡效果的class
        $(this).addClass('transition_fast');

        //上 或 下
        if(moveY > slide_range) {
            //第一页的话 不作处理
            if(cur_page == 0) return;
            cur_page--;
        } else if(moveY < -slide_range) {
            //最后一页的话 return
            if(cur_page == +page_count-1) return;
            cur_page++;
        }

        $(this).css('-webkit-transform', 'translateY('+ (-100 * (+cur_page)/page_count) +'%) translateZ(0)');

        //touchend的回调函数
        defaultObj.endCallback && defaultObj.endCallback($(this));
    });
}

 

这里我是先区分哪些是默认值，然后那些是自定义的参数。代码如下，自定义的参数可以覆盖默认的参数。

//默认的值
    var defaultObj = {
        cur_page: 0,
        slide_range: 130,
        parent_wrap: document
    };

    //自定义的参数
    $.extend(defaultObj, options);

 

好，代码就上面几行，这么聪明的你肯定一眼就能看懂。  我写的东西木啥深度，先这样吧 ，哈哈。