JavaScript就是所謂的客戶端腳本語言，是一種在互聯(lián)網(wǎng)瀏覽器（瀏覽器也稱為Web客戶端，因?yàn)樗B接到Web服務(wù)器上，以下載頁面）內(nèi)部運(yùn)行的計(jì)算機(jī)編程語言。JavaScript的工作方式很有趣。普通網(wǎng)頁內(nèi)都會(huì)插入一些JavaScript代碼。當(dāng)瀏覽器加載該頁面時(shí)，瀏覽器的內(nèi)置解釋器將讀取并運(yùn)行它在該頁面中找到的JavaScript代碼。

做Web開發(fā)已經(jīng)四年，或多或少積累了一些JavaScript腳本。比如，限制input只允許輸入數(shù)字的腳本；敲回車自動(dòng)轉(zhuǎn)到下一個(gè)控件，相當(dāng)于Tab鍵的作用一樣；因?yàn)镴avaScript數(shù)值運(yùn)算的結(jié)果常常不是我們想要的，還得有浮點(diǎn)數(shù)運(yùn)算（加減乘除）函數(shù)。每次有JavaScript需求時(shí)，常常是在網(wǎng)上找需要的腳本，直接拷貝到aspx文件中，或者新建JavaScript文件，然后添加引用
<script src="JScript.js" type="text/javascript"></script> ，以這種方式來完成客戶端腳本的制作。畢竟對(duì)JavaScript的需求不多，也就沒有花很大的力氣去學(xué)。

最近公司的項(xiàng)目不忙，空閑的時(shí)間趕忙補(bǔ)習(xí)一下腳本的知識(shí)。網(wǎng)上有很流行的JQuery腳本庫，在園子里也有大量的文章討論怎么去用。以我親身體會(huì)，JavaScript和正則表達(dá)式一樣，常學(xué)常忘。學(xué)過的知識(shí)不用，很快就會(huì)忘記。特別是和應(yīng)用相關(guān)的內(nèi)容，比如PageMethods怎么用，客戶短回調(diào)如何實(shí)現(xiàn)，如何用JavaScript調(diào)用Web服務(wù)，在項(xiàng)目中用過多次，但是一被同事問起來，還是模模糊糊的，很難說出個(gè)所以然來。我有一個(gè)辦法是制作demo，把各種效果的demo做好，分門別類的放在一起，然后用的時(shí)候去搜索，這樣可以節(jié)省很多時(shí)間。另外一種辦法就是今天這篇文章提到的，把做過的JavaScript整理一下，制作成比較通用的腳本庫，方便復(fù)用。整理的含義是，對(duì)函數(shù)進(jìn)行適當(dāng)?shù)恼{(diào)整，讓它能不僅能滿足當(dāng)前項(xiàng)目的需求，還要能滿足未來項(xiàng)目的需求，另一個(gè)含義是要規(guī)范命名和組織結(jié)構(gòu)，寫好樣例代碼，用起來的時(shí)候方便。有時(shí)候在網(wǎng)上下載了很多JavaScript實(shí)用腳本，但是忘記下載它的測試腳本，不知道怎么去用，還不如到網(wǎng)上重新搜索來得方便。

JavaScript被定義為一種基于對(duì)象的腳本語言，一方面它以DOM對(duì)象模型和DOM對(duì)象中的方法為基礎(chǔ)，另一方面，它又不具備面向?qū)ο笳Z言的繼承，多態(tài)的特性。ASP.NET AJAX對(duì)JavaScript進(jìn)行了擴(kuò)展，使我們可以以面向?qū)ο蟮姆绞絹斫M織JavaScript腳本。我這里的主要工作是封裝，把現(xiàn)有的代碼封裝起來，方便下次復(fù)用。于是，有兩種方法來組織現(xiàn)有的JavaScript代碼庫。
我以JavaScript中倍受爭議的浮點(diǎn)運(yùn)算中的加法和減法運(yùn)算為例子，看看如何把它們封裝起來

JavaScript風(fēng)格

function Math() { } 
//加法 
Math.prototype.Add=function(arg1,arg2){ 
var r1,r2,m; 
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (arg1*m+arg2*m)/m 
} 
//減法 
Math.prototype.Subtraction=function(arg1,arg2){ 
  var r1,r2,m,n; 
  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  n=(r1>=r2)?r1:r2; 
  return ((arg1*m-arg2*m)/m).toFixed(n); 
} 
調(diào)用方式 
var math=new Math(); 
var result=math.Add(2.0,4.0); 
AJAX風(fēng)格 
Type.registerNamespace(“Utility”); 
Utility.Math=function(larg,rarg) 
{ 
 this._left=larg; 
 this._right=rarg; 
} 
Utility.Math.prototype= 
{ 
//加法函數(shù) 
Add:function () 
{ 
var r1,r2,m; 
try{r1=left.toString().split(".")[1].length}catch(e){r1=0} 
try{r2=right.toString().split(".")[1].length}catch(e){r2=0} 
m=Math.pow(10,Math.max(r1,r2)) 
return (left*m+right*m)/m 
} 
//減法函數(shù) 
Subtraction: function(){ 
  var r1,r2,m,n; 
  try{r1=left.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=right.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  n=(r1>=r2)?r1:r2; 
  return ((left*m-right*m)/m).toFixed(n); 
} 
} 
//注冊(cè)類 
Utility.Math.registerClass(“Utility.Math”); 
然后，在需要的地方，就可以運(yùn)用下面的方法調(diào)用 
var math=new Utility.Math(2.0,4.2); 
var result=math.Add(); 

使用上面提出的兩種方法，可以方便封裝常用的JavaScript，減少重復(fù)。

上面的命名有個(gè)問題，因?yàn)镸ath是JavaScript內(nèi)置的一種類型，用于處理各種數(shù)學(xué)運(yùn)算，為了讓上面的JavaScript風(fēng)格的腳本運(yùn)行起來，還得把類名換成其它的名字，如MathHelper。ASP.NET AJAX還對(duì)JavaScript的六種類型進(jìn)行了擴(kuò)展，分別是Array,Boolean,Date,Error,Object和string.

方法有了，估計(jì)還有朋友會(huì)說，你應(yīng)該把自己做的JavaScript庫公布出來才行，這樣才能滿足大眾的口味。僅有這個(gè)方法，要實(shí)踐起來還是很困難的：有項(xiàng)目時(shí)間緊的理由，每天都忙著做項(xiàng)目，哪里有時(shí)間去整理這個(gè)，也有不熟悉JavaScript的理由。

為了讓我的類庫不至于很菜，我到網(wǎng)上找了些關(guān)于寫好JavaScript庫的建議。

有一篇文章的名字叫《Building a JavaScript Library》，本來寫這篇文章之前很想看看他是怎么寫的，可是網(wǎng)頁中一直提示正在加載文件，無法查看。很想知道老外對(duì)于同樣的主題，他是怎么寫的。

還有一篇文章也很精彩，名字是《Rules For JavaScript Library Authors》，地址在
http://dean.edwards.name/weblog/2007/03/rules/

我把它翻譯出來，供大家參考

1 使用方法不要過于繁瑣。
2 避免使用Object.prototype
3 不要做過度的擴(kuò)展
4  遵守標(biāo)準(zhǔn)。
5  向優(yōu)秀的JavaScript創(chuàng)作者看齊
6  保持靈活可變 7  管理好內(nèi)存，避免內(nèi)存泄露。
8  避免與瀏覽器相關(guān)的hack
9  保持類庫簡潔
10 讓類庫保持可預(yù)知。比如，雖然沒有查看文檔，也應(yīng)該能猜測到Math是處理和數(shù)學(xué)運(yùn)算相關(guān)的內(nèi)容
11 加分的規(guī)則:文檔；盡可能多的使用命名空間組織代碼，使之容易被記?。?/p>

我的水平很一般的，很普通的一個(gè)程序員。所以，不要向我要代碼。我給你了，你還要花時(shí)間去看；而且我的代碼沒有文檔，你讀不懂怎么辦呢。與其這樣，為何不把你自己手頭有的JavaScript 整理一下，況且你手里頭有的JavaScript ，被你實(shí)際用過，你對(duì)他肯定熟悉。也不要推薦JQuery，它不是我的目的。
我的目的是教你組織整理現(xiàn)有的JavaScript 腳本庫，把手頭已有資源用好就很不錯(cuò)了。

測試代碼下載: http://xiazai.jb51.net/201509/yuanma/Math-Test(jb51.net).rar

補(bǔ)充一個(gè)常見的問題：如果把JavaScript 放到外部文件中，運(yùn)行時(shí)可能會(huì)提示“找不到對(duì)象”
這個(gè)問題是由文件編碼導(dǎo)致的。要讓JavaScript 腳本文件的編碼和HTML頁面的文件編碼保持一致
點(diǎn)擊文件-->另存為選項(xiàng)，把兩者存儲(chǔ)為同樣的編碼格式

推薦用VS IDE編寫腳本，這樣可以使用IDE提供的智能提示支持

如果是用Dreamweaver編寫腳本，它也提供了智能提示

以上內(nèi)容給大家介紹了JavaScript腳本庫編寫的方法，希望大家喜歡。

最新評(píng)論