链式编程的实现原理
jQuery可以让我们开发者一直使用点语法调用自身方法的原理,主要原因是jQuery内部利用了js的对象来实现。
在jQuery中,如果一直对同一个元素或元素的其他关系元素(兄弟元素,父子元素)进行操作,那么可以使用 .语法(点语法),一直写下去。
$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");
可以写成:
$("#box").css("background", "pink").siblings().css("background", "red");
实现链式编程jQuery选择器本身是一个jquery对象。jQuery内部利用this返回了自己本身。
//js中,声明一个对象
var obj = {
name:"姓名",
desc: function(){
console.log(this); // 打印当前自身对象
console.log(this.name); // 调用自身对象的属性
return this; // 实现链式编程的原理,就是在调用方法后,方法本身返回对象。
},
read: function(){
console.log("hello!");
return this;
}}
总结:
- 实现链式编程的核心,是对象中的每一个方法都会返回当前对象。
var 对象 = {
方法名:function(){
// …
return this; // 实现链式编程的核心this
}
} - 在方法中,js提供一个this的关键字,表示当前对象。