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

標籤：css   this   reg   art   第一個   his   對象   添加   span   

          通過上一節物件導向和原型的學習。

我們知道了怎樣建立一個類，包含類的私人化屬性和方法、公有化屬性和方法、靜態屬性和方法。在這裡略微回想一下。首先要建立一個類能夠通過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);}};

          這是第一個類庫的雛形，還沒有進行最佳化。待日後學習後進行最佳化。其它的類庫將在這個基本庫的基礎上進行拓展。以添加其功能。

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