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.等等等很多细节
问题很多,发出来是希望作为反面教材,同时希望有人能够一起重写,然后得以共同进步。不要喷哈,当时作为刚学问题很多的,我也是原封不动发出来。
发这个主要是我觉得也许错误性案例的共同讨论,更有进步意义,能学习到先驱们的写法,同时也存在更多互动。先驱们,该出力的时候到了,在此静候。