2020-03-08 20页 doc 39KB 3阅读
is_650122
暂无简介
Test
不过像这个如此有名的函数其实还有一个缺陷,就是新加载的函数被放置于前一个加载函数的作用域之用,加载函数越多,其栈的层次越深,显然性能耗很大。不过像onclick,onload,onmouseout等这样函数,W3C把它们归属于DOM0的事件模型,好处是适用范围广,但签于其性能,于是又提出DOM1.0的事件模型与DOM2.0的事件模型,DOM2就是原微软的事件模型与原网景的事件模型的合璧,既能捕获又能冒泡,而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来,我们用addEvent 来改造我们的事件加载。 复制代码代码如下: (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.$ = $; })()Test
OK,没问题。上面的onReady函数有一个可选参数,用于是否待图片加载。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西,但如果我们的页面严重依赖于脚本布局呢?!我们想尽快让页面呈现出大体形态,这就用到domReady了。我们在原基础上改进它。 复制代码代码如下: (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.www.baiyuewang.netdone = 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浏览器用DOMContentLoaded,这是非常正现的W3C论DOM方法,与FF的DOMMouseScroll 不一样,基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成,原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美,它在IE下无法判定iframe的内容是否加载完毕。我们继续改进它。 复制代码代码如下: (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.$ = $; })() 我们简直是在重新实现jquery的$(document).ready(function(){ })!它功能非常强悍,配合利用闭包做成的命名空间,基本刀枪不入。而且它就只污染一个全局变量“JS”,可以与YUI 媲美了(笑)。不过对于一般应用来说,我们用不着做到如此面面俱到。假如我们不需要对图片进行处理,页面也没有iframe,我们可以搞下面这个微缩版出来。 复制代码代码如下: (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.$ = $; })()