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