首页 > 代码库 > 简述jQuery的链式操作

简述jQuery的链式操作

首先,两个问题:

  1. JQuery的链式操作是如何实现的?

  2. 为什么要用链式操作?

怎样使用链式操作?

      原理百度上面一大把,我也不能很好的解释,不过它的用法很简单:

关键就在于对象里的方法有: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)!