zoukankan      html  css  js  c++  java
  • jQuery源码学习之六 (jQUery中扩展方法)

    jQuery 通过extend将方法 扩展到jQuery 函数上

    jQuery.extend({
       expando: 生成唯一的jQuery字符串 (jQuery 内部使用)
       noConflict: 防止冲突函数,
    
       //后面四个都与DOM加载有关
       isReady: DOM是否加载完(内),
       readyWait: 等待多少文件的计数器(内),
       holdReady: 推迟DOM触发,
       ready: 准备DOM触发,
       ...
       
     })
    
    

    expando() 属性:

    因为生成的字符串具有唯一性,后续的 数据缓存、事件操作、ajax 都用到了它。

    jQuery.extend({
       expando: "jQuery" + ( core_version + Math.random() ).replace( /D/g, "" ),
       ...
    })

    noConflict() 方法: 这里 有介绍。


    下面介绍jQuery的DOM加载相关:

    window.onload 和 $(function(){ ...}) 的区别在于:

    前者是等页面元素都加载完,后者是只等DOM节点加载完(加载速度高于前者,jQuery中利用了js原生方法 DOMContentLoaded 实现)。

    jQuery中调用原理见下图:


    由上图看出:接下来只分析 jQuery.ready.promise().done( fn )就可以了。

    由jQuery.ready.promise().done( fn ),可猜想 jQuery.ready.promise() 返回的是deferred延迟对象,后面才能直接跟 .done() 。(查看 deferre对象介绍

    jQuery.ready.promise() 相关源码:

    ...
    var readyList;
    ...
    completed = function() {
            document.removeEventListener( "DOMContentLoaded", completed, false );
            window.removeEventListener( "load", completed, false );
            jQuery.ready();
        };
    ...
    jQuery.ready.promise = function( obj ) {
            if ( !readyList ) {
      		readyList = jQuery.Deferred();  
      		if ( document.readyState === "complete" ) {
     			 setTimeout( jQuery.ready );
                    } else {
     			 document.addEventListener( "DOMContentLoaded", completed, false );
       			window.addEventListener( "load", completed, false );
     		}
      	}
     	return readyList.promise( obj );
    };

    由上面代码可以看出:

    1、jQuery.ready.promise()中创建了延迟对象readyList,最后返回的是readyList.promise() (不允许外部修改状态的延迟对象);

    2、不管走if还是else中的completed方法,最终调用的都是$.ready() 方法。


    $.ready()相关源码:

    ...
        isReady: false,
        readyWait: 1,
        holdReady: function( hold ) {
            if ( hold ) { 
                //readyWait就是一个计数器,表示还有多少个条目就绪后事件才能执行
                jQuery.readyWait++; 
            } else { 
                jQuery.ready( true );
            } 
        },
        ready: function( wait ) { 
            // 如果还有等待的事件的话就取消执行,直接返回 
            if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
                return;
            }
            jQuery.isReady = true;
    
            // 如果正常的ready事件触发, 减少等待的数目,然后继续等待 
            if ( wait !== true && --jQuery.readyWait > 0 ) {
                return; 
            }
            readyList.resolveWith( document, [ jQuery ] ); 
            if ( jQuery.fn.trigger ) { 
               jQuery( document ).trigger("ready").off("ready"); 
            }
        },
        ...


    
    
    
    

  • 相关阅读:
    并发编程 进程
    计算机的发展史和操作系统简介
    subprocess和struct模块
    socket编程
    面向对象进阶 反射
    类的内置方法
    常用模块(hashlib,configparser,logging)

    面向对象封装 classmethod和staticmethod方法
    面向对象 继承补充和多态
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965316.html
Copyright © 2011-2022 走看看