jquery 手写一个简单浮窗的反面教材

前言

初学jquery写的代码,陈年往事回忆一下。

正文

介绍一下大体思路

思路:

1.需要控制一块区域,这块区域一开始是隐藏的。

2.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域消失。

3.需要动态控制遮罩层。

4.当窗体滚动的时候,我需要去让这块移动,那么这块区域的定位应该是绝对定位的。

5.当窗体大小变化的时候,我需要将这个登录从新定位

说了这么多其实就是一个简单的效果:

jquery 手写一个简单浮窗的反面教材_第1张图片

嗯,按照这个大体的思路,我当时写下这样一份充满了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 = '
'; //显示窗口事件 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.等等等很多细节

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

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

你可能感兴趣的:(jquery 手写一个简单浮窗的反面教材)