jQuery链式操作实现原理

jQuery 是一个快速,小巧,功能丰富的 JavaScript 库。jQuery 的一个特点就是链式操作。本文粗略讲解其原理。

  • 相信大家对链式 jQuery 的链式操作并不陌生,在这里简单的介绍一下链式操作的实现思路(用原生 JS 实现链式操作)。
  • 首先我们观察一下 jQuery 的基本语法
1
$(selector).action();
  • 基本语法由选择器和执行函数组成,jQuery 选择器返回的是一个自建对象(Object),jQuery 函数的方法是属于这个对象的,也就是说这些方法只能由这个对象来调用,所以实现链式操作只需要在执行一个函数后返回对象就行了。
  • 示例如下:
JavaScript
1
2
3
4
5
6
7
8
9
10
var obj = {
sayName: function (name) {
comsole.log("i am " + name);
return this;
},
action: function (action) {
comsole.log("i am " + action);
return this;
},
};
  • 这里的return this返回了一个对象,通过obj.sayName("jQuery").actoin("chaining")就可以实现连续调用函数了。
  • 其实并非是 jQuery 中才有这种链式操作,原生 js 中同样有的,比如有很多字符串和数组的方法都会返回字符串或者数组(字符串通过包装类返回字符串对象并拥有方法),例如反序输出字符串:
1
2
var str="Wellcome"
str.split('').reverse().join('')
  • 综上所述,在一个方法中返回一个 Object 类型的值就能实现类似 jQuery 的链式操作。

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×