下拉刷新，上拉加载插件mescroll源码分析

最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。 于是学习了下别人的插件（ps : 既然写不出好插件，就要会学习别人的）：

官网github地址：https://github.com/mescroll/m...

1.整体预发结构

;(function(name, definition) {
// 检测上下文环境是否为AMD或CMD
    
})('MeScroll', function() {//scroll的逻辑代码
    
    //构造函数
    var MeScroll = function(){
        //初始化下拉刷新
        me.initDownScroll();
        //初始化上拉加载,则初始化
        me.initUpScroll();

        //自动加载
    }
    
    
    /*配置参数:下拉刷新*/
    MeScroll.prototype.extendDownScroll = function(){}
    
    /*配置参数:上拉加载*/
    MeScroll.prototype.extendUpScroll = function(){}
    
    /*配置参数*/
    MeScroll.extend = function(){}
    
    /*-------初始化下拉刷新-------*/
    MeScroll.prototype.initDownScroll = function(){}
    
    /*-------初始化上拉加载-------*/
    MeScroll.prototype.initUpScroll = function(){}
    
    
    
    //...其他函数挂在prototype的函数,用于初始化时候调用或者暴露给客户端定义；
    
    
    
}）

2. 检查环境

;(function(name, definition) {
// 检测上下文环境是否为AMD或CMD
    var hasDefine = typeof define === 'function',
    // 检查上下文环境是否为Node
        hasExports = typeof module !== 'undefined' && module.exports;

    if(hasDefine) {
        // AMD环境或CMD环境
        define(definition);
    } else if(hasExports) {
        // 定义为普通Node模块
        module.exports = definition();
    } else {
        // 将模块的执行结果挂在window变量中，在浏览器中this指向window对象
        this[name] = definition();
    }
})('MeScroll', function() {//scroll的逻辑代码}）

3.检查设备

var u = navigator.userAgent;
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //是否为ios设备
        var isPC = typeof window.orientation == 'undefined'; //是否为PC端
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;; //是否为android端

4.对象合并方法

/*配置参数*/
    MeScroll.extend = function(userOption, defaultOption) {
        if(!userOption) return defaultOption;
        for(var key in defaultOption) {
            if(userOption[key] == null) {
                userOption[key] = defaultOption[key];
            } else if(typeof userOption[key] == "object") {
                MeScroll.extend(userOption[key], defaultOption[key]); //深度匹配
            }
        }
        return userOption;
    }

5.获取手指的坐标

/*根据点击滑动事件获取第一个手指的坐标*/
    MeScroll.prototype.getPoint = function(e) {
        return {
            x: e.touches ? e.touches[0].pageX : e.clientX,
            y: e.touches ? e.touches[0].pageY : e.clientY
        }
    }

6.判断向上拉还是向下拉

var moveY = curPoint.y - me.startPoint.y; //和起点比,移动的距离,大于0向下拉,小于0向上拉

7.和滚动条有关的一些的方法

/*滚动条的位置*/
    MeScroll.prototype.getScrollTop = function() {
        if(this.isScrollBody) {
            return document.documentElement.scrollTop || document.body.scrollTop;
        } else {
            return this.scrollDom.scrollTop;
        }
    }

    /*滚动条到底部的距离：滚动内容的高度 - 滚动容器的高度 - 滚动条顶部的高度*/
    MeScroll.prototype.getToBottom = function() {
        return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop();
    }

    /*设置滚动条的位置*/
    MeScroll.prototype.setScrollTop = function(y) {
        if(this.isScrollBody) {
            document.documentElement.scrollTop = y;
            document.body.scrollTop = y;
        } else {
            this.scrollDom.scrollTop = y;
        }
    }

8.初始化下拉刷新

//1.配置参数
me.optDown = me.options.down || {};
//具体参数配置
me.extendDownScroll(me.optDown);
//2.鼠标或手指的按下事件
me.touchstartEvent = function(){}
me.scrollDom.addEventListener("mousedown", me.touchstartEvent); //PC端鼠标事件
me.scrollDom.addEventListener("touchstart", me.touchstartEvent); //移动端手指事件
        
//3.鼠标或手指的滑动事件
me.touchmoveEvent = function(){}
me.scrollDom.addEventListener("touchmove", me.touchmoveEvent); //移动端手指事件

//4.鼠标或手指的离开事件
me.touchendEvent = function(){}
me.scrollDom.addEventListener("mouseup", me.touchendEvent); //PC端鼠标抬起事件
me.scrollDom.addEventListener("mouseleave", me.touchendEvent); //PC端鼠标离开事件
me.scrollDom.addEventListener("touchend", me.touchendEvent); //移动端手指事件
me.scrollDom.addEventListener("touchcancel", me.touchendEvent); //移动端系统停止跟踪触摸

//5.在页面中加入下拉布局

9.初始化上拉加载

//1.配置参数

//2.滚动监听
me.scrollEvent = function() {}
if(me.isScrollBody) {
    window.addEventListener("scroll", me.scrollEvent);
} else {
    me.scrollDom.addEventListener("scroll", me.scrollEvent);
}

10.css相关

/*启用硬件加速:使动画渲染流畅,解决部分手机闪白屏问题,在下拉刷新和上拉加载触发时启用,结束后移除,避免滥用导致其他兼容性问题*/
.mescroll-hardware {
    -webkit-transform: translateZ(0);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

11.注册为vue插件

具体注册插件方法可以参考vue插件文档：
https://cn.vuejs.org/v2/guide...

MeScroll.install = function(Vue,options){
    Vue.component('MeScroll',{
        template:'',
        data: ,
        props: ,
        mounted: ,
        methods:{},
        //...
    }
}