资讯专栏INFORMATION COLUMN

从jquery的end()如何实现到pushStack()的延伸思想

妤锋シ / 1874人阅读

问题:

查询jquery源码:

そうですね
看代码:

输出结果:


在jQuery对象中,每个对象都有一个prevObject属性。

问题1:这个属性什么时候创建??----->>> 只要你创建了jQuery对象就会产生
问题2:在哪里创建??------>>>> 在一个pushStack()方法里产生
问题3:作用??? ----->>>>指向操作前的jQuery对象引用
问题4:如何创建?? ------>>>> 看源码:

步骤:

1. 创建一个jQuery对象,this.constructor()返回引用this
2. jQuery.merge 把elems节点,合并到新的jQuery对象
3. 给返回的新jQuery对象添加属性prevObject

现在是不是还有点不懂??没关系,继续看图.....

先查找$(".warp")的子元素,然后调用prevObject属性,对比一看,他们俩都是class=warp的最外层div,证明prevObject确实是指向前一个操作,如果不进行任何破坏源对象的情况下(就是不进行查询过滤操作),该对象的prevObject对象就指向一个jQuery自己定义的空间,而且任何对象的prevObject都指向它,如图:

总结:

备注:其实这个图略微有些瑕疵,$(".warp").children()其实指向的是一个$(".warp")的一个副本

$(".warp").children().prevObject != $(".warp")
$(".warp").children().prevObject !== $(".warp")

优点
1.很适合链式操作,比如我需要在一个父元素内寻找几个毫无规律的子元素设置属性或者搞其他事情,在javascript中,你需要:

$(".father").find(".son1").prop()....
$(".father").find(".son5").prop()....
....

你看这代码,不停的创建这个父元素对象(当然你可以缓存这个父对象),而且必须写多行,俩者之间没有任何关联。而jquery利用了他们的共有规律(都是调用父元素去查找子元素进行操作,那我何不直接使用某个方法返回上一级操作的对象??)直接使用一个prevobject属性去返回它,这样就有了:

$(".father").find(".son1").prop().....巴拉巴拉操作  .prevObject.find(".son5").prop()...

直接一行完成操作像一条链子,不仅好看,还一目了然....
2.我们很少使用pushStack方法,然而在jQuery中,好多增删改查操作都会使用这个方法,这使得该方法的封装性和稳定性能都很very good!!

注意:addBack()方法返回的是当前操作对象和上一个操作对象,而且这个组合的新的对象会缓存在pushStack栈中

当我们写脚本的时候,对代码的封装都要很好的完成,把一些最基本的但又是涉及到很多函数操作时的方法封装在一个函数中,然后只提供一个接口给外面,类似于java的接口(高度抽象的方法),外面只能通过这个接口的一些属性或者方法去调用,你可以写在原型上,采用原型模式,或者组合使用构造函数模式和原型模式,如果不适合你也可以采用稳妥构造函数模式.

借鉴:
1.http://www.cnblogs.com/aaronj...
2.http://blog.csdn.net/wulex/ar...
3.https://stackoverflow.com/que...
4.https://www.learningjquery.co...
5.https://www.cnblogs.com/MnCu8...
6.http://jquery.cuishifeng.cn/i...
7.http://www.runoob.com/jquery/...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93591.html

相关文章

  • jQuery 源码系列(九)回溯机制

    摘要:在对象的内部,有着一个对象栈,用来维护所有已经操作过的对象。这样来想一想,如果每一个对象都有一个指针指向上一个对象的话,也就间接组成了一个对象栈。 欢迎来我的专栏查看系列文章。 学习了 prevObject 之后发现,我之前写的一篇博客介绍 pushStack 函数那个内容是有问题的。本来我以为这个 pushStack 函数就是一个普通的函数,它接受一个 DOM (数组)参数,把该参数...

    hss01248 评论0 收藏0
  • 浅析jQuery整体框架与实现(上)

    摘要:通常的做法是,为它们指定回调函数。请求返回请求返回请求返回异步队列解耦异步任务和回调函数为模块队列模块事件提供基础功能。 前言 jQuery整体框架甚是复杂,也不易读懂,这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为:入口模块、底层模块和功能模块。这里,我们以jquery-1.7.1为例进行分析。 jquery的总体架构 16 (function( window,...

    VEIGHTZ 评论0 收藏0
  • jQuery源码分析2-JQ对象添加一些方法和属性

    摘要:节点修改对象的属性,这就相当于把对象转成了一个类数组,最后返回,可用于链式调用。如果传入的是单标签,且第二个参数是一个纯对象例如则把后面对象的属性一一添加到创建的这个节点的属性上。 我们先看看jQuery的原型中初始化了哪些属性和方法: jQuery.fn = jQuery.prototype = { jquery: core_version, //jquery版本号 ...

    TANKING 评论0 收藏0
  • FE.SRC-逐行分析jQuery2.0.3源码-完整笔记

    摘要:根据项目选型决定是否开启。为了压缩,可维护为了支持从而使用代替变量存储防冲突会用到,形如版本号声明最终调用的是这个原型实际上。功能检测统一兼容性问题。 概览 (function (){ (21 , 94) 定义了一些变量和函数 jQuery=function(); (96 , 293) 给jQuery对象添加一些方法和属性; (285 , 347) ...

    Lin_R 评论0 收藏0
  • FE.SRC-逐行分析jQuery2.0.3源码-完整笔记

    摘要:根据项目选型决定是否开启。为了压缩,可维护为了支持从而使用代替变量存储防冲突会用到,形如版本号声明最终调用的是这个原型实际上。功能检测统一兼容性问题。 概览 (function (){ (21 , 94) 定义了一些变量和函数 jQuery=function(); (96 , 293) 给jQuery对象添加一些方法和属性; (285 , 347) ...

    褰辩话 评论0 收藏0

发表评论

0条评论

妤锋シ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<