Ruby's Louvre

每天学习一点点算法

导航

全世界最短的domReady

如果你不考虑支持IE,现代浏览器为javascript添加了许多黑魔法,让我们能写出更强有力的代码,如下面介绍的domReady。

function r(f){/in/(document.readyState)?setTimeout(r,0,f):f()}

需要以下知识点了解其运作:

  1. document.readyState的五种状态,"uninitalized"、"loading"、"interactive"、"complete" 、"loaded",不过FF3.6+才开始支持此属性。
  2. 死去的ecma4为正则字面量添加的新特性,让它拥有像exec方法一样的行为。详见这里
  3. 现代浏览器的setTimeout支持更多参数,第二个参数后的参数用作回调函数的参数,见下面测试:

如果你一定要支持IE,就得把此方法写长一点:

function r(f){/in/.exec(document.readyState)?setTimeout('r('+f+')',0):f()}

或许有人会提到DOMContentLoaded事件,但那不能触发domReady之后添加的函数。当然这个迷你的domReady的能力与它的体积相称,不支持多投事件。要使用支持多投事件,请见我另一篇博文《我的domReady第三版》

附上其他domReady的迷你实现

//https://github.com/jed/alReady.js
alReady = function( fn ) {
  var add = "addEventListener"
    , win = this
    , doc = win.document
    , pre = doc[ add ] ? "" : "on";
    
  /m/( doc.readyState ) ? fn() :

  "load DOMContentLoaded readystatechange".replace( /\w+/g, function( type, i ) {
    ( i ? doc : win )
      [ pre ? "attachEvent" : add ]
      (
        pre + type,
        function(){ if ( fn ) if ( i < 6 || /m/( doc.readyState ) ) fn(), fn = 0 },
        !1
      )
  })
}

https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js
function contentLoaded(win, fn) {

	var done = false, top = true,

	doc = win.document, root = doc.documentElement,

	add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
	rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
	pre = doc.addEventListener ? '' : 'on',

	init = function(e) {
		if (e.type == 'readystatechange' && doc.readyState != 'complete') return;
		(e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
		if (!done && (done = true)) fn.call(win, e.type || e);
	},

	poll = function() {
		try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
		init('poll');
	};

	if (doc.readyState == 'complete') fn.call(win, 'lazy');
	else {
		if (doc.createEventObject && root.doScroll) {
			try { top = !win.frameElement; } catch(e) { }
			if (top) poll();
		}
		doc[add](pre + 'DOMContentLoaded', init, false);
		doc[add](pre + 'readystatechange', init, false);
		win[add](pre + 'load', init, false);
	}

}

posted on 2011-02-27 14:13  司徒正美  阅读(4306)  评论(7编辑  收藏  举报