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 = 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为cssFloatfunction 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);}};

          这是第一个类库的雏形，还没有进行优化。待日后学习后进行优化。其他的类库将在这个基本库的基础上进行拓展，以增加其功能。