需求：記錄一個遊戲div的爆光量，有效統計傳送ajax記錄一次

分析：

　　1. 要想監控全站的遊戲，得先要有一個監控類class，就是加了這個類這個div就進入了監控範圍便於管理

　　2.頁面同一個遊戲多次出現在使用者眼前算幾次爆光（使用者沒有退出頁面）

　　3. 滾動條事件如何避免時刻呼叫

　　4......對於封裝的js後期擴充套件功能的思考

let expo_url = "https://online.xiaogouh5.com/statics/expo";

let Exposure = {
    isSending : false,
    deviceObj : null,       //
 
 裝置物件
    scorllObj : null,       // 滾動條物件
    sendList : [],          // 已傳送佇列
    ExposureList : [],      // 曝光佇列
    scrollRangMin : 50,     // 單位px
    ExposureClassName : 's-exposure-box', // 監控類
    ExposureVersion : "",
    bugSwitch : false,
    setAvailHeight: 400, 
    init : function(parmas){
        
 
if( typeof(parmas['ExposureClassName']) != undefined  && parmas['ExposureClassName'] != ''  ){
            this.ExposureClassName = parmas['ExposureClassName'];
        }
        if( $("."+this.ExposureClassName).length <= 0 ) return;
        // 首屏曝光id
        this.addScreenList();
        // 監聽滾動條變化並繫結事件
 

        this.scrollCulExposure()   
        // 初始化傳送請求
        this.initSendExposure()
        // js載入時間
        this.ExposureVersionDate()
    },
    ExposureVersionDate : function(){
        this.ExposureVersion = this.getDateFitter();
        if (this.bugSwitch) {
            console.log(this.ExposureVersion)
        }
    },
    getDateFitter : function(){
        let myDate = new Date();             
        let year=myDate.getFullYear();        //獲取當前年
        let month=myDate.getMonth()+1;   //獲取當前月
        let date=myDate.getDate();            //獲取當前日
        let h=myDate.getHours();              //獲取當前小時數(0-23)
        let m=myDate.getMinutes();          //獲取當前分鐘數(0-59)
        let s=myDate.getSeconds();
        return year+'-'+this.getNow(month)+"-"+this.getNow(date)+" "+this.getNow(h)+':'+this.getNow(m)+":"+this.getNow(s);
    },
    getNow : function(s){
        return s < 10 ? '0' + s: s;
    },
    initSendExposure : function(){
        let _self = this;
        setInterval(() => {
            _self.sendExposure();
        }, 1000);
    },
    // 滾動條變化事件   方法
    scrollCulExposure : function(){
        let _self = this;
        let lastScrollTop = _self.scollObj;
        $(window).scroll(function(){
            let scrollTop  = _self.getScrollTop();
            let scrollRang = Math.abs(scrollTop - lastScrollTop);
            if(scrollRang > _self.scrollRangMin){
                lastScrollTop = scrollTop;
                _self.addScreenList();
            }
        })
    },
    // 1、當滾動條變化大於XXX px時，計算一次曝光並存儲
    addScreenList : function(){
        if( $("."+this.ExposureClassName).length <= 0)  return;
        let idArr = this.getScreenExposureList();
        if (this.bugSwitch) {
            console.log("idArr:"+idArr)
        }
        this.addExposureList(idArr);
    },

    addExposureList : function(idArr){
        if(!idArr instanceof Array  || idArr.length <= 0 || idArr == null) return;
        // 迴圈idArr，判斷是已在佇列裡面，不在就新增
    for(let i=0;i<idArr.length;i++){
            if(-1 == $.inArray(idArr[i],this.ExposureList)){
                this.ExposureList.push(idArr[i]);
            }  
    }
        if (this.bugSwitch) {
            console.log("ExposureList:"+this.ExposureList)
        }
    },
    // 獲取曝光區域的id
    getScreenExposureList : function(){
        let _self = this;
        let curScreenIdArr = [];
        if( $("."+_self.ExposureClassName).length <= 0) {
            //removeScorllListinerEvent()
            return;
        } 
        $("."+_self.ExposureClassName).each(function(index,curDomItem){
            if(_self.isExposure(curDomItem)){
                $(this).removeClass(_self.ExposureClassName);
                // 加入曝光佇列
                if( $(this).data("id") <= 0 ) return;               
                curScreenIdArr.push($(this).data("id"));
            }
        });
        if (this.bugSwitch) {
            console.log("curScreenIdArr:"+curScreenIdArr)
        }
        return curScreenIdArr; 
    },
    // 是否曝光
    isExposure : function(domObj){
        let $innerHeight= this.getCountHeight();//可視區域高度
        let $scrollTop = this.getScrollTop();//滾動條高度
        let $offsetTop = $(domObj).offset().top;//距離頂部偏移度
        let $offsetHeight = $(domObj)[0].offsetHeight;//真實高度
        if (this.bugSwitch) {
            console.log($innerHeight>0)
        }
        if($offsetTop < ($innerHeight+$scrollTop) && $offsetTop>=$scrollTop && $offsetHeight != 0 && $innerHeight > 0){
            return true;
        }else{
            return false;
        }
    },
    // 獲取螢幕高度
    getDeviceHeight : function(){
        //文件顯示區的高度
        this.deviceObj = window.innerHeight;
        return window.innerHeight
    },
    // 計算高度
    getCountHeight : function (){
        let $innerHeight = this.getDeviceHeight();
        let $countHeight = Math.ceil($innerHeight*(2/3));
        // setAvailHeight = 460
        if ($countHeight > this.setAvailHeight) {
            return $countHeight
        } else {
            return $innerHeight
        }
    },

    getDeviceWidth : function(){
        return window.innerwidth
    },
    // 滾動條高度
    getScrollTop : function(){
        // 相容寫法：document.scrollingElement.scrollTop
        // 移動端，PC端有差異：$(window).scrollTop()
        let $win = document.scrollingElement.scrollTop;
            this.scollObj =  $win;
        return $win;
    },
    // 傳送曝光請求
    sendExposure: function(){
        if(this.isSending) return;
        this.isSending = true;
        let _self = this;
        let gameIdObj = _self.getSendGameIds();
        let userMessegGameObj = _self.userMesseg();//裝置資訊
            userMessegGameObj.ExposureVersion = _self.ExposureVersion;
            userMessegGameObj.game_id = gameIdObj;
        if( gameIdObj.length <=0 || !gameIdObj instanceof Array  ){    
            _self.isSending = false;
            return;
        }
        _self.ajaxSend(userMessegGameObj,function(){
            _self.isSending = false;
            // if($("."+_self.ExposureClassName).length <= 0 && _self.ExposureList.length == _self.sendList.length){
            //     clearInterval
            // }
        });
    },
    getSendGameIds : function(){
        let sendIdArr = [];
        let exportList = this.ExposureList;
        for(let i=0; i < exportList.length;i++){
            if(-1 == $.inArray(exportList[i], this.sendList)){
                this.sendList.push(exportList[i])
                sendIdArr.push(exportList[i]);
            }
        }
        if (this.bugSwitch) {
            console.log(sendIdArr)
        }

        return sendIdArr;
    },
    
    // 使用者資訊
    userMesseg : function(){
        let userMessegData = {
            "href": window.location.href,
            "ua" : navigator.userAgent,
            "appName" : navigator.appName,//瀏覽器的正式名稱
            "appVersion" : navigator.appVersion, //瀏覽器的版本號
            "cookieEnabled" : navigator.cookieEnabled,//返回使用者瀏覽器是否啟用了cookie
            "platform" : navigator.platform,//瀏覽器正在執行的作業系統平臺
            "userClient" : this.browserRedirect(),//客戶端
            "datetime" : this.getDateFitter(),//時間
            "DeviceWidth" : window.screen.availWidth,
            "DeviceHeight" : window.screen.availHeight//螢幕高度
        }
        return userMessegData;
    },
    // 判斷PC，IOS，Android
    browserRedirect : function () {
        let sUserAgent = navigator.userAgent.toLowerCase();
        let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        let bIsMidp = sUserAgent.match(/midp/i) == "midp";
        let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        let bIsAndroid = sUserAgent.match(/android/i) == "android";
        let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            let u = navigator.userAgent;
            let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
            if (isAndroid) {
            　　//這個是安卓作業系統
            　　return 'Android';
            }
            if (isIOS) {
            　　//這個是ios作業系統
            　　return "IOS";
            }
        } else {
            return "PC";
        }
    },
    ajaxSend : function(data,callback){
        $.ajax({
            type: "POST",
            url: expo_url,//'http://127.0.0.1:3030/text/plain'
            data: data,
            dataType: "json",
            async: false,
            success: function(res) {
                // console.log("res");
                callback();
            },
            error: function(error) {
                // console.log("error"+JSON.stringify(error));
                callback();
            }
        });
    },
    clearIntervalScroll : function(){
        clearInterval(this.initSendExposure())
    }
};


window.onload = function(){
    $(".s-dl-btn-box").each(function(index,dom){
        $(this).addClass("s-exposure-box")
    })
    Exposure.init({"ExposureClassName":"s-exposure-box"})
}