jquery 手寫一個簡單浮窗的反面教材

盡頭換生發表於2020-06-09
jQuery

前言

初學jquery寫的程式碼，陳年往事回憶一下。

正文

介紹一下大體思路

思路:

1.需要控制一塊區域，這塊區域一開始是隱藏的。

2.這個區域需要關閉按鈕，同時我需要寫繫結事件，關閉的時候讓這塊區域消失。

3.需要動態控制遮罩層。

4.當窗體滾動的時候，我需要去讓這塊移動，那麼這塊區域的定位應該是絕對定位的。

5.當窗體大小變化的時候，我需要將這個登入從新定位

說了這麼多其實就是一個簡單的效果:

嗯，按照這個大體的思路，我當時寫下這樣一份充滿了bug性程式碼。

//遮罩層
$(function () {
    var oBtn = $('#show');
    var popWindow = $('.popwindow');
    var oClose = $(' .form a.close');
    var browserwidth = $(window).width();
    var browSerHeight = $(window).height();
    //left的值=瀏覽器可視區域/2-彈出視窗的區域/2
    //top的值=瀏覽器可視區域/2-彈出視窗的區域/2
    var popWindowWidth = popWindow.outerWidth(true);
    var popWindowHeight = popWindow.outerHeight(true);
    var positionLeft = browserwidth / 2 - popWindowWidth / 2;
    var positionTop = browSerHeight / 2 - popWindowHeight / 2;
    var browserScollTop = $(window).scrollTop();
    var zhezhaowidth = $(document).width();
    var zhezaoheight = $(document).height();
    var oZZC = '<div class="zhezaocheng"><div>';
    //顯示視窗事件
    oBtn.click(function () {
        popWindow.show().animate({
            'left': positionLeft + 'px',
            'top': positionTop + 'px'

        }, 500);
        $('body').append(oZZC);
        $('.zhezaocheng').width(zhezhaowidth).height(zhezaoheight);
    });
    //關閉按鈕事件
    oClose.click(function () {
        popWindow.hide();
        $('.zhezaocheng').remove();
    });
    $(window).scroll(
            function () {
                if (popWindow.is(':visible')) {
                    browserScollTop = $(window).scrollTop();
                    var positionTop = browSerHeight / 2 - popWindowHeight / 2 + browserScollTop;
                    popWindow.animate({
                        'left': positionLeft + 'px',
                        'top': positionTop + 'px'

                    }, 500).dequeue();//清除前面的運動函式
                }
            }
    )
    $(window).resize(function () {
        if (popWindow.is(':visible')) {
            var browserwidth = $(window).width();
            var browSerHeight = $(window).height();
            var positionLeft = browserwidth / 2 - popWindowWidth / 2 ;
            var positionTop = browSerHeight / 2 - popWindowHeight / 2 + browserScollTop;
            popWindow.animate({
                'left': positionLeft + 'px',
                'top': positionTop + 'px'

            }, 500).dequeue();
        }
    })
})

在現在看來這是一份很有問題的程式碼；

問題如下：

1.沒有將初始化提取出來，產生了冗餘程式碼，有很多冗餘的引數。

2.沒有將提取顯示登入介面的元素採用配置檔案暴露出來，比如說popwindow 區域，show 事件，oClose 事件等等等。

3.充滿了中文命名的問題

4.沒有良好的封裝

5.等等等很多細節

問題很多，發出來是希望作為反面教材，同時希望有人能夠一起重寫，然後得以共同進步。不要噴哈，當時作為剛學問題很多的，我也是原封不動發出來。

發這個主要是我覺得也許錯誤性案例的共同討論，更有進步意義，能學習到先驅們的寫法，同時也存在更多互動。先驅們，該出力的時候到了，在此靜候。

相關文章