下拉刷新，上拉加載插件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:{},
        //...
    }
}