Question

我正在寻找jQuery的document.ready（）的原生JavaScript解决方案。查看this thread，CMS建议只使用jQuery用于实现其document.ready（）的code。我正在查看bindReady()，但我不确定如何将其合并到我的代码中。我目前有类似的东西：

$(document).ready( function() {
    console.log('foo');
});

Answer 1

基本上当你需要做的是替换

的行

jQuery.ready();

使用您要调用的函数的名称。如果你想要像jQuery的就绪注册方法一样工作，那么构建一个创建队列的函数。 <000>触发“就绪”后循环队列。

您要求提供更多信息，所以这里是一个快速而肮脏的例子，没有使用超时。这不是生产准备，只是一个基本的POC。

    (function () {

        var ready = {
            _readyQueue: [],
            _hasRun: false,
            _docReadyCalled : function() {
                this._hasRun = true;
                this._execute();
            },
            _execute: function () {
                var func;
                while (this._readyQueue.length) {
                    func = this._readyQueue.shift();
                    func();
                }
            },
            register: function (func) {
                this._readyQueue.push(func);
                if (this._hasRun) {
                    this._execute();
                }
            }         
        }

        window.docReady = ready.register.bind(ready);  //use what ever global namespace you want here

        function bindReady() {

            /* This would be that jQuery code, I am just use window load here so not so much code */

            //Not all browser support this, quick and dirty for example
            window.addEventListener('load', ready._docReadyCalled.bind(ready), false);

        }

        bindReady();

    })();


    /* waiting for DOM to be ready */
    docReady(function () { console.log("here"); });
    docReady(function () { console.log("there"); });

    /* Showing what happens when you call docReady after it is ready */
    docReady(function () { console.log("registering ready again"); docReady(function () { console.log("I am here!"); });    });

Answer 2

最好的办法是避免完全使用DOM事件。当你想尽早加载时，它会变得非常复杂但是想要确定它不是太早。这是一种简单且100％可靠的技术，可在DOM完成加载后立即执行代码：

<html>
<head>
    <!-- head content, blah, blah, blah -->
    <script>
        var ready = function() {
            // Put everything in this function that you want to run when the page loads
            nowTheDomIsLoaded();
            console.log('foo');
        };
    </script>
</head>
<body>
    <!-- page content, blah, blah, blah -->
    <script>ready();</script>
</body>
</html>

基本上你把你想要的一切都放在一个函数中（例如ready()），并且你在关闭</body>标签之前做的最后一件事就是你执行那个函数。因为<body>中的所有内容都已被解析，所以您知道DOM已加载，并且这不会占用任何特殊的库。

原生JavaScript document.ready - 如何使用bindReady（）

2 个答案: