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.等等等很多细节

问题很多，发出来是希望作为反面教材，同时希望有人能够一起重写，然后得以共同进步。不要喷哈，当时作为刚学问题很多的，我也是原封不动发出来。

发这个主要是我觉得也许错误性案例的共同讨论，更有进步意义，能学习到先驱们的写法，同时也存在更多互动。先驱们，该出力的时候到了，在此静候。