javascript基础： 封装-Base库

base.js

一、

//为了避免在前台 new 一个对象,我们可以在库里面直接 new。
var $ = function  (){
	//在前台直接调用$()方法即可返回一个base对象，利用这个base对象就可以调用Base库里封装的方法
	//alert();
	return new Base();
};



/*************************************** ---构造函数--- ***************************************/

//利用构造函数的方式来创建一个对象就可以给原型对象添加属性
function Base (){
	//把返回的节点对象保存到一个Base对象的属性数组里
	//当需要使用这个返回的节点对象时就去数组里获取
	this.elements = [];

	//以下是获取节点和节点集合的的三个方法
	//并将节点对象放到数组里
	this.getId = function(id){
		this.elements.push(document.getElementById(id)) ;
		return this;//返回this对象（this这里是Base）目的是实现连缀的调用
	};

	this.getName = function(name){
		var names = document.getElementsByName(name);
		for(var i = 0;i<names.length;i++){
			this.elements.push(names[i]);
		}
		return this;
	};

	this.getTagName = function(tagName){
		var tags = document.getElementsByTagName(tagName);
		for(var i = 0;i<tags.length; i++){
			this.elements.push(tags[i]);
		}
		return this;
	};
}




/*************************************** ---Prototype--- ***************************************/

//通过原型增加额外的方法
//这些方法最后都返回this对象，目的是实现连缀；

//1.给得到的每个节点对象添加点击事件
Base.prototype.click = function(fn){
	//给获得的每个节点对象都添加点击事件
	for(var i = 0;i<this.elements.length;i++){
		var obj = this.elements[i];
		obj.addEventListener('click',fn);//现代点击事件，后期可做兼容的优化
	}
	return this;
};



//2.获取节点的innerHTML内容 || 设置节点的innerHTML属性
Base.prototype.html = function(str){
	for(var i = 0;i<this.elements.length;i++){
		var obj = this.elements[i];
		//根据str的长度来决定是获取||设置
		if(str.length == 0) {//长度为0就是获取
			return obj.innerHTML;//获取只能放在最后不能实现连缀
		}
		else{//长度不为0就是设置
			obj.innerHTML = str;
		}
	}
	return this;
};


//3.设置节点的css属性
Base.prototype.css = function(attr,value){
	for(var i = 0;i<this.elements.length;i++){
		var obj = this.elements[i];
		//根据参数的个数来判断是获取||设置
		if(arguments.length == 1){//传入一个参数就是获取
			//考虑到行内、style、link 所以要获取计算样式
			//W3C
			if(typeof window.getComputedStyle !='undefine'){
				return window.getComputedStyle(obj, null)[attr];
			}
			//IE
			if(typeof obj.currentStyle != 'undefine'){
				return obj.currentStyle[attr];
			}
		}
		else if(arguments.length == 2){//传入两个参数就是设置
			obj.style[attr] = value;
		}
	}
	return this;
};


//4.获取className节点 || 某个节点下的ClassName节点。
Base.prototype.getClassName = function(className,idName){
	//var all = document.getElementsByTagName('*');//得到所有的节点
	//if(arguments.length == 1){
	//	for(var i = 0;i<all.length;i++){//在所有节点中筛选
	//		var obj = all[i];
	//		if(obj.className == className){
	//			this.elements.push(obj);
	//		}
	//	}
	//}
    //
	//if(arguments.length == 2){
	//	var node = document.getElementById(idName);
	//	var nodesById = node.getElementsByTagNameNS('*');
	//	for(var j = 0;j<nodesById.length;j++){//在所有节点中筛选
	//		var objId = nodesById[i];
	//		if(objId.className == className){
	//			this.elements.push(objId);
	//		}
	//	}
	//}

	var node = null;
	if(arguments.length == 1){
		node = document;
	}
	else if(arguments.length == 2){
		node = document.getElementById(idName);
	}
	var all = node.getElementsByTagName('*');
	for(var i = 0; i<all.length; i++){
		var obj = all[i];
		if(obj.className = className){
			this.elements.push(obj);
		}
	}
	return this;
};

//5.获取节点数组的某一个
Base.prototype.getElement = function (num) {
	var element = this.elements[num];
	this.elements = []; //清空数组
	this.elements[0] = element;
return this;
};

二、

//6.给节点添加class
Base.prototype.addClass = function(className){
	var objs = this.elements;
	var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');//创建一个正则表达式对象
	for(var i = 0;i<objs.length;i++){
		var obj = objs[i];
		//查看className是否存在
		var bl = obj.className.match(reg);//匹配正则表达式
		if(!bl){
			obj.className += ' ' + className;
		}
	}
	return this;
};

//7.给节点移除class
Base.prototype.removeClass = function(className){
	var objs = this.elements;
	var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');//创建一个正则表达式对象
	for(var i = 0;i<objs.length;i++){
		var obj = objs[i];
		if (obj.className.match(reg)) {
			obj.className = obj.className.replace(reg , ' ');//替换正则表达式
		}
	}
	return this;
};

//8.添加link或style的css规则
Base.prototype.addRule = function(num,selectorText,cssText,position){
	var sheets = document.styleSheets;//得到sheet集合
	var sheet = sheets[num];//得到具体的sheet对象
	//W3C
	if(sheet.insertRule instanceof Function){
		sheet.insertRule(selectorText +'{' + cssText + '}',position);
	}
	//IE
	if(sheet.addRule instanceof Function){
		sheet.addRule(selectorText,cssText.position);
	}
	//PS:
	return this;
};

//9.移除link或style的css规则
Base.prototype.removeRule = function(num,position){
	var sheets = document.styleSheets;
	var sheet = sheets[num];
	//W3C
	if(sheet.deleteRule instanceof Function){
		sheet.deleteRule(position);
	}
	//IE
	if(sheet.removeRule instanceof  Function){
		sheet.removeRule(position);
	}
	return this;
};
//PS:在 Web 应用中,很少用到添加 CSS 规则和移除 CSS 规则,一般只用行内和 Class; 
//因为添加和删除原本的规则会破坏整个 CSS 的结构,所以使用需要非常小心。