【JavaScript 10—应用总结】：连缀

本文主要是介绍【JavaScript 10—应用总结】：连缀，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、总体概述

1.1，什么叫连缀

所谓连缀，最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作。比如：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;"></pre><pre name="code" class="javascript">$().getTagName("p").css("color","green").html("标题").click(function(){alert("a");}).css("backgroundColor","pink");</span></span>

说明：在这里，我们设置了节点的CSS属性，HTML标题，还有它的点击事件，这就是一个连缀的实例。

1.2，连缀的好处

快速方便的设置节点的操作。

1.3，个人理解

一说到连缀，作为我个人，我想到了以前用过的with...end with语句。比如说，我们在设置一个label标签的多个属性时，就可以使用这个语句，然后就不用每次声明属性设置的对象。在我理解，JS中所实现的连缀，与其有着异曲同工之妙。如果不实现连缀，作为上面代码中的效果，应该怎么实现呢？大概是这样的：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">$().getTagName("p").css("color","green");$().getTagName("P").html("标题");$().getTagName("p").css("backgroundColor","pink"); $().getTagName("p").click(function(){alert("a");})</span></span>

虽然，都能实现想要的效果，但并不方便。就好像是别人问我们一个问题：她是一个什么样的人，用连缀的效果回答就是：她是一个又聪明、又漂亮、又富有的姑娘。如果不使用连缀的效果就是：她是一个聪明的姑娘；她是一个漂亮的姑娘；她是一个富有的姑娘。所以，由此可见，使用连缀，可以让我们更为快速、更为丰富的描述一个对象。

二、实现连缀

2.1，逻辑分析

首先作为获取到的节点是没有CSS方法，也没有单击事件的。那么要实现这些，我们需要将返回来的节点（每次返回的东西）作为一个基础对象，然后，在基础对象上添加我们需要的方法。

2.2，处理流程

首先，为了输入的快捷和便利，首先将基础对象Base设置为$符：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var $=function(){return new Base();
};</span></span>

然后，获取元素的节点（需要操作的节点，如body、div等）：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">function Base(){//创建一个数组，来保存获取的节点和节点数组this.elements=[];//获取ID节点this.getId=function(id){this.elements.push(document.getElementById(id));return this;};//获取元素节点this.getTagName=function(tag){var tags=document.getElementsByTagName(tag);for(var i=0;i<tags.length;i++){this.elements.push(tags[i]);};return this;};
}
</span></span>

说明：1，如果我们不创建一个数组来保存获取到的元素节点，那么我们就不能返回Base则个基础对象，从而添加方法实现连缀。而获取到的返回值是一个div对象。

2，在获取元素节点时，使用了循环，而不是像获取ID节点一样的处理。我们都知道ID作为唯一标识符是唯一的，但是元素节点就有很多，比如：

段落
段落
段落

作为p的元素节点就有三个，如果像ID节点一样的处理，那么我们将只能设置第一个p元素节点。

最后，添加基础对象方法，实现连缀：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">Base.prototype.css=function(attr,value){for(var i=0;i<this.elements.length;i++){this.elements[i].style[attr]=value;};return this;
}Base.prototype.html=function(str){for(var i=0;i<this.elements.length;i++){this.elements[i].innerHTML=str;};return this;
};Base.prototype.click=function(fn){for(var i=0;i<this.elements.length;i++){this.elements[i].onclick=fn;};return this;
};
</span></span>

注意：为了区分节点获取和实现连缀所添加的方法，将节点的获取和方法分开。这时需要在Base这个基础对象的原型上添加方法。