欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS封装库——CSS上实现方法

程序员文章站 2023-11-11 20:01:52
原生js封装库之css上 实现以下目标: 1 连缀:类似:$().getid('main').css('color','red'...

原生js封装库之css

实现以下目标:

1 连缀:类似:$().getid('main').css('color','red').html('标题');

步骤:

1? 因为要在原型里写方法,所以采用函数式对象,即构造函数。

2? 将获取节点的方法和设置或获取属性及其他所有的方法写在base对象里。调用时只需new出一个base对象。

3? 避免在前台new出对象,在基础库里写一个方法var $=function(){return new base()},前台调用函数就行了。

思路:要实现连缀功能,必须每个方法的返回值是base对象,才能继续连缀,例如获取节点后,返回base对象设置css属性;

$().getid('main').css('color','red');? getid:获取id节点的方法和css:设置css属性的方法都是base对象的方法。所以只有获取id节点后返回base对象才能继续调用里面的css方法,同样css方法的返回值也要是base对象。

原理:将获取到的节点或节点数组作为属性放在属性数组里,同时获取节点的和、方法的返回值是base可以继续调用里面的方法。$().getid('main')将id为main的节点对象存放在this.elements数组里作为base对象(即$())的属性;因为css()是base对象的方法,所以,getid()方法的返回值要写成base对象,在使用css()方法时就可使用存放的节点对象。

封装的库:base.js。 前台调用库demo.js。

base.js:

var $=function(){                     //这里写一个函数,调用时返回一个base对象                 
	return new base();
}
function base(){
	this.elements=[];                 //创建属性数组 保存获取的节点数组,实例(私有)属性不要在原型里添加
}
// 不能base.prototype.elements=[];比如设置了一个id为main的颜色;再设置id为其它的颜色会把main的颜色覆盖掉,因为在原型里添加属于共有
	// 获取id节点的方法
	base.prototype.getid=function(id){
		this.elements.push(document.getelementbyid(id));   //将节点存入数组中
		return this;                                       //返回base对象实现连缀
	}
	//获取name节点数组的方法
	base.prototype.getname=function(name){ 
		var name=document.getelementsbyname(name);
		for(var i=0;i

html:



<script type="text/javascript" src="demo.js"></script><script type="text/javascript" src="base.js"></script>

main

段落

;i++){>

前台调用库:demo.js:

测试1:获取:

window.onload=function(){
	console.log($().getid('main').css('color'));
	console.log($().gettagname('p').css('color'));
	console.log($().getname('button').css('color'))
}

图示:

原生JS封装库——CSS上实现方法

 

测试2:设置:

window.onload=function(){
	$().getid('main').css('color','blue');
	$().gettagname('p').css('color','blue');
	$().getname('button').css('color','blue')
}

图示:

原生JS封装库——CSS上实现方法

ps:如何写函数:

例如:设置css属性,先思考不用函数怎么设置,即:document.getelementbyid('main').style.color=red;

改成函数:设置两个参数,属性及属性值(attr,value)。互相对应:this.element[i].style.attr=value.适用于任何函数

;i++){>