现在的位置: 首页 > 综合 > 正文

javascript 事件加载与预加载

2012年12月21日 ⁄ 综合 ⁄ 共 1544字 ⁄ 字号 评论关闭

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

复制代码 代码如下:
window.onload = function(){
func1();
func2();
func3();
//更多加载事件………………
}

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

复制代码 代码如下:
//后台代码
<script type="text/javascript">
window.onload = function(){
func1();
func2();
//加载普通用户用到的脚本……
}
</script>
<%# 以下脚本是为管理员准备的 %>
<% if @user.role == "manager" %>
window.onload = function(){
func1();
func2();
//加载机密脚本……
}
<% end %>

这种情况生成出来的页面拥有两个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.$ = $;
})()

dir="ltr" lang="zh-CN">

Test

抱歉!评论已关闭.