$(“elem”).show().css(“color”,”red”); 这就是jq里面的链式操作了 是不是很方便啊
可是以前只是用的比较方便 没仔细了解过是怎么实现的 被问到了也不知所措所以我就借鉴了下面资料来了解下js的链式操作
https://segmentfault.com/a/1190000008724608
http://www.jb51.net/article/75476.htm
先理解下最简单的链式调用法
我们可以用简单的构建对象的方法来实现
let Obj = {
a: 0,
add: function(){
this.a += 1;
return this
}
}
Obj.add().add();
console.log(Obj.a); //2
这个只是最简单的实现链式调用的方法
实现Obj.add(1).add(2).add(3) // 6
let Obj = {
a: 0,
add: function(b){
this.a = b+this.a;
return this
}
}
Obj.add(1).add(2).add(3);
console.log(Obj.a); //6
return this 是链式调用的核心
多个方法的链式调用
function Dog(){
this.run= function(){
alert("The dog is running....");
return this;//返回当前对象 Dog
};
this.eat= function(){
alert("After running the dog is eatting....");
return this;//返回当前对象 Dog
};
this.sleep= function(){
alert("After eatting the dog is running....");
return this;//返回当前对象 Dog
};
}
//一般的调用方式;
/* var dog1 =new Dog();
dog1.run();
dog1.eat();
dog1.sleep();*/
var dog2 = new Dog();
dog2.run().eat().sleep();