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.等等等很多細節
問題很多，發出來是希望作為反面教材，同時希望有人能夠一起重寫，然後得以共同進步。不要噴哈，當時作為剛學問題很多的，我也是原封不動發出來。
發這個主要是我覺得也許錯誤性案例的共同討論，更有進步意義，能學習到先驅們的寫法，同時也存在更多互動。先驅們，該出力的時候到了，在此靜候。
