0

0

jquery源码解析:proxy,access,swap,isArraylike详解

php中文网

php中文网

发布时间:2016-06-07 15:38:13

|

1528人浏览过

|

来源于php中文网

原创

jquery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jquery构造函数的。 jQuery.extend({ ...... guid: 1, //唯一标识符,跟事件有关。举个例子:function show(){alert(this);}, $("#input1").click(show),$("#input2

jquery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jquery构造函数的。

jQuery.extend({ 

  ...... 

  guid: 1,    

  //唯一标识符,跟事件有关。举个例子:function show(){alert(this);}, $("#input1").click(show),$("#input2").click(function(){$("#input1").off()}),这里的show方法是事件方法,所以通过off取消掉事件绑定,可以很容易找到事件方法show。但是如果把 $("#input1").click(show)改成 $("#input1").click($.proxy(show,window)),这时show不是事件方法,而是普通方法,那么通过off取消的时候,它是怎么找到这个普通方法show的,其实就是通过guid,因为guid会累加,所以是唯一的,因此可以找到。请看下个方法就知道详情了。

  proxy: function( fn, context ) {    

    //改变方法(函数)执行的this指向。举例:$.proxy(show,document),想给show传参的话,有两种方式:var fn = $.proxy(show,document,1,2);fn(3,4)。最终show执行时就会变成show(1,2,3,4),proxy返回一个函数,调用fn时,就会执行show方法。
    var tmp, args, proxy;

    if ( typeof context === "string" ) {   //这里处理特殊调用情况,比如:$.proxy(obj,"show")(正常写法$.proxy(obj.show,obj)),show方法执行时,this指向的obj,并且show是obj的属性方法.var obj = { show: function(){}}。
      tmp = fn[ context ];
      context = fn;
      fn = tmp;
    }

    if ( !jQuery.isFunction( fn ) ) {
      return undefined;
    }

    args = core_slice.call( arguments, 2 );  //传入的参数,相当于例子的[1,2]
    proxy = function() {
      return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );  //把[3,4]和[1,2]合并成[1,2,3,4]
    };

    proxy.guid = fn.guid = fn.guid || jQuery.guid++;

    //第一次时,fn.guid(show.guid)是undefined,proxy.guid = fn.guid = 1,show.guid =1, 

    //function() {return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) )}.guid=1,唯一标识,取消绑定时,可以用到。

    return proxy;
  },

  //$().css(),$().attr(),通过参数的不同,实现get/set。参数的个数,以及参数的类型。$("div").css("width"),获得第一个div元素的width,$("div").css("width",100)设置所有的div元素的width。$("div").css({width:100,height:200}),也是设置所有的div元素,尽管只有一个参数,但是类型不一样。JQuery中有很多这种方法,所以统一用access实现。

  access: function( elems, fn, key, value, chainable, emptyGet, raw ) {

    //elems操作的元素,可能是一个集合。fn是一个回调函数(有区别的在回调函数中处理,比如,css设置样式,attr设置属性)。key和value就是属性名和属性值。chainable为true,设置,为false就获取。
    var i = 0,
      length = elems.length,
      bulk = key == null;

    if ( jQuery.type( key ) === "object" ) {//处理这种类型$("div").css({width:100,height:200})
      chainable = true;
      for ( i in key ) {
        jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
      }

    }

    else if ( value !== undefined ) {   //处理这种$("div").css("width",100)
      chainable = true;

      if ( !jQuery.isFunction( value ) ) {
        raw = true;    //字符串(数字)时
      }

      if ( bulk ) {   //如果没有key值
        if ( raw ) {   //如果value是字符串(数字)
          fn.call( elems, value );   //调用回调方法
          fn = null;   //把回调方法赋为空

        }

        else {     //如果是函数,这里面的不用深入理解
          bulk = fn;
          fn = function( elem, key, value ) {
            return bulk.call( jQuery( elem ), value );
          };
        }
      }

      if ( fn ) {    //如果没有key值,并且value是字符串(数字),这里就为null,不会执行
        for ( ; i           fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
        }
      }
    }

    return chainable ?     //获取时,chainable为false
        elems :     //设置时,chainable为true,直接返回元素,进行后续的链式操作

OmniAudio
OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客,并生成可在常见 Podcast ap

下载

          bulk ?   
            fn.call( elems ) :  //没有key值时,就回调
              length ? fn( elems[0], key ) : emptyGet;  //有key值时,判断元素有没有元素,有的话就获取第一个元素的key值(属性名的值),没有元素的话,就返回emptyGet。
  },

  now: Date.now,  //当前时间距离1970年的毫秒数,相当于(new Date()).getTime()

  //以下方法是处理这种情况的:

  //

$("#div1").get(0).offsetWidth取到的是0,因为它是display:none,不存在DOM树中。$("#div1").width()取到的是100,为啥jQuery可以。因为jQuery会对display:none的元素进行处理,变成

  swap: function( elem, options, callback, args ) {  //css的转换,内部使用
    var ret, name,
      old = {};

    for ( name in options ) {    

      //保存老样式,插入新样式。这里假设options={width:100px;height:100px;background:red;display:block;visibility:hidden;position:absolute}

      //elem.>
      old[ name ] = elem.style[ name ]; 
      elem.style[ name ] = options[ name ];
    }

    ret = callback.apply( elem, args || [] );  

    //通过插入的新样式来获取元素的css值,callback = function(args){ if(args不是[]) return this[args]},args= offsetWidth;

    for ( name in options ) {       //恢复老样式
      elem.style[ name ] = old[ name ];
    }

    return ret;
  }

  ......

})

最后讲一下这个方法:

function isArraylike( obj ) {//判断是否是数组,类数组,带length的json,是的话就返回真
  var length = obj.length,
  type = jQuery.type( obj );

  if ( jQuery.isWindow( obj ) ) {  //担心window对象有length属性
    return false;
  }

  if ( obj.nodeType === 1 && length ) {  

  //元素节点对象,并且有length属性,返回真。document.getElementsByTagName("div")和body.childNodes都不是这种情况。可能用于内部调用,这里如果有谁知道的,可以告诉我。

    return true;
  }

  return type === "array" || type !== "function" &&   //不能是函数,因为函数也可能有length属性
    ( length === 0 ||typeof length === "number" && length > 0 && ( length - 1 ) in obj );

    //typeof length === "number" && length > 0 && ( length - 1 ) in obj )处理{0:"a",1:"b",length:2}这种情况。length === 0处理arguments为空的时候,就是不传入函数任何数据,这时函数中的arguments的length为0,但是是类数组。document.getElementsByTagName("div")和body.childNodes也是类数组。
}

 

 

加油!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

127

2026.02.06

java多线程方法汇总
java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容,阅读专题下面的文章了解更多详细内容。

49

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

687

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

410

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

47

2026.02.06

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

51

2026.02.06

JavaScript 异步编程与事件驱动架构
JavaScript 异步编程与事件驱动架构

本专题深入讲解 JavaScript 异步编程与事件驱动架构,涵盖 Promise、async/await、事件循环机制、回调函数、任务队列与微任务队列、以及如何设计高效的异步应用架构。通过多个实际示例,帮助开发者掌握 如何处理复杂异步操作,并利用事件驱动设计模式构建高效、响应式应用。

36

2026.02.06

java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

91

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

37

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10.7万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号