快捷導(dǎo)航

javascript 事件加載與預(yù)加載

更新時(shí)間：2009年12月24日 13:15:04 作者：

本文對(duì)JavaScript事件加載進(jìn)行了一些延伸思考。加載多個(gè)事件時(shí)，使用window.onload可能會(huì)導(dǎo)致一些不便，而通過(guò)偵聽(tīng)器等方法，則可以解決這些問(wèn)題。

通常來(lái)說(shuō)，window.onload就夠用了，如果想加載多個(gè)事件，我們可以采取以下方式：

復(fù)制代碼代碼如下:

 
window.onload = function(){ 
func1(); 
func2(); 
func3(); 
//更多加載事件……………… 
} 

但如果由于某種特殊需要，我們不能合在一起寫(xiě)嗎？如當(dāng)前區(qū)域是面向管理員，后臺(tái)生成頁(yè)面時(shí)只有當(dāng)用戶是管理員，頁(yè)面才生成這部分，而這部分也用到一些特殊的腳本，上面的方法就歇菜了！

復(fù)制代碼代碼如下:

 
//后臺(tái)代碼 
<script type="text/javascript"> 
window.onload = function(){ 
func1(); 
func2(); 
//加載普通用戶用到的腳本…… 
} 
</script> 
<%# 以下腳本是為管理員準(zhǔn)備的 %> 
<% if @user.role == "manager" %> 
window.onload = function(){ 
func1(); 
func2(); 
//加載機(jī)密腳本…… 
} 
<% end %> 

這種情況生成出來(lái)的頁(yè)面擁有兩個(gè)window.onload代碼塊，很顯然，第二個(gè)覆蓋掉第一個(gè)。這時(shí)，輪到loadEvent函數(shù)出場(chǎng)了。

復(fù)制代碼代碼如下:

 
var loadEvent = function(fn) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 

它非常完美地解決了互相覆蓋的問(wèn)題，用法如下：

復(fù)制代碼代碼如下:

 
loadEvent(func1); 
loadEvent(func2); 
loadEvent(func3); 
//更多加載事件 

但現(xiàn)實(shí)的問(wèn)題總是如此出奇不意，也如此刁鉆邪門(mén)。最近我想把所有的函數(shù)放到一個(gè)閉包中，以免除命名沖突之苦，比如那個(gè)有名的$的DOM選擇器。JQuery，Prototype，mootool都用它做選擇器的名字，共存成了個(gè)嚴(yán)重的問(wèn)題。

復(fù)制代碼代碼如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var onReady = function(fn){ 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = fn; 
}else { 
window.onload = function() { 
oldonload(); 
fn(); 
} 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

不過(guò)像這個(gè)如此有名的函數(shù)其實(shí)還有一個(gè)缺陷，就是新加載的函數(shù)被放置于前一個(gè)加載函數(shù)的作用域之用，加載函數(shù)越多，其棧的層次越深，顯然性能耗很大。不過(guò)像onclick,onload,onmouseout等這樣函數(shù)，W3C把它們歸屬于DOM0的事件模型，好處是適用范圍廣，但簽于其性能，于是又提出DOM1.0的事件模型與DOM2.0的事件模型，DOM2就是原微軟的事件模型與原網(wǎng)景的事件模型的合璧，既能捕獲又能冒泡，而且多綁定多類(lèi)型事件而不會(huì)導(dǎo)致后者覆蓋前者。于是人們總搞出了有名的addEvent函數(shù)出來(lái)，我們用addEvent來(lái)改造我們的事件加載。

復(fù)制代碼代碼如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

OK，沒(méi)問(wèn)題。上面的onReady函數(shù)有一個(gè)可選參數(shù)，用于是否待圖片加載。我們知道JS引擎會(huì)在完成DOM樹(shù)后才開(kāi)始處理圖片與音頻等東西，但如果我們的頁(yè)面嚴(yán)重依賴(lài)于腳本布局呢？！我們想盡快讓頁(yè)面呈現(xiàn)出大體形態(tài)，這就用到domReady了。我們?cè)谠A(chǔ)上改進(jìn)它。

復(fù)制代碼代碼如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
var init = function() { 
if (arguments.callee.done) return; 
arguments.callee.done = true; 
loadEvent.apply(document,arguments); 
}; 
if(!+"\v1"){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
init(); 
})(); 
}else{ 
document.addEventListener( "DOMContentLoaded", function(){ 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
init(); 
}, false ); 
} 
return true; 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

dom標(biāo)準(zhǔn)瀏覽器用DOMContentLoaded，這是非常正現(xiàn)的W3C論DOM方法，與FF的DOMMouseScroll 不一樣，基本上所有非IE內(nèi)核的瀏覽器最新版都支持它了。IE下我們可以通過(guò)偵聽(tīng)document. documentElement. doScroll()來(lái)判斷DOM樹(shù)是否完成，原理是IE下只有當(dāng)DOM樹(shù)構(gòu)建完成后才能doScroll。但它還不是盡善盡美，它在IE下無(wú)法判定 iframe的內(nèi)容是否加載完畢。我們繼續(xù)改進(jìn)它。

復(fù)制代碼代碼如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var addEvent = function( obj, type, fn ) { 
if (obj.addEventListener) 
obj.addEventListener( type, fn, false ); 
else if (obj.attachEvent) { 
obj["e"+type+fn] = fn; 
obj.attachEvent( "on"+type, function() { 
obj["e"+type+fn](); 
} ); 
} 
}; 
var onReady = function(loadEvent,waitForImages) { 
if(waitForImages) { 
return addEvent(window, 'load', loadEvent); 
} 
var init = function() { 
if (arguments.callee.done) return; 
arguments.callee.done = true; 
loadEvent.apply(document,arguments); 
}; 
if(!+"\v1"){ 
if(window.self == window.top){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
init(); 
})(); 
}else{ 
document.attachEvent("onreadystatechange", function(){ 
if ( document.readyState === "complete" ) { 
document.detachEvent( "onreadystatechange", arguments.callee ); 
init(); 
} 
}); 
} 
}else{ 
document.addEventListener( "DOMContentLoaded", function(){ 
document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
init(); 
}, false ); 
} 
return true; 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 

我們簡(jiǎn)直是在重新實(shí)現(xiàn)jquery的$(document).ready(function(){ })！它功能非常強(qiáng)悍，配合利用閉包做成的命名空間，基本刀槍不入。而且它就只污染一個(gè)全局變量“JS”，可以與YUI媲美了（笑）。不過(guò)對(duì)于一般應(yīng)用來(lái)說(shuō)，我們用不著做到如此面面俱到。假如我們不需要對(duì)圖片進(jìn)行處理，頁(yè)面也沒(méi)有iframe，我們可以搞下面這個(gè)微縮版出來(lái)。

復(fù)制代碼代碼如下:

 
(function(){ 
if(!window.JS){ 
window['JS'] = {} 
} 
var onReady = function(loadEvent) { 
if(!+"\v1"){ 
(function(){ 
try { 
document.documentElement.doScroll("left"); 
} catch(e) { 
setTimeout( arguments.callee, 0 ); 
return; 
} 
loadEvent(); 
})(); 
}else{ 
document.addEventListener( "DOMContentLoaded", loadEvent, false ); 
} 
} 
JS.onReady = onReady; 
var $ = function(id){ 
return document.getElementById(id); 
} 
JS.$ = $; 
})() 