jquery ready函数源代码研究

下面是jquery ready函数源代码研究的完整攻略。

1. 什么是 ready 函数

ready 函数是 jQuery 中的一个特殊函数，它会在页面的 DOM 结构加载完成后才会执行。因为在 DOM 结构没加载完成之前，页面中的元素还没有准备好，所以如果在此时通过 jQuery 对页面元素进行操作，可能会导致一些错误。

2. ready 函数的源码研究

在 jQuery 中，ready 函数实际上是 jQuery.fn.ready 函数的别名。jQuery.fn.ready 函数的源码如下：

// A $( document ).ready() callback
jQuery.fn.ready = function( fn ) {

    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

可以看到，jQuery.fn.ready 函数的作用就是往 jQuery.ready.promise() 中添加一个回调函数。等到 DOM 结构加载完成后，jQuery.ready.promise() 会触发 done 方法，从而执行我们传入的回调函数。

那么，jQuery.ready.promise() 又是什么呢？

// The deferred used on DOM ready
var readyList;

jQuery.fn.ready = function( fn ) {

    // ...

    // If DOM ready is already complete, fire the callback
    if ( jQuery.isReady ) {
        fn.call( document, jQuery );
    } else {

        // Add the callback
        readyList.then( fn );
    }

    return this;
};

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        // ...

        // Create a deferred that resolves when document is ready
        if ( document.readyState === "complete" ||
            ( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

            // Handle it asynchronously to allow scripts the opportunity to delay ready
            window.setTimeout( jQuery.ready );

        } else {

            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed );
        }
    }
    return readyList.promise( obj );
};

可以发现，jQuery.ready.promise() 的主要作用是创建一个 deferred 对象，在 DOM 结构加载完成后，会通过执行 jQuery.ready() 函数来触发 deferred 对象的完成函数。

如果 DOM 结构已经加载完成，则会直接执行回调函数；否则会通过添加事件监听来等待 DOM 加载完成。等到 DOM 加载完成后，jQuery.ready() 函数就会执行，从而触发 deferred 对象的完成函数，从而执行对应的回调函数。

3. 如何使用 ready 函数

使用 ready 函数非常简单，只需要传入一个函数作为回调函数即可：

$(document).ready(function() {
    // DOM 加载完成后执行的代码
});

另外，由于 ready 函数是 jQuery 的方法之一，因此我们也可以使用简写的方式来调用它：

$(function() {
    // DOM 加载完成后执行的代码
});

4. 示例说明

示例1： DOM 加载完成后，修改页面中的标题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery ready 示例</title>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            $('title').text('jQuery ready 示例 - 页面标题已修改！');
        });
    </script>
</head>
<body>
    <h1>jQuery ready 示例</h1>
    <p>DOM 加载完成后，修改页面中的标题</p>
</body>
</html>

在这个示例中，我们使用 $(function() {}) 的方式来注册 ready 函数，等到 DOM 加载完成后，就会执行我们注册的回调函数，从而修改页面中的标题。

示例2：只有在登录状态下才显示隐藏区域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery ready 示例</title>
    <script src="jquery.js"></script>
    <script>
        $(function() {
            // 如果当前是登录状态，则显示隐藏区域
            if (isLoggedIn()) {
                $('#hidden').show();
            }
        });

        function isLoggedIn() {
            // 省略代码，根据一些条件判断是否登录
            return true;
        }
    </script>
</head>
<body>
    <h1>jQuery ready 示例</h1>
    <p>只有在登录状态下才显示隐藏区域</p>
    <div id="hidden" style="display:none;">这是一个隐藏的区域，只有在登录状态下才会被显示出来。</div>
</body>
</html>

在这个示例中，我们同样使用 $(function() {}) 的方式来注册 ready 函数，等到 DOM 加载完成后，就会执行我们注册的回调函数。在这个回调函数中，我们调用了一个自定义的函数 isLoggedIn() 来判断当前是否登录，如果是登录状态，则显示隐藏区域。这个隐藏区域初始时是隐藏的，只有通过 JS 代码才会把它显示出来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ready函数源代码研究 - Python技术站