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

原创 2015年07月08日 10:18:23

一、总体概述

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>段落</p>
<p>段落</p>
<p>段落</p>

作为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这个基础对象的原型上添加方法。


三、总结

实现连缀可以帮助我们节省很多的时间,刚开始的时候,觉得挺新的,偶然想到了with...end with语句,突然一下子就觉得亲切了很多很多。所以将知识联系起来,找到共鸣,就可以让自己轻松很多很多。


版权声明:每天进步一点点——我也只是写着玩儿——随便转随便评 举报

相关文章推荐

JavaScript知识总结—cookie及其应用

一、cookie基本介绍     cookie是document的对象。cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据。cookie还...

【Web前端】慕课网—JavaScript进阶篇10-1编程挑战

前言慕课网链接 任务大体上已经实现了,切换内容那部分还可以优化一下,本人对于节点方面还很模糊,由于困了……还有强迫症,目前先这样写着,实现效果的说。如果有对于这部分有好的建议或者意见,欢迎留言,谢谢大...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

LeetCode1—10 JavaScript解法

leetcode1——10 javascript 解法

iOS杂谈10—如何为iTunes Connect准备应用

如何申请合同 如果你打算在iTunes上出售应用,那么你需要申请一份与Apple的双方合同。如下图: 点进去之后就是申请合同的页面,你可以申请iOS...

iOS开发UI高级—10使用picker View控件完成一个简单的选餐应用

iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一、实现效果   说明:点击随机按钮,能够自动选取,下...

iOS 基础篇10—ios应用数据存储方式(偏好设置)

一、简单介绍很多iOS应用都支持偏好设置,比如保存用户名、密码、字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能每个应用都有个NSUserDefaults实例,通过它来存取偏好设...

初试web APP开发—JavaScript和QT对象交互应用程序开发

项目背景: 这个项目是公司的一个项目,当时,公司想开发一个APP在POS机上跑,实现点击这个APP弹出一个网页(网页界面采用html5编写),点击网页上的按钮可以发出指令到QT层,由QT层调用相关的N...

STM32F10x—DMA总结

各个寄存器作用 1)      DMA_CPARx或DMA_CMARx寄存器指定外设基地址或存储器单元 2)      执行一次DMA_CNDTRx寄存器的递减操作,该寄存器包...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)