zoukankan      html  css  js  c++  java
  • 全世界最短的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);
    	}
    
    }
    
  • 相关阅读:
    geoserver发布mysql表数据
    geoserver1
    geoserver
    快速搭建arcgis以及cesium环境
    openlayers和cesium实现地图二三维切换
    记Mysql类型引起的BUG
    OpenLayers 图层(Layers) 详解
    基于TrueLicense实现产品License验证功能
    第七章
    第六周进度报告
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1966215.html
Copyright © 2011-2022 走看看