javascript 事件加载与预加载_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 18:38:25

原创

1295人浏览过

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

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

复制代码代码如下:

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

大家都在看：

JavaScript实现前端单元测试入门_javascript测试 JS代码规范怎么制定_JS JavaScript代码书写规范与最佳实践 JavaScript非标准日期字符串的健壮解析与格式化教程 JavaScript：高效地将列表数据分块并序列化为JSON JavaScript自定义日期字符串解析与格式化教程