链式调用this

jQuery在JavaScript库中的一哥地位是不可撼动的,虽然随着这几年框架的崛起和一些大平台移除了jQuery的依赖,但不可否认jQuery还是前端开发必须掌握的技能。

jQuery的好处很多很多,其中链式调用是其中之一。网上很多说jQuery的链式调用是返回this对象,其实原理是这样的,只不过jQuery会更复杂。

jQuery自动缓存每一步的jQuery操作,返回的都是一个jQuery对象:

$('div').find('ul li').eq(2).html('第三个');
console.log($('div'));
console.log($('div').find('ul li'));
console.log( $('div').find('ul li').eq(2));

jQuery采用了缓存和返回jQuery对象,在效率上会比非链式的更高,在调用上也更简便。

我们可以实现最简单的this返回的链式调用:

function Fn() { 
 this.get = function () { 
   console.log('get'); 
   return this; 
 } 
 this.post = function () { 
   console.log('post'); 
    return this; 
 }
}
Fn.prototype.delete = function () { 
  console.log('delete');
return this;
}
var fn = new Fn();
fn.get().post().delete();

这是构造函数和实例对象的链式调用,还有更简单的:

var fn = { 
 get: function () { 
   console.log('get'); 
   return this; 
 }, 
 post: function () { 
    console.log('post'); 
   return this; 
 }, 
 delete: function () { 
   console.log('delete'); 
   return this; 
 }
}
fn.get().post().delete();

方法函数可以这么去实现链式调用,至于jQuery怎么保存每一次的dom节点返回jQuery对象,暂时没有能力去研究。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我理解的JavaScript预编译

    JavaScript执行过程首先先语法分析,就是分析一遍代码有没有语法错误,解析期间不会执行代码。接着就开始预编译,预编译完了就开始一行一行执行代码。

    wade
  • 几种居中方法

    Margin 0 auto、text-align:center、line-height这几个就不用多说了,适合文字、图片和块元素水平居中。如果知道容器高度或者是...

    wade
  • vue nextTick源码

    早之前有分享过vue的nextTick的使用,当时说当数据发生变化,更新后执行回调没有实现,那时候也不知道怎么测试的,其实nextTick方法只是做了一步异步。...

    wade
  • JavaScript中的链式调用

    链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。

    WindrunnerMax
  • JavaScript中的链式调用

    链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧。

    WindrunnerMax
  • Python调用.net动态库实现过程解析

    cpython是分32和64位的,对应的pythonnet也是分的,版本要对应好 pythonnet最核心的就是python.Runtime.dll动态库,这...

    砸漏
  • JS面试之函数(1)

    1.函数声明有预解析,而且函数声明的优先级高于变量; 2.使用Function构造函数定义函数的方式是一个函数表达式,这种方式会导致解析两次代码,影响性能。第一...

    火狼1
  • C++之ListNode

    于小勇
  • 页面跳转,重定向,空控制器,空操作

    TP5\thinkphp\library\traits\controller\Jump.php

    公众号php_pachong
  • vue中axios处理http发送请求的示例(Post和get)

    axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlenc...

    晓歌

扫码关注云+社区

领取腾讯云代金券