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

提取jQuery的ready方法

2012年02月15日 ⁄ 综合 ⁄ 共 2824字 ⁄ 字号 评论关闭

这次的onDOMReady更有吸引力了

先说明一下,为什么要提取jQuery的ready方法?

因为在很多时候大家做前端时,需要在DOM树载入时马上执行一些函数,比如对导航条进行初始化。
但又不愿意仅为了这一个需求而引入整个jQuery库,于是就把jQuery的ready方法提取出来,单独使用了。

另外你也可以在构建自己的js框架时使用此函数。

重复一遍,我们的口号是什么?
彪悍的应用,没有一行代码是多余的!!!

ready-from-jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>提取自jQuery的ready方法</title>

    
<script type="text/javascript">

        (function () {
            
var isReady = false//判断onDOMReady方法是否已经被执行过  
            var readyList = []; //把需要执行的方法先暂存在这个数组里  
            var timer; //定时器句柄  
            ready = function (fn) {
                
if (isReady)
                    fn.call(document);
                
else
                    readyList.push(
function () { return fn.call(this); });
                
return this;
            }
            
var onDOMReady = function () {
                
for (var i = 0; i < readyList.length; i++) {
                    readyList[i].apply(document);
                }
                readyList 
= null;
            }
            
var bindReady = function (evt) {
                
if (isReady) return;
                isReady 
= true;
                onDOMReady.call(window);
                
if (document.removeEventListener) {
                    document.removeEventListener(
"DOMContentLoaded", bindReady, false);
                } 
else if (document.attachEvent) {
                    document.detachEvent(
"onreadystatechange", bindReady);
                    
if (window == window.top) {
                        clearInterval(timer);
                        timer 
= null;
                    }
                }
            };

            if (document.addEventListener) {
                document.addEventListener(
"DOMContentLoaded", bindReady, false);
            } 
else if (document.attachEvent) {
                document.attachEvent(
"onreadystatechange"function () {
                    
if ((/loaded|complete/).test(document.readyState))
                        bindReady();
                });
                
if (window == window.top) {
                    timer 
= setInterval(function () {
                        
try {
                            isReady 
|| document.documentElement.doScroll('left'); //在IE下用能否执行doScroll判断dom是否加载完毕  
                        } catch (e) {
                            
return;
                        }
                        bindReady();
                    }, 
5);
                }
            }
        })();

        
        //使用方法
        ready(navInit); //navInit为已存在的函数  

        
//或  
        ready(function () {
            navInit();  
        }); 

        function navInit() {
            document.getElementById(
"info").innerHTML = "document.getElementById(“info”).innerHTML = ok";
        }

    </script>
</head>
<body>

<div id="info"></div>

</body>
</html>

 

 

 

抱歉!评论已关闭.