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

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 = 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類庫，問要怎做？

推薦2本書
第一本 javascript進階程式設計 (講了物件導向的指令碼，有基礎看了會豁然開朗的。)
第二本 JavaScript DOM 進階程式設計 （講了javascript本質，教你如果實現自己的指令碼庫，難度較高，比較深入，能看明白，你會欣喜若狂。）
2本都是圖靈的書籍，翻譯都很不錯

你要學做類庫直接看第2本（前提如果你基礎好的話）
絕對讓你能自己學會做類庫
首先要用到 "名稱空間"的知識 ，還要用到prototype屬性等等。。。。具體的說也說不清楚，等你把第2本看完了，就會明白類庫的原理了。
 
怎建立自己的java類庫以及調用

假設你有一個類
class a{
int id=0;
}
cmd下 javac a.java
把a類編譯成a.class
然後把a.class 放在名字為abc的檔案夾下
之後cmd下 jar abc 把檔案夾打包成abc.jar
使用的時候
在類的上面用import abc.a;來調用