首页 > 代码库 > JavaScript-创建第一个自己的类库

JavaScript-创建第一个自己的类库

          通过上一节面向对象和原型的学习。我们知道了如何创建一个类,包括类的私有化属性和方法、公有化属性和方法、静态属性和方法。在这里稍微回顾一下。首先要创建一个类可以通过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 = http://www.mamicode.com/str;>          这是第一个类库的雏形,还没有进行优化。待日后学习后进行优化。其他的类库将在这个基本库的基础上进行拓展,以增加其功能。

JavaScript-创建第一个自己的类库