通過上一節面向對象和原型的學習。

我們知道了怎樣創建一個類，包含類的私有化屬性和方法、公有化屬性和方法、靜態屬性和方法。在這裏略微回想一下。首先要創建一個類能夠通過1.new object()。2.利用構造函數function Person(){}，然後通過new Person()。另一種是通過字面量的方式創建一個對象，通過字面量的方式不能使用new運算符，由於他是在內部自己new object()。

在這裏我們要對類和對象有一定的區分，形象的來說，假設動物是一個類的話。人能夠是當中一個對象。就上面的var person = new Person();這裏的Person就是一個類。而person則是他的一個實例化對象，並且能夠有非常多派生的類，比方Man.prototype = new Person(); var man = new Man();那麽這個man也是一個實例化對象。簡單的說，類是虛的，而對象是實體的。了解了對象和類的差別之後。我們簡單看下怎樣創建類的私有化。公有化以及靜態屬性和方法。

面向對象的知識

var a = function(){
     var private1 = ‘private1‘;               //私有字段
     this.public1 = ‘public1‘;               //共同擁有字段，實例字段
     var privateMethod1 = function(){     //私有方法
          alert(‘privateMethod1‘);
     }
     this.publicMethod1 = function(obj){     //公共方法。實例方法
          private1 = obj;
     }
     this.publicMethod2 = function(){     //公共方法
          return private1;
     }
}
a.filed1 = ‘filed1‘;                         //公共靜態字段
var b1 = new a();
var b2 = new a();
b1.publicMethod1(‘ss‘);
console.log(b1.publicMethod2());
console.log(b2.publicMethod2());

****************************************************

var a = (function(){
     //console.log(this);                                   //window對象
     var private1 = ‘private1‘;                              //這個是私有靜態屬性
     this.public1 = ‘public1‘;
     return function(){
          //console.log(this);                              //object對象
          this.publicMethod1 = function(obj){
               private1 = obj;    
          }
          this.publicMethod2 = function(){
               //console.log(this);                         //返回的對象的實例
               return private1;
          }
     }    
})();

var b1 = new a();
var b2 = new a();
b1.publicMethod1(‘s‘);
console.log(b1.publicMethod2());
console.log(b2.publicMethod2());

第一個類庫base.js

了解了主要的面向對象和原型後。我們來封裝我們第一個類庫。

這個類有下面功能：能夠通過id,class,tagname獲取元素，實現連綴功能，設置css，獲取文本等主要的功能：

var $ = function(){
	return new Base();	
}

var Base = function(){
	this.elements = [];		//代表元素集合
}

//利用Id獲取元素
Base.prototype.fId = function(id){
	this.elements.push(document.getElementById(id));
	return this;
}

//利用tagName獲取元素
Base.prototype.fTag = function(tag){
	var eles = document.getElementsByTagName(tag);
	for(var i = 0,len = eles.length; i < len; i++){
		this.elements.push(eles[i]);
	}
	return this;
};

//利用className獲取元素
Base.prototype.fClass = function(className){
	var eles = document.getElementsByClassName(className);
	for(var i = 0,len = eles.length; i < len; i++){
		this.elements.push(eles[i]);
	}
	return this;
};

//文本值
Base.prototype.fText = function(str){
	var texts = [];
	//獲取innerHTML的值
	function getInnerHTML(i,that){
		texts.push(that.elements[i].innerHTML);
	};
	//設置innerHTML的值
	function setInnerHTML(i,that,str){
		that.elements[i].innerHTML = str;
	};
	//獲取nodeValue的值
	function getNodeValue(i,that){
		texts.push(that.elements[i].firstChild.nodeValue);
	};
	//設置nodeValue的值
	function setNodeValue(i,that,str){
		that.elements[i].firstChild.nodeValue = str;
	};
	if(arguments.length === 0){
		typeof this.elements[0].innerHTML != "undefined"?lenFor(getInnerHTML,this):lenFor(getNodeValue,this);
		return texts;
	}else if(arguments.length === 1){
		typeof this.elements[0].innerHTML != "undefined"?lenFor(setInnerHTML,this,str):lenFor(setNodeValue,this,str);
		return this;
	}
};
/*
if(arguments.length === 0){					//假設不輸入參數則覺得是獲取文本值
	if(typeof this.elements[0].innerHTML != "undefined"){
		var getInnerHTML = function(){
			texts.push(this.elements[i].innerHTML);
		}
	}else{
		for(var i = 0,len = this.elements.length; i < len; i++){
			texts.push(this.elements[i].firstChild.nodeValue);
		}
	}
	return texts;
}else if(arguments.length === 1){			//假設輸入參數則覺得是設置文本值
	if(typeof this.elements[0].innerHTML != "undefined"){
		for(var i = 0,len = this.elements.length; i < len; i++){
			this.elements[i].innerHTML = str;
		}
	}else{
		for(var i = 0,len = this.elements.length; i < len; i++){
			this.elements[i].firstChild.nodeValue = str;
		}
	}
	return this;
}
*/

//設置和獲取CSS值
Base.prototype.fCss = function(cssName,cssValue){
	var cssStrs = [];
	//獲取getComputedStyle的值
	function getFFStyle(i,that,cssName){
		var style = window.getComputedStyle(that.elements[i]);
		cssStrs.push(style[cssName]);
	};
	//獲取currentStyle的值
	function getIEStyle(i,that,cssName){
		var style = that.elements[i].currentStyle;
		cssStrs.push(style[cssName]);
	};
	//設置css的值,當中float為保留字，IE為styleFloat,FF為cssFloat
	function setCss(i,that,cssName,cssValue){
		that.elements[i].style[cssName] = cssValue;
	};
	if(arguments.length === 1){
		typeof window.getComputedStyle != "undefined"?
 
lenFor(getFFStyle,this,cssName):lenFor(getIEStyle,this,cssName);
		return cssStrs;
	}else if(arguments.length === 2){		//設置CSS的值
		lenFor(setCss,this,cssName,cssValue);
		return this;
	}
};

//加入css類選擇器
Base.prototype.addCssClass = function(className){
	//獲取elements的class值
	function add(i,that,className){
		var name = that.elements[i].className;
		var partern = new RegExp("(^|\\s)" + className + "($|\\s)","g");
		if(!partern.test(name)){
			name += " " +className;
		}
		that.elements[i].className = name;
	};
	lenFor(add,this,className);
	return this;
};

//刪除css類選擇器
Base.prototype.removeCssClass = function(className){
	//刪除elements的class值
	function remove(i,that,className){
		var name = that.elements[i].className;
		var partern = new RegExp("(^|\\s)" + className + "($|\\s)","g");
		that.elements[i].className = name.replace(partern,"");
	};
	lenFor(remove,this,className);
	return this;
};











//對elements進行循環，並運行fn函數
function lenFor(fn,that,str,str1){
	for(var i = 0,len = that.elements.length; i < len; i++){
		fn(i,that,str,str1);
	}
};

JavaScript-創建第一個自己的類庫