首页 > 代码库 > 简述jQuery的链式操作
简述jQuery的链式操作
首先,两个问题:
JQuery的链式操作是如何实现的?
为什么要用链式操作?
怎样使用链式操作?
原理百度上面一大把,我也不能很好的解释,不过它的用法很简单:
关键就在于对象里的方法有:return this。这就是说调用了方法之后把对象给返回了回来,不就可以继续调用方法了吗?所以链式操作就这样实现了。举个栗子:
//定义一个类
function Obj(){}
//扩展它的原型
Obj.prototype = {
setName:function(name){
this.name = name;
return this;
},
getName:function(){
return this.name
}
}
//实例化一个类
var obj = new Obj();
//实现链式调用
obj.setName(‘cjl‘).getName();
为什么要用链式调用?
为了节省代码量,让代码更优雅。如果没有链式,下面的代码可能出现更多:
$(‘element‘).dosomething();
$(‘element‘).dootherthing();
这就调用的两次选择器来获取节点元素,对浏览器消耗比较大,而且也写了两行代码。
JQuery专注于DOM对象操作,DOM操作会在页面上体现,在设计的时候,我们需要考虑链式带来的好处和坏处,因为别人用了链式,所以就用链式,可能并不是一个很好的方案。
以上只是我的很浅显的认识,我讲的方法是对象链的链式调用,还有一种是函数链的调用,有一点不一样的地方,JQuery的调用方式为对象链。对象链有个缺点是唯一地绑定了一个对象(Obj)!