這幾個月做了個專案，在此對一些問題做一個記錄。

專案是前後端分離的，前端用的 npm+webpack。

問題：由於系統某頁面資料量過大或網路較差等原因，導致頁面還未完全加載出來，但按鈕已被載入時（js還未就緒），點選按鈕會報錯。

根據系統情況，解決方案：每個頁面載入的時候，在header上方加一個動態的進度條，同時通過css樣式在頁面上覆蓋一個透明的背景，使頁面在載入完成前不可點選。頁面完全載入後，進度條到100%，然後消失。

方案實施：

1. 在專案的系統公用檔案裡建一個loading.js檔案，內容如下：

module.exports = function() {

    class Process {

        constructor(prop) {

            this.timer = null;

            this.id = `_${(new Date().getTime() + parseInt(Math.random() *1000)).toString(32)}_loading`;

            this.maskId = `_${(new Date().getTime() + parseInt(Math.random() *1000)).toString(32)}_mask`;



            this.loading();

        }

        loading() {

            var html = [

            `<div id="${this.maskId}" class="loading-mask js-loading-mask"></div>`,

            `<div id="${this.id}" class="loading-line-wrap js-loading-line-wrap"><p class="loading-line"></p></div>`

            ], dis = [80, 90], speed = [1, 3], _dis = this.random(dis), _speed =this.random(speed);

            $('body').append(html.join(''));

            this.play(_dis, _speed, 0);

        }

        random(option) {

            var times = option[1] - option[0],

            offset = option[0];

            return Math.random() * times + offset;

        }

        play(dis, speed, num) {

            if(num + speed >= dis) {

                this.timer && clearTimeout(this.timer);

            }else {

                num = num + speed;

            }

            $(`#${this.id}`).css({width: `${num}%`});

            this.timer = setTimeout(()=>{

                this.play(dis, speed, num);
            }, 50);

        }



        completeLoading() {

            this.timer && clearTimeout(this.timer);

            $(`#${this.id}`).stop().animate({width: '100%'}, ()=> {

                $(`#${this.id}`).remove();

                $(`#${this.maskId}`).remove();

            })

        }

    }

    return new Process();

}
 

2. 在系統公用的樣式檔案common.scss里加上透明背景及進度條樣式，內容如下：

.loading-mask{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: 0;

    filter:alpha(opacity=0);

}

.loading-line-wrap{

    position: fixed;

    top: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: #2aa7ff;

    z-index: 100000;

}
 

3. 在系統的 main.js檔案（系統的入口檔案）引入 loading.js並做處理。下面省略了一些不相關的程式碼。有//*********的為此次新增程式碼。

import loading from './common-component/loading/loading.js';//*********


/**此處省略部分程式碼**/



let ajaxObj = {}, ajaxSend = {};//*********

$.ajaxSetup({//*********

    cache: false,//*********

    beforeSend: function(a, b, c, d){//*********

        if(ajaxObj[`_${decodeURIComponent(this.url)}`]) {//*********

            delete ajaxObj[`_${decodeURIComponent(this.url)}`];//*********

        }//*********

        ajaxObj[`_${decodeURIComponent(this.url)}`] = loading();//*********

    }//*********

});//*********



const router = new Router(routes).configure({

    notfound: () => {

        alert('錯誤連結！');

    },

    before: () => {

        $("div[id^=easytip-div-main],div.flatpickr-calendar").remove();

        let token = Util.getCookie('token');

        // 每個路徑初始化商品分類

        window.goodsClassify = null;

        ajaxObj = {};//*********

        $('.js-loading-line-wrap,.js-loading-mask').remove();//*********

        $(".classify-dialog").remove();

        if(!token && location.hash.indexOf('/login') < 0){

            window.location.href = '/login.html'

            return false;

        }

        chageText();

        checkCurrentManager(function () {

            detailFun();

        });

    },

    after:() =>{

        sessionStorage.removeItem('funcBtn');

        Object.keys(ajaxSend).map(key=>{//*********

            ajaxSend[key].abort();//*********

        });//*********

        ajaxSend = {};//*********

    }

});

router.init();



//初始化預設路由

if(!Util.getRouter()){

    Util.linkTo('/');

}



// header文字切換

function chageText() {

    let hashCode = window.location.hash,

    $pageTitle = $("#js-page-title"),

    $text = $pageTitle.find('.js-header-title'),

    text = '點選收起選單';



    if(hashCode == '#/home-page') {

        text = 'Hi,歡迎登入xx系統,xxxxxxxx！';

    }else {

        if($('body').hasClass('hide-menu')) {

            text = '點選展開選單';

        }

    }

    $text.text(text);

}



function clearLoading(key) {//*********

    if(ajaxObj[`_${decodeURIComponent(st.url)}`]) {//*********

        ajaxObj[`_${decodeURIComponent(st.url)}`].completeLoading();//*********

        delete ajaxObj[`_${st.url}`];//*********

    }//*********

}//*********



/**

* Desc: 使用者未登入統一攔截模組.

*/

$(document).ajaxComplete(function(e,xhr,st){

    var status = xhr.status;

    if(ajaxObj[`_${decodeURIComponent(st.url)}`]) {//*********

        ajaxObj[`_${decodeURIComponent(st.url)}`].completeLoading();//*********

        delete ajaxObj[`_${st.url}`];//*********

    }//*********



    if(ajaxSend[`_${decodeURIComponent(st.url)}`]) {//*********

        delete ajaxSend[`_${decodeURIComponent(st.url)}`];//*********

    }//*********

    if(status == 401 ){//使用者未登入 則刪除token跳轉登入

        Util.deleteCookie("token",document.domain);

        sessionStorage.clear();

        window.location.href = '/login.html';

    }

}).ajaxSend(function(e,xhr,st){//*********

    ajaxSend[`_${decodeURIComponent(st.url)}`] = xhr;//*********

});



function checkCurrentManager(callback) {//檢查當前操作員密碼狀態

    $.ajax({

        type:'post',

        url:API.checkCurrentManager,

        // async:false,

        success:function(msg){

            if(msg.success){

                callback ? callback() : null;

                let name = ((msg.result || {}).status || {}).name;

                if((msg.result || {}).firstTimeLoginFlag) {//首次登入，強制修改密碼

                    window.location.href = '/#/modify-pwd?flag=1';

                }else {

                    if(name == 'NORMAL'){//正常

                    }else if(name == 'PASSWORD_INVALIDATE'){//密碼失效

                        $(".passwordTi").addClass('hide');

                        $(".passwordDesc,.passwordStatus").removeClass('hide');

                        Util.linkTo('/modify-pwd');

                    }else if(name == 'NEED_MODIFY_PASSWORD'){//需要修改密碼

                        $(".passwordDesc,.passwordStatus").addClass('hide');

                        $(".passwordTi").removeClass('hide');

                    }

                }

            }else{

                Util.alertMessage(msg.error);

            }

        }

    });

}



function detailFun() {

    let hashCode = window.location.href;

    if(hashCode.indexOf('detail') > -1){

    $("#js-toggle-menu").html('Hi,歡迎登入xx系統,xxxxxxxx！')

    $("#js-page-title,.js-container-left,.content").css({marginLeft:0});

    $("#js-menu,.header-logo").css({display:'none'});
    
}

}