jQuery.API源码深入剖析以及应用实现(2) - jQuery对象访问和数据缓存

简介: 前言 上篇主要介绍JQuery的核心函数的原理机制,这篇将开始介绍jQuery对象访问和数据缓存原理,主要内容包括:      分析 一、jQuery对象访问 1. 【each(callback)】 例子: HTML代码 jQuery代码 运行结果 $("img").

前言

上篇主要介绍JQuery的核心函数的原理机制,这篇将开始介绍jQuery对象访问和数据缓存原理,主要内容包括:

  

 

分析

一、jQuery对象访问

1. 【each(callback)

例子:

HTML代码 jQuery代码 运行结果
<img/><img/>

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
});

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]
<img/><img/>

$("img").each(function(){
  $(this).toggleClass("example");
});

切换样式example

现在来看each方法的具体实现如下:

jQuery.fn  =  jQuery.prototype  =  {
    each: 
function ( callback, args ) {
        
return  jQuery.each(  this , callback, args );
    }
}

可以看到它返回的是全局的each方法,并且将自身jQuery对象做为参数给它,全局的each方法的具体实现如下:

//  args 作为内部成员的调用来使用
each:  function ( object, callback, args ) {
    
var  name, i  =   0 , length  =  object.length;   //  当object为jQuery对象时,length非空

    
if  ( args ) {
        
if  ( length  ===  undefined ) {
            
for  ( name  in  object )
                
if  ( callback.apply( object[ name ], args )  ===   false  )
                    
break ;
        } 
else
            
for  ( ; i  <  length; )
                
if  ( callback.apply( object[ i ++  ], args )  ===   false  )
                    
break
    
//  以下是客户端程序进行调用
    }  else  {
        
if  ( length  ===  undefined ) {
            
for  ( name  in  object )
                
if  ( callback.call( object[ name ], name, object[ name ] )  ===   false  )
                    
break ;
        } 
else
            
for  (  var  value  =  object[ 0 ];
                i 
<  length  &&  callback.call( value, i, value )  !==   false ; value  =  object[ ++ i] ){}
    } 

    
return  object;
}

现在我们关注下 for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 这句代码;

其中object[0]取得jQuery对象中的第一个DOM元素,通过for循环,得到遍历整个jQuery对象中对应的每个DOM元素,通过callback.call( value,i,value); 将callback的this对象指向value对象,并且传递两个参数,i表示索引值,value表示DOM元素;其中callback是类似于 function(index, elem) { ... } 的方法。所以就得到 $("...").each(function(index, elem){ ... });

 

2. 【size()】和【length

这两个都是得到jQuery 对象中元素的个数,具体实现如下:

size:  function () {
    
return   this .length;
}

 

3. 【selector】和【context

selector返回传给jQuery()的原始选择器。

context返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。

这两个属性在上一篇文章也有提及,请参考jQuery.API源码深入剖析以及应用实现(2) - 对象访问和数据缓存 ,这里不再敖述。


4. 【get()】和【get(index)

get()取得所有匹配的 DOM 元素集合。

get(index)取得其中一个匹配的DOM元素,index表示取得第几个匹配的元素。

$(this).get(0)与$(this)[0]等价。

现在看下get方法的具体实现如下:

get:  function ( num ) {
    
return  num  ===  undefined  ?  

        
//  当num为undefined时,返回所有匹配的DOM元素集合
        jQuery.makeArray(  this  ) : 

        
//  当num不为undefined时,返回第num+1个匹配的DOM元素
         this [ num ];
}


当不包含num时,调用jQuery.makeArray方法,具体实现如下:

makeArray:  function ( array ) {
    
var  ret  =  []; 

    
if ( array  !=   null  ){
        
var  i  =  array.length;
        
//  The window, strings (and functions) also have 'length'
         if ( i  ==   null   ||   typeof  array  ===   " string "   ||  jQuery.isFunction(array)  ||  array.setInterval )
            ret[
0 =  array;
        
else
            
while ( i )
                ret[
-- i]  =  array[i];
    } 

    
return  ret;
}

可以看出这里的array为jQuery对象,因此执行 while( i ) ret[--i] = array[i]; , 返回的是以array所有匹配的DOM元素所组成的数组。这和前面的定义相一致。

当包含num时,直接返回 this[ num ],所以这样验证了 $(this).get(0)与$(this)[0]等价 的说明。


5. 【index(subject)】 

搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。

例子

HTML代码 jQuery代码
<div id="foobar"><div></div><div id="foo"></div></div>

$("div").index($('#foobar')[0]) // 0
$("div").index($('#foo')[0]) // 2
$("div").index($('#foo')) // -1

现在看下index方法的具体实现如下:

index:  function ( elem ) { 

    
return  jQuery.inArray(
        
//  如果elem为一个jQuery对象,那么得到的是第一个匹配的DOM元素
        elem  &&  elem.jquery  ?  elem[ 0 ] : elem
    , 
this  );
}

继续查看jQuery.inArray方法,具体实现如下:

inArray:  function ( elem, array ) {
    
for  (  var  i  =   0 , length  =  array.length; i  <  length; i ++  )
    
//  Use === because on IE, window == document
         if  ( array[ i ]  ===  elem )
            
return  i; 

    
return   - 1 ;
}

一目了然,返回elem的索引值。


二、数据缓存

1. 【data(name)】和【data(name,value)

data(name)返回元素上储存的相应名字的数据,可以用data(name, value)来设定。

data(name,value)在元素上存放数据,同时也返回value。

例子

HTML代码 jQuery代码
<div></div>

$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined

<div></div>

$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;

现在来看看data方法的具体实现:

jQuery.fn.extend({
    data: 
function ( key, value ){
        
var  parts  =  key.split( " . " );
        parts[
1 =  parts[ 1 ?   " . "   +  parts[ 1 ] :  ""

        
if  ( value  ===  undefined ) {
            
var  data  =   this .triggerHandler( " getData "   +  parts[ 1 +   " ! " , [parts[ 0 ]]); 

            
if  ( data  ===  undefined  &&   this .length )
                data 
=  jQuery.data(  this [ 0 ], key ); 

            
return  data  ===  undefined  &&  parts[ 1 ?
                
this .data( parts[ 0 ] ) :
                data;
        } 
else
            
return   this .trigger( " setData "   +  parts[ 1 +   " ! " , [parts[ 0 ], value]).each( function (){
                jQuery.data( 
this , key, value );
            });
    }, 

    removeData: 
function ( key ){
        
return   this .each( function (){
            jQuery.removeData( 
this , key );
        });
    }
});


当我们要在元素上存放数据的时候,比如 $("div").data("blah","hello"); 将执行这句代码:

return this.trigger("setData" + parts[1] + "!", [parts[0], value]).each(function(){jQuery.data( this, key, value );});

我们看下jQuery.data(this,key,value);这句代码,继续展开jQuery.data方法的具体实现以及相关其他代码:

function  now(){
    
return   + new  Date;
}
var  expando  =   " jQuery "   +  now(), uuid  =   0 , windowData  =  {}; 

jQuery.extend({
    cache: {},
    data: 
function ( elem, name, data ) {
        elem 
=  elem  ==  window  ?
            windowData :
            elem; 

        
var  id  =  elem[ expando ]; 

        
//  在元素上产生唯一的ID
         if  (  ! id )
            id 
=  elem[ expando ]  =   ++ uuid; 

        
//  当我们试着访问一个键是否含有值的时候,如果不存在jQuery.cache[id]值, 初始化jQuery.cache[id]值
         if  ( name  &&   ! jQuery.cache[ id ] )
            jQuery.cache[ id ] 
=  {}; 

        
//  防止一个undefined的值覆盖jQuery.cache对象
         if ( data !==  undefined )
            jQuery.cache[ id ][ name ] 
=
 data; 

        
return name ?
            jQuery.cache[ id ][ name ] :
            id;
    }
});

其中这句代码

if ( data !== undefined )
            jQuery.cache[ id ][ name ] = data;

将data存储在cache对象中。

当我们需要返回元素上储存的相应名字的数据的时候,比如 $("div").data("blah"); 主要将执行这句代码:

data = jQuery.data( this[0], key );

最后将返回一个保存在 jQuery.cache[ id ][ name ] 中的数据。


2. 【removeData(name)

在元素上移除存放的数据。具体实现如下:

removeData:  function ( key ){
    
return   this .each( function (){
        jQuery.removeData( 
this , key );
    });
}

继续展开jQuery.removeData方法的具体实现:

removeData:  function ( elem, name ) {
    elem 
=  elem  ==  window  ?
        windowData :
        elem; 

    
var  id  =  elem[ expando ]; 

    
if  ( name ) {
        
//  elem是否存在元素cache
         if  ( jQuery.cache[ id ] ) {
            
//  移除一个具有特定键的元素数据
             delete  jQuery.cache[ id ][ name ]; 

            
//  将键值置空,准备移除元素cache
            name  =   ""

            
for  ( name  in  jQuery.cache[ id ] )
                
break

            
if  (  ! name )
                jQuery.removeData( elem );
        } 

    } 
else  {
        
//  Clean up the element expando
         try  {
            
delete  elem[ expando ];
        } 
catch (e){
            
//  IE has trouble directly removing the expando
             //  but it's ok with using removeAttribute
             if  ( elem.removeAttribute )
                elem.removeAttribute( expando );
        } 

        
//  完全移除元素cache
         delete  jQuery.cache[ id ];
    }
}

通过调用 delete jQuery.cache[ id ][ name ];  和 delete jQuery.cache[ id ];,移除所有该元素上的cache数据;


3. 【queue([name])】,【queue([name],callback)】和【queue([name],queue

例子

HTML 代码 jQuery 代码
  <style>
        div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
        div.newcolor { background:blue; }
        span { color:red; }
        </style>
        <button id="show">Show Length of Queue</button>
        <span></span>
        <div></div>
$("#show").click(function () {
        var n = $("div").queue("fx");
        $("span").text("Queue length is: " + n.length);
        });
        function runIt() {
        $("div").show("slow");
        $("div").animate({left:'+=200'},2000);
        $("div").slideToggle(1000);
        $("div").slideToggle("fast");
        $("div").animate({left:'-=200'},1500);
        $("div").hide("slow");
        $("div").show(1200);
        }
        runIt();
  <style>
        div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
        div.newcolor { background:blue; }
        </style>
        Click here...
        <div></div>
$(document.body).click(function () {
        $("div").show("slow");
        $("div").animate({left:'+=200'},2000);
        $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
        });
        $("div").animate({left:'-=200'},500);
        $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
        });
        $("div").slideUp();
        });
  <style>
        div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
        div.newcolor { background:blue; }
        </style>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <div></div>
  $("#start").click(function () {
        $("div").show("slow");
        $("div").animate({left:'+=200'},5000);
        $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
        });
        $("div").animate({left:'-=200'},1500);
        $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
        });
        $("div").slideUp();
        });
          $("#stop").click(function () {
        $("div").queue("fx", []);
        $("div").stop();
        });

由于div节点产生动画效果,每条动画就调用一个jQuery.data方法,将每条动作保存在jQuery.cache中,就形成了缓存队列。至于div节点产生动画效果如何调用jQuery.data方法会在以后的章节中介绍。

请看第一行的例子,可以看到这里包含7条动作效果,也就是在还没有执行它们以前,如果调用 var n = $("div").queue("fx"); 返回一个队列对象n,查看该对象的长度,发现队列长度为7,而每执行完一条动作,队列长度就会减1。

再看第二行的例子,queue的第一个参数为一个函数,当执行完这个自定义函数后,要继续执行队列,这要调用dequeue方法。

再看第三行的例子,queue的第二个参数为一个数组,实际上它可以是一个新队列或者现有队列去替代当前队列,其中新队列或者现有队列的值和queue(callback)相同。

现在看看queue的具体实现:

queue:  function (type, data){
    
if  (  typeof  type  !==   " string "  ) {
        data 
=  type;
        type 
=   " fx " ;
    } 

    
if  ( data  ===  undefined )
    {
        
return  jQuery.queue(  this [ 0 ], type );} 

    
return   this .each( function (){
        
var  queue  =  jQuery.queue(  this , type, data );
         
if ( type  ==   " fx "   &&  queue.length  ==   1  )
            queue[
0 ].call( this );
    });
}

其中 if(typeof type !== "string") { data = type; type = "fx"; } 可以得出fx为默认的队列名称。继续查看jQuery.queue方法:

queue:  function ( elem, type, data ) {
    
if  ( elem ){ 

        type 
=  (type  ||   " fx " +   " queue "

        
var  q  =  jQuery.data( elem, type ); 

        
if  (  ! ||  jQuery.isArray(data) )
            q 
=  jQuery.data( elem, type, jQuery.makeArray(data) );
        
else   if ( data )
            q.push( data ); 

    }
    
return  q;
}

归根结底最后通过jQuery.data从jQuery.cache对象获得数据。jQuery.isArray(data) 判断是否是新队列或者现有队列数组。


4. 【dequeue([name])

从队列最前端移除一个队列函数,并执行它。

dequeue的具体实现为:

dequeue:  function (type){
    
return   this .each( function (){
        jQuery.dequeue( 
this , type );
    });
}

然后查看jQuery.dequeue方法的具体实现如下:

dequeue:  function ( elem, type ){
    
var  queue  =  jQuery.queue( elem, type ),
        fn 
=  queue.shift();
    
if ! type  ||  type  ===   " fx "  )
        fn 
=  queue[ 0 ];
    
if ( fn  !==  undefined )
        fn.call(elem);
}

可以发现最后通过 fn=queue.shift();或者fn=queue[0]得到队列的第一个元素,然后fn.call(elem);去执行它。


好了,jQuery对象访问和数据缓存的原理机制就是这样的。

目录
相关文章
|
1月前
|
人工智能 自然语言处理 机器人
使用 API 编程开发扣子应用
扣子(Coze)应用支持通过 API 编程,将 AI 聊天、内容生成、工作流自动化等功能集成至自有系统。主要 API 包括 Bot API(用于消息交互与会话管理)及插件与知识库 API(扩展功能与数据管理)。开发流程包括创建应用、获取密钥、调用 API 并处理响应,支持 Python 等语言。建议加强错误处理、密钥安全与会话管理,提升集成灵活性与应用扩展性。
345 0
|
2月前
|
监控 供应链 搜索推荐
电商数据开发实践:深度剖析1688商品详情 API 的技术与应用
在电商数字化转型中,数据获取效率与准确性至关重要。本文介绍了一款高效商品详情API,具备全维度数据采集、价格库存管理、多媒体资源获取等功能,结合实际案例探讨其在电商开发中的应用价值与优势。
|
2月前
|
API 定位技术 调度
实现精准定位的—坐标系经纬度转换API技术说明和行业应用
在地图服务、物流调度等应用中,多源地理位置数据因采用不同坐标系(如WGS84、GCJ02、BD09)需统一转换,以避免位置偏移影响路径规划与分析精度。本文介绍坐标转换背景、技术方案及Python调用示例,强调其在智慧交通与物流系统中的重要性。
318 0
|
4月前
|
人工智能 供应链 安全
未来电商趋势:API技术在智能供应链中的应用
随着电商蓬勃发展,供应链管理正借助API技术实现智能化升级。本文解析API作为电商生态“粘合剂”的作用,探讨其在库存管理、物流协同和风险预测中的关键应用,以及对AI融合、区块链安全和实时生态的推动。API不仅提升效率与用户体验,更重塑电商未来格局,成为企业竞争的核心优势。拥抱API集成,将是应对市场复杂性的关键策略。
93 5
|
4月前
|
存储 供应链 API
区块链技术在电商API中的应用:保障数据安全与交易透明
区块链技术在电商API中的应用,为数据安全与交易透明提供了新方案。通过数据加密、分布式存储、智能合约管理、商品溯源及实时结算等功能,有效提升电商数据安全性与交易可信度。然而,技术成熟度、隐私保护和监管合规等挑战仍需克服。未来,随着物联网、大数据等技术融合及政策支持,区块链将在电商领域发挥更大潜力,推动行业智能化发展。
|
4月前
|
数据采集 Java API
深度解析:爬虫技术获取淘宝商品详情并封装为API的全流程应用
本文探讨了如何利用爬虫技术获取淘宝商品详情并封装为API。首先介绍了爬虫的核心原理与工具,包括Python的Requests、BeautifulSoup和Scrapy等库。接着通过实战案例展示了如何分析淘宝商品页面结构、编写爬虫代码以及突破反爬虫策略。随后讲解了如何使用Flask框架将数据封装为API,并部署到服务器供外部访问。最后强调了在开发过程中需遵守法律与道德规范,确保数据使用的合法性和正当性。
|
23天前
|
人工智能 数据可视化 测试技术
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
269 11
|
5天前
|
Java API 开发者
揭秘淘宝详情 API 接口:解锁电商数据应用新玩法
淘宝详情API是获取商品信息的“金钥匙”,可实时抓取标题、价格、库存等数据,广泛应用于电商分析、比价网站与智能选品。合法调用,助力精准营销与决策,推动电商高效发展。(238字)
43 0
|
1月前
|
安全 API 数据安全/隐私保护
【Azure 环境】Microsoft Graph API实现对Entra ID中应用生成密码的时间天数
本文介绍如何通过 Azure 的 App Management Policy 限制用户在创建 AAD 应用程序的 Client Secret 时设置最长 90 天的有效期。通过 Microsoft Graph API 配置 defaultAppManagementPolicy,可有效控制密码凭据的生命周期,增强安全管理。
|
3月前
|
存储 机器学习/深度学习 API
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡
551 31
Android API Level 到底是什么?和安卓什么关系?应用发布如何知道自己的版本?优雅草卓伊凡

相关课程

更多