Heim  >  Artikel  >  Web-Frontend  >  javascript 事件加载与预加载_javascript技巧

javascript 事件加载与预加载_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:38:251133Durchsuche

通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:

复制代码 代码如下:

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

但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了!
复制代码 代码如下:

//后台代码



window.onload = function(){
func1();
func2();
//加载机密脚本……
}


这种情况生成出来的页面拥有两个window.onload代码块,很显然,第二个覆盖掉第一个。这时,轮到loadEvent函数出场了。
复制代码 代码如下:

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

它非常完美地解决了互相覆盖的问题,用法如下:
复制代码 代码如下:

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

但现实的问题总是如此出奇不意,也如此刁钻邪门。最近我想把所有的函数放到一个闭包中,以免除命名冲突之苦,比如那个有名的$的DOM选择器。JQuery,Prototype,mootool都用它做选择器的名字,共存成了个严重的问题。
复制代码 代码如下:

(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.$ = $;
})()

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn