前端自定义 window.onready (模仿 window.onload)和实用的 ready() 函数

浅析web前端开发技术
web前端开发技术 大纲
web前端开发技术期末填空题

jquery 有个 ready 事件方法,它是怎么实现的呢?我在网上搜了搜看到了一个事件名称 DOMContentLoaded,文档内容加载完成时。它会 onload 之前触发。原来如此。很少人知道这东东。
我今天用它来打造一个 window.onready 。后来发现,监听器要写在定义 onready 属性之后,很突兀。不能和 onload 一样。怎么办。要自己写个监听 onready 属性有值的时候,再执行 DOMContentLoaded 事件。这个方法感觉总是不太好。谁有更好的方法。提供来大家学习一下。
[code]/
自定义 window.onready (模仿 window.onload)
插入到 head
/
(function() {
this.Timer = function() {
if (window.onready) {
this.addEventListener(“DOMContentLoaded”, window.onready, false);
clearInterval(this.intervalId);
this.rel();
return;
}
console.log(window.intervalId);
}
this.rel = function() {
clearInterval(this.intervalId);
this.intervalId = undefined;
this.removeEventListener(“load”, this.loadHandler, false);
}
this.loadHandler = function() {
console.log(“load”);
this.rel();
}
this.addEventListener(“load”, this.loadHandler, false);
this.intervalId = setInterval(this.Timer);
})();[/code]

下面是写 window.onready
[code]window.onready = function(){
console.log(“ready”);
}[/code]

代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>touches</title>
        <script type=”text/javascript”>
            /*
自定义 window.onready (模仿 window.onload)
插入到 head
*/
            ;(function() {
                this.Timer = function() {
                    if (window.onready) {
                        this.addEventListener(
                            ‘DOMContentLoaded’,
                            window.onready,
                            false,
                        )
                        clearInterval(this.intervalId)
                        this.rel()
                        return
                    }
                    console.log(window.intervalId)
                }
                this.rel = function() {
                    clearInterval(this.intervalId)
                    this.intervalId = undefined
                    this.removeEventListener(‘load’, this.loadHandler, false)
                }
                this.loadHandler = function() {
                    console.log(‘load’)
                    this.rel()
                }
                this.addEventListener(‘load’, this.loadHandler, false)
                this.intervalId = setInterval(this.Timer)
            })()
            /* ready 结束 */
            /* 测试一下 */
            window.onready = function() {
                console.log(‘ready’)
                console.log(‘再试试去了window.onready’)
            }
        </script>
    </head>
    <body>
        查看 console.log 调试器(看看返回了什么,load, ready)。
    </body>
</html>

上面的方法,只是供大家学习之用。在实现应用中,很不方便。window.onready 只能用一次。不能重复写。

下面的方法更实用一些,可以重复调用。
[code](function() {
window.ready = function(handler) {
document.addEventListener(“DOMContentLoaded”, handler, false);
}
})();[/code]

使用方法一:
[code]ready(function() {
console.log(“ready”);
});[/code]

使用方法二:
[code]window.ready(function() {
console.log(“window.ready”);
});[/code]

测试一下:

代码片段 2

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>touches</title>
        <script type=”text/javascript”>
            ;(function() {
                window.ready = function(handler) {
                    document.addEventListener(
                        ‘DOMContentLoaded’,
                        handler,
                        false,
                    )
                }
            })()
            ready(function() {
                console.log(‘ready’)
            })
            window.ready(function() {
                console.log(‘window.ready’)
            })
        </script>
    </head>
    <body>
        查看 console.log 调试器(看看返回了 ready)。
    </body>
</html>
web前端开发新技术
前端开发技术树
web前端开发技术 答案
» 本文来自:前端开发者 » 《前端自定义 window.onready (模仿 window.onload)和实用的 ready() 函数》
» 本文链接地址:https://www.rokub.com/6559.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!