從javascript語(yǔ)言本身談項(xiàng)目實(shí)戰(zhàn)
[b]從javascript語(yǔ)言本身談項(xiàng)目實(shí)戰(zhàn)[/b]
dulao5 [url=http://dulao5.blog.hexun.com/2156811_d.html][color=blue]blog原文[/color][/url]
TrackBack Ping URL： [url=http://dulao5.blog.hexun.com/trackback.aspx?articleid=2156811][color=#000000]
http://dulao5.blog.hexun.com/trackback.aspx?articleid=2156811[/color][/url]
隨著ajax的升溫，javascript越來(lái)越得到人們的重視。重要的是，ajax在一定程度上帶來(lái)了web軟件架構(gòu)上的變化，人們把越來(lái)越多的功能分配到客戶(hù)端實(shí)現(xiàn)，javascript子項(xiàng)目規(guī)模越來(lái)越大。如何更高效的使用javascript，如何更科學(xué)的組織javascript，如何更順利的保證項(xiàng)目進(jìn)展？我想就我的經(jīng)驗(yàn)談一點(diǎn)淺見(jiàn)。
[b]一。 開(kāi)發(fā)人員需要認(rèn)真學(xué)習(xí)javascript語(yǔ)言本身[/b]
由于javascript是世界上最被誤解的語(yǔ)言, 大部分人對(duì)javascript語(yǔ)法并沒(méi)有全面了解過(guò)，只是憑借看起來(lái)很像c或者java的關(guān)鍵字按照自己的理解寫(xiě)javascript代碼。其實(shí) javascript是一種很獨(dú)特的語(yǔ)言，和c++/java有非常大的區(qū)別，要想用javascript做大一些的項(xiàng)目，開(kāi)發(fā)人員必須老老實(shí)實(shí)的學(xué)習(xí) javascript的語(yǔ)法。真正掌握了語(yǔ)法后，我們才不會(huì)把delete看成釋放內(nèi)存對(duì)象，才不會(huì)為到底參數(shù)傳遞是值傳遞還是引用傳遞而煩惱。真正理解了javascript的基于原型的OO方式，才可能寫(xiě)出具有良好架構(gòu)的javascript程序。
[color=Green]《javascript權(quán)威指南》[/color]是一本最合適的書(shū)，鄭重推薦。另外[url=http://www.ecma-international.org/publications/standards/Ecma-262.htm][color=Green]ECMA262[/color][/url] 文檔可以作為參考。網(wǎng)上流行的jscript手冊(cè)chm版本使用起來(lái)比較方便，不過(guò)這是微軟的jscript實(shí)現(xiàn)，和標(biāo)準(zhǔn)的javascript略有區(qū)別，使用時(shí)應(yīng)該注意上面的注腳信息。關(guān)于javascript的原型和OO,網(wǎng)上已經(jīng)有很多文章介紹了，在此不再多說(shuō)。
[b]二。 良好的代碼來(lái)源于良好的設(shè)計(jì)[/b]
只有設(shè)計(jì)優(yōu)良，代碼才會(huì)寫(xiě)的漂亮。現(xiàn)在的javascript子項(xiàng)目已經(jīng)不是以前web項(xiàng)目中的“邊角料”和散兵游勇了，在較大的ajax項(xiàng)目?jī)?nèi)， javascript將非常復(fù)雜，ajax的異步模型也和以前順序執(zhí)行的程序設(shè)計(jì)有所區(qū)別。所以建議做javascript前首先做好設(shè)計(jì)。推薦使用用例驅(qū)動(dòng)的方式，把用例分析清楚，以便全局考慮所有可能的頁(yè)面交互過(guò)程，繪出頁(yè)面內(nèi)一些對(duì)象之間的交互圖，分析一些數(shù)據(jù)對(duì)象的狀態(tài)，作出精細(xì)的 javascript設(shè)計(jì)。
[b]三。 使用設(shè)計(jì)模式，復(fù)用其他領(lǐng)域的設(shè)計(jì)經(jīng)驗(yàn)[/b]
如果javascript非常復(fù)雜，可以考慮使用一些模式。我想大部分做javascript的開(kāi)發(fā)者都不是“javascript科班”出身吧[img]掌握了javascript的語(yǔ)言本質(zhì)，就可以復(fù)用我們?cè)谄渌I(lǐng)域的經(jīng)驗(yàn)了。使用javascript框架或者ajax框架，使用單例模式做一個(gè)全局的數(shù)據(jù)緩沖池，或者使用觀察者模式把界面對(duì)象和數(shù)據(jù)對(duì)象分離，使用命令模式實(shí)現(xiàn)用戶(hù)的操作隊(duì)列等等。
[b]四。 調(diào)試代碼的技巧[/b]
javascript的代碼不太好調(diào)試，這是由于：
[b]* 一般的開(kāi)發(fā)人員對(duì)javascript語(yǔ)言本身不太精通[/b]。也就是上面提到的。
[b]* web項(xiàng)目包含較多的因素[/b]，復(fù)雜性加劇。服務(wù)端腳本、模板、html、js等很多環(huán)節(jié)都可能增加調(diào)試難度。
[b]* 瀏覽器存在兼容性問(wèn)題[/b]。有可能在一個(gè)細(xì)節(jié)問(wèn)題上IE、Mozilla、opera等瀏覽器都有差異。
[b]* 工具的缺乏[/b]。雖然mozilla的jsdebugger非常好用（還有bug，比如eval時(shí)調(diào)試器有些問(wèn)題），但是其他瀏覽器環(huán)境下調(diào)試工具就不怎么樣了。ms系統(tǒng)自帶的script debug工具調(diào)試本地代碼還可以，直接調(diào)試網(wǎng)站js代碼表現(xiàn)欠佳。opera除了javascript控制臺(tái)外我沒(méi)有找到其他調(diào)試工具。
在此我推薦幾個(gè)調(diào)試技巧：
[b]1. 使用Mozilla firefox的jsdebugger插件。[/b]這個(gè)我不再多說(shuō)了，最經(jīng)典的js調(diào)試工具。在線調(diào)試遠(yuǎn)程站點(diǎn)的javascript效果非常棒。
[b]2. 把問(wèn)題隔離，建立本地的html文件和js文件，使用ms script debug調(diào)試工具來(lái)調(diào)試。[/b]如果js模塊比較獨(dú)立，可以使用這個(gè)工具的。如果寫(xiě)hta的項(xiàng)目，這個(gè)工具當(dāng)然是首選了。
[b]3. httpWatch[/b] 這是一個(gè)ie下的插件，非常好用，能夠監(jiān)視ie中的任何http會(huì)話(huà)，并能夠看到http會(huì)話(huà)的原文。可以通過(guò)這個(gè)工具了解你的程序有沒(méi)有和服務(wù)器產(chǎn)生會(huì)話(huà)，參數(shù)＆返回的數(shù)據(jù)到底是什么。
[b]4. 在網(wǎng)頁(yè)內(nèi)建立用于調(diào)試的textarea[/b]
可以在網(wǎng)頁(yè)內(nèi)建立一個(gè)textarea來(lái)接受你想運(yùn)行的js語(yǔ)句，然后加一個(gè)按鈕使用js的eval函數(shù)執(zhí)行你輸入的代碼。
這種方式非常適合在線調(diào)試，網(wǎng)頁(yè)出錯(cuò)后寫(xiě)代碼輸出頁(yè)面內(nèi)的對(duì)象值。建議寫(xiě)一些dump工具函數(shù)配合使用，效果更佳。
我非常喜歡這種方式，可以隨時(shí)使用開(kāi)關(guān)打開(kāi)頁(yè)面內(nèi)隱藏的textarea進(jìn)行調(diào)試，感覺(jué)很像給一臺(tái)服務(wù)器接上了終端，然后使用shell可以做任何事情 函數(shù)可以在這里重新定義，可以任意操作界面中的任何元素，調(diào)用任何對(duì)象的任何函數(shù)，輸出任何你需要的運(yùn)行時(shí)刻值。
[b]5. 使用異常(exception)和斷言(assert)[/b]
使用try{}catch(e){}結(jié)構(gòu)不光可以屏蔽出錯(cuò)信息，讓界面更友好。我們的程序可以使用異常、拋出異常來(lái)構(gòu)建一種更好的出錯(cuò)處理機(jī)制。
有這樣一個(gè)故事，我在使用string.localeCompare函數(shù)時(shí)隨手寫(xiě)了這樣的代碼：
var iRe = str1.localeCompare(str2);
switch(iRe){
0: return ....
1: return ....
-1:return ....
defalut:throw "error:localeCompare return other value"
}
寫(xiě)完就忘了，沒(méi)想到我的同事在linux下使用firefox時(shí)，異常被拋出了，然后我們得知：linux firefox下localeCompare返回的不只是0/1/-1,而是返回一個(gè)具體值.
這個(gè)異常拋出有效的檢測(cè)出了代碼的不完美。
firefox下的異常dump后能得到較為詳細(xì)的調(diào)用棧信息，這一點(diǎn)非常好。IE的異常信息沒(méi)有這么詳細(xì)。
異常和斷言也可以結(jié)合成為一個(gè)非常有效的調(diào)試工具。
斷言(assert)是在其他語(yǔ)言中的一種很有效的調(diào)試工具，常常以這種形式出現(xiàn)：
assert( ) ;
在程序處于debug狀態(tài)，當(dāng)條件為假時(shí)，系統(tǒng)中止運(yùn)行并報(bào)告這個(gè)斷言。由于斷言是我們自己定義的，所以我們可以很容易的判斷出出錯(cuò)的地方，進(jìn)而找到bug所在。
javascript語(yǔ)言沒(méi)有提供宏，也沒(méi)有提供assert，我們可以這樣模擬
if(_is_debug) assert = function(expression , strLable){
if( !expression ) throw Error(strLable);
}
else assert = function(){};//_is_debug是一個(gè)全局變量
這樣可以實(shí)現(xiàn)在發(fā)生"不可能的事情"的時(shí)候，讓程序在調(diào)試模式下拋出異常，在發(fā)布版本中不作理會(huì)。
可以這樣輸出當(dāng)前棧的調(diào)用信息,彌補(bǔ)剛才提到的IE中異常對(duì)象沒(méi)有棧信息的缺陷:
function callStackInfo(){
var s="",line="";
var cer=arguments.callee.caller;
while(cer){
var sf=cer.toString();
s+=line+sf.substring(sf.indexOf('function'),sf.indexOf('{'))+"\n";
line=".."+line;
cer=cer.caller;
}
return s;
}
本文只就javascript在web開(kāi)發(fā)，特別是在ajax方面的開(kāi)發(fā)做了一些討論，主要在于管窺如何更好的使用“純javascript”。web開(kāi)發(fā)還有很多其他方面，比如xml和Dom等實(shí)際上和javascript息息相關(guān)，但是本文沒(méi)有涉及，還請(qǐng)見(jiàn)諒。歡迎各位朋友就我的討論多提意見(jiàn)。
posted on 2007-12-09 15:20
xyz 閱讀(302)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
網(wǎng)絡(luò)文摘