如何系統(tǒng)地學(xué)習(xí)JavaScript
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在過(guò)去,JavaScript只是被用來(lái)做一些簡(jiǎn)單的網(wǎng)頁(yè)效果,比如表單驗(yàn)證、浮動(dòng)廣告等,所以那時(shí)候JavaScript并沒有受到重視。自從AJAX開始流行后,人們發(fā)現(xiàn)利用JavaScript可以給用戶帶來(lái)更好的體驗(yàn),甚至利用這一優(yōu)點(diǎn)開發(fā)了大型網(wǎng)頁(yè)游戲,于是這門小語(yǔ)言被重視了起來(lái)。現(xiàn)在,很多公司會(huì)招專門的JavaScript工程師,通常JavaScript是WEB前端開發(fā)的必備技能。簡(jiǎn)單介紹了JavaScriptr的好處,并不代表大家就會(huì)去學(xué)習(xí)甚至把它學(xué)好,興趣是很關(guān)鍵的,我認(rèn)為興趣是最好的老師,它是你專心做一件事并把它做好的動(dòng)力。另外,大家要相信小語(yǔ)言有大作為,我就曾用Greasemonkey寫過(guò)一些非常實(shí)用的工具,比如你可以用JavaScript+Greasemonkey寫在線網(wǎng)頁(yè)游戲的外掛程序。下面說(shuō)說(shuō)本人學(xué)習(xí)JavaScript的歷程和心得吧。 入門
使用DIV+CSS布局標(biāo)準(zhǔn)網(wǎng)頁(yè),可以使前端XHTML代碼更少、結(jié)構(gòu)更清晰,這有利于輕松用JavaScript操作DOM,比如,要展示一個(gè)3行3列的列表,如果用傳統(tǒng)的表格布局,現(xiàn)在要你用JavaScript動(dòng)態(tài)生成這個(gè)列表,那么就需要一個(gè)循環(huán)嵌套,如果采用li結(jié)構(gòu)加CSS浮動(dòng)布局,一次循環(huán)就好了。當(dāng)然,WEB標(biāo)準(zhǔn)化不是一定不能使用表格,我的意思是結(jié)構(gòu)清晰的XHTML更易于把JavaScript效果或功能整合到項(xiàng)目中。
作為一個(gè)開發(fā)人員,熟悉測(cè)試工具是必須的,這有助于提高你發(fā)現(xiàn)問題和解決問題的效率,對(duì)于特別大的項(xiàng)目更是如此。JavaScript和XHTML開發(fā)測(cè)試?yán)魑揖拖韧扑]兩個(gè)最常用的,它們是:Web Developer和Firebug。
這一要求聽起來(lái)似乎有點(diǎn)不太實(shí)際,我想這個(gè)要求對(duì)于像C#、JAVA這些大型語(yǔ)言來(lái)說(shuō)確實(shí)是,因?yàn)檫@些語(yǔ)言類庫(kù)實(shí)在太龐大了,相信沒有人可以全面記住它,而且也是沒有必要全部記住,比如用JAVA做網(wǎng)頁(yè)與手機(jī)開發(fā)所關(guān)注的類庫(kù)是不一樣的。而JavaScript則不是,它的內(nèi)置方法函數(shù)真的不多,先全面熟悉一下,開發(fā)起來(lái)也將得心應(yīng)手,比如,你一開始可能認(rèn)為JavaScript有trim()這個(gè)很多語(yǔ)言都有的去行頭行尾空格的方法,當(dāng)你了解JavaScript內(nèi)置函數(shù)庫(kù)后你會(huì)發(fā)現(xiàn)原來(lái)在JavaScript中這些方法是要自己去實(shí)現(xiàn)。再比如,如果你是從其它比較強(qiáng)大的語(yǔ)言轉(zhuǎn)過(guò)來(lái)玩JavaScript,你又可能認(rèn)為JavaScript應(yīng)該有MD5加密的方法,當(dāng)然這也是沒有的,但有人用JavaScript實(shí)現(xiàn)了這樣的方法,即JavaScript MD5。說(shuō)到底JavaScript內(nèi)置方法少的可憐,但很多牛人寫了一些新方法增加JavaScript功能,比如prototype框架主要是對(duì)JavaScript基礎(chǔ)函數(shù)進(jìn)行原型擴(kuò)展的。
了解DOM編程算是學(xué)習(xí)JavaScript過(guò)程比較重要的課程,因?yàn)镴avaScript除了編寫一些純數(shù)據(jù)處理的邏輯外,更多的是在動(dòng)態(tài)更改XHTML的結(jié)構(gòu)和內(nèi)容,以達(dá)到界面動(dòng)態(tài)更新的目的,而這些工作都要依賴DOM編程。jQuery框架在這方面封裝的相當(dāng)好,提供了豐富的DOM操作方法,可以讓你輕松找到頁(yè)面任何地方的一個(gè)DOM節(jié)點(diǎn)(XHTML標(biāo)簽),然后進(jìn)行相關(guān)操作(增、刪、改、查)。對(duì)于有過(guò)用其它語(yǔ)言操作XML文檔經(jīng)驗(yàn)的朋友,相信這一塊很快上手。
在今天,學(xué)習(xí)了JavaScript而不使用AJAX,那是埋沒JavaScript優(yōu)勢(shì)了(AJAX本身并不能算是JavaScript內(nèi)容)。AJAX對(duì)于用戶以及服務(wù)器來(lái)說(shuō)都是有好處的,對(duì)于用戶,提供更好的用戶體驗(yàn),最典型的一個(gè)應(yīng)用場(chǎng)景:注冊(cè)頁(yè)面的用戶名可用性預(yù)檢測(cè),傳統(tǒng)的可能會(huì)遇到這樣的問題:用戶填寫了一堆資料后提交表單,結(jié)果被服務(wù)器告知這個(gè)用戶被注冊(cè)了,要用戶重新填寫資料注冊(cè),這對(duì)于大型多用戶網(wǎng)站那是很致命的,因?yàn)橛脩糨?0個(gè)用戶名可能有一半已被使用了。對(duì)于服務(wù)器來(lái)說(shuō),減少網(wǎng)頁(yè)流量,因?yàn)锳JAX后,一般是按需加載數(shù)據(jù)的,不會(huì)因?yàn)榫植扛露匦录虞d整個(gè)頁(yè)面。比如一個(gè)網(wǎng)頁(yè)占三屏高,我們可以默認(rèn)只加載第一屏的內(nèi)容,當(dāng)用戶拉動(dòng)滾動(dòng)條往下的時(shí)候,再加載二三屏的內(nèi)容。另外像WEB在線地圖應(yīng)用也是AJAX使用的典范。 提高
JavaScript this的作用與指向跟很多真正面向?qū)ο蟮拈_發(fā)語(yǔ)言是有很大差別的,它不始終指向當(dāng)前對(duì)象,是會(huì)變化的。如果不注意這個(gè)問題,就有可能遇到看似沒錯(cuò)的代碼報(bào)錯(cuò)或不執(zhí)行等問題。
OOP是個(gè)好東西,它使程序員思考問題更有組織性,代碼的組織也更清晰。JavaScript 也可以O(shè)OP,但與一些傳統(tǒng)的OOP語(yǔ)言同樣存在較大差別,所以要真正用熟JavaScript OOP也是需要下點(diǎn)功夫的。
JavaScript閉包也是被談得比較多的一個(gè)話題,閉包使JavaScript變量作用域變得復(fù)雜起來(lái),但這一特性又使這門語(yǔ)言變的更靈活了。
團(tuán)隊(duì)精神相信大家是聽過(guò)不少了,就職一個(gè)公司做開發(fā),當(dāng)然離不開團(tuán)隊(duì),團(tuán)隊(duì)要想合作愉快,每個(gè)成員的編碼必需符合一定規(guī)范,這也是每個(gè)公司對(duì)程序員的基本要求。關(guān)于規(guī)范通常指變量命名、文件組織、注釋規(guī)范等,這方面知識(shí)與其它語(yǔ)言的規(guī)范是有相通性的。
我認(rèn)為學(xué)會(huì)并使用一門語(yǔ)言并不是什么難事,難的應(yīng)該是用語(yǔ)言這基本的語(yǔ)法與語(yǔ)句去解決一些復(fù)雜的問題。要解決一些復(fù)雜的問題,可能會(huì)用上一些算法,有些算法實(shí)現(xiàn)可能是一個(gè)團(tuán)隊(duì)在做的,比如中科院中文分詞的具體實(shí)現(xiàn),另外像游戲常用自動(dòng)尋徑A*算法等。也許你認(rèn)為你不可能在JavaScript開發(fā)上遇到這么復(fù)雜的問題,其實(shí)這還要看你在做什么項(xiàng)目,如果你是在開發(fā)大型網(wǎng)頁(yè)游戲,通常面臨更多具有挑戰(zhàn)性的難題,如果你有讀過(guò)一些算法書籍,了解一些常見問題的解決方法,在開發(fā)過(guò)程中自然會(huì)如虎添翼。另外,熟悉算法顯然對(duì)于你日后接觸其它開發(fā)語(yǔ)言也是有幫助的。 習(xí)慣
CSS與JavaScript瀏覽器兼容問題最好做好筆記,因?yàn)檫@些問題,或者說(shuō)BUG是比較詭異的,這些問題瀏覽器不會(huì)提示你錯(cuò)在哪里,IDE也不會(huì)提示你,特別是CSS兼容問題,這就會(huì)導(dǎo)致你在開發(fā)過(guò)程碰到這樣的問題會(huì)卡老半天得不到解決。即使之前解決過(guò)同類問題,以后可能又會(huì)碰上,結(jié)果之前沒有做好筆記加強(qiáng)記憶,注定你要再受罪一次,因?yàn)檫@些兼容問題不是一兩個(gè),臨時(shí)記憶效果是不明顯的。以我經(jīng)驗(yàn),很多問題是在IE6下發(fā)生的,現(xiàn)在IE6連微軟自己都希望加速它滅亡,這對(duì)于前端開發(fā)的我們來(lái)說(shuō)當(dāng)然是一個(gè)好消息。
閱讀優(yōu)秀代碼絕對(duì)也是自我提高的好方法,這不僅可以了解優(yōu)秀代碼的組織規(guī)范,更可以了解一些功能的實(shí)現(xiàn)思路。比如jQuery就是一個(gè)非常值的學(xué)習(xí)的JavaScript框架。當(dāng)然了,要閱讀這樣專業(yè)的JavaScript框架,JavaScript基礎(chǔ)要扎實(shí),不然看的過(guò)程中會(huì)遇到太多疑問,甚至對(duì)自己的信心也是一種打擊。 注意
如果你沒有任何JavaScript基礎(chǔ),請(qǐng)不要直接使用JavaScript框架做開發(fā),我認(rèn)為這可能會(huì)誤導(dǎo)你對(duì)一門語(yǔ)言的認(rèn)識(shí),比如你直接使用了jQuery用點(diǎn)連起來(lái)的語(yǔ)句寫法,你是否會(huì)認(rèn)為這是JavaScript語(yǔ)法的一種呢?再比如你使了prototype你不要把框架擴(kuò)展后的基類方法認(rèn)為是JavaScript內(nèi)置的。我認(rèn)為JavaScript框架是用來(lái)提高效率的,它絕對(duì)不是JavaScript入門應(yīng)該學(xué)習(xí)的。
有很多JavaScript效果源碼是N年前某網(wǎng)友寫的,N年前是IE的天下,于是一些前端懶得解決腳本跨瀏覽器兼容問題,使寫出來(lái)的腳本只適用于IE。當(dāng)你得到這樣的一段代碼,請(qǐng)不要說(shuō)垃圾,也不要為此發(fā)牢騷,因?yàn)檫@些代碼并不是沒有一點(diǎn)價(jià)值的,如果你了解JavaScript跨瀏覽器兼容問題,相信你可以很輕松通過(guò)少需修改使代碼有更好的兼容性。 該文章在 2012/4/9 9:07:30 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |