第一篇：Javascript學(xué)習(xí)心得

Javascript學(xué)習(xí)心得

Javascript的應(yīng)用目的

通過(guò)對(duì)JavaScript的學(xué)習(xí),知道它是由C語(yǔ)言演變而來(lái)的，而且在很大程度上借用了Java的語(yǔ)法，而Java又是由C和C++演生而來(lái)的，所以JavaScript和C有許多相似的語(yǔ)法特點(diǎn)。JavaScript的出現(xiàn)，可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關(guān)系，而是實(shí)現(xiàn)了一種實(shí)時(shí)的、動(dòng)態(tài)的、可交互的表達(dá)能力。從而基于CGI靜態(tài)的HTML頁(yè)面將被可提供動(dòng)態(tài)實(shí)時(shí)信息，并對(duì)客戶操作進(jìn)行反應(yīng)的Web頁(yè)面取代。JavaScript 腳本正是滿足這種需求而產(chǎn)生的語(yǔ)言。它深受廣泛用戶的喜愛和歡迎，它是眾多腳本語(yǔ)言中較為優(yōu)秀的一種。

Javascript的優(yōu)點(diǎn)

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言。使用它的目的是與HTML超文本標(biāo)記語(yǔ)言、Java 腳本語(yǔ)言一起實(shí)現(xiàn)在一個(gè)Web頁(yè)面中鏈接多個(gè)對(duì)象，與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過(guò)嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語(yǔ)言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語(yǔ)言的缺陷，它是Java與HTML折衷的選擇，具有以下幾個(gè)基本特點(diǎn)：

一、腳本編寫語(yǔ)言

JavaScript是一種腳本語(yǔ)言，它采用小程序段的方式實(shí)現(xiàn)編程。像其它腳本語(yǔ)言一樣,JavaScript 同樣已是一種解釋性語(yǔ)言，它提供了一個(gè)簡(jiǎn)易的開發(fā)過(guò)程。它的基本結(jié)構(gòu)形式與C、C++、VB等語(yǔ)言十分類似。但它不像這些語(yǔ)言一樣，需要先編譯，而是在程序運(yùn)行過(guò)程中被逐行地解釋。它與HTML標(biāo)識(shí)結(jié)合在一起，從而方便用戶的使用操作。

二、基于對(duì)象的語(yǔ)言

JavaScript是一種基于對(duì)象的語(yǔ)言，同時(shí)以可以看作一種面向?qū)ο蟮?。這意味著它能運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，許多功能可以來(lái)自于腳本環(huán)境中對(duì)象的方法與腳本的相互作用。

三、簡(jiǎn)單性

JavaScript的簡(jiǎn)單性主要體現(xiàn)在：首先它是一種基于Java 基本語(yǔ)句和控制流之上的簡(jiǎn)單而緊湊的設(shè)計(jì), 從而對(duì)于學(xué)習(xí)Java是一種非常好的過(guò)渡。其次它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

四、安全性

JavaScript 是一種安全性語(yǔ)言，它不允許訪問(wèn)本地的硬盤，并不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。

五、動(dòng)態(tài)性

JavaScript 是動(dòng)態(tài)的，它可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web 服務(wù)程序。它對(duì)用戶的反映響應(yīng)，是采用以事件驅(qū)動(dòng)的方式進(jìn)行的。所謂事件驅(qū)動(dòng)，就是指在主頁(yè)中執(zhí)行了某種操作所產(chǎn)生的動(dòng)作，就稱為“事件”。比如按下鼠標(biāo)、移動(dòng)窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會(huì)引起相應(yīng)的事件響應(yīng)。

六、跨平臺(tái)性

JavaScript 是依賴于瀏覽器本身，與操作環(huán)境無(wú)關(guān)，只要能運(yùn)行瀏覽器的計(jì)算機(jī)，并支持JavaScript的瀏覽器就可正確執(zhí)行。

Javascript的運(yùn)行步驟

根據(jù)JavaScript腳本編寫的方式,腳本的執(zhí)行也分為多種情況。當(dāng)瀏覽器打開一個(gè)HTML文檔時(shí)它將從頭開始解釋整個(gè)文檔，而有一些腳本如函數(shù)function，則會(huì)在它們被調(diào)用的時(shí)候運(yùn)行，腳本函數(shù)的調(diào)用往往都是通過(guò)事件來(lái)進(jìn)行驅(qū)動(dòng)的，如在一個(gè)HTML 文檔被裝載onLoad的時(shí)候可以執(zhí)行腳本函數(shù)。

第二篇：javascript學(xué)習(xí)心得2

JavaScript開發(fā)規(guī)范要求

作為一名開發(fā)人員（WEB前端JavaScript開發(fā)），不規(guī)范的開發(fā)不僅使日后代碼維護(hù)變的困難，同時(shí)也不利于團(tuán)隊(duì)的合作，通常還會(huì)帶來(lái)代碼安全以及執(zhí)行效率上的問(wèn)題。本人在開發(fā)工作中就曾與不按規(guī)范來(lái)開發(fā)的同事合作過(guò)，與他合作就不能用“愉快”來(lái)形容了?，F(xiàn)在本人撰寫此文的目的除了與大家分享一點(diǎn)點(diǎn)經(jīng)驗(yàn)外，更多的是希望對(duì)未來(lái)的合作伙伴能夠起到一定的借鑒作用。當(dāng)然，如果我說(shuō)的有不科學(xué)的地方還希望各路前輩多多指教。下面分條目列出各種規(guī)范要求，這些要求都是針對(duì)同事編碼毛病提出來(lái)的，好些行業(yè)約定的其它規(guī)范可能不會(huì)再提及。

1、保證代碼壓縮后不出錯(cuò)

對(duì)于大型的JavaScript項(xiàng)目，一般會(huì)在產(chǎn)品發(fā)布時(shí)對(duì)項(xiàng)目包含的所有JavaScript文件進(jìn)行壓縮處理，比如可以利用Google Closure Compiler Service對(duì)代碼進(jìn)行壓縮，新版jQuery已改用這一工具對(duì)代碼進(jìn)行壓縮，這一般會(huì)去掉開發(fā)時(shí)寫的注釋，除去所有空格和換行，甚至可以把原來(lái)較長(zhǎng)的變量名替換成短且無(wú)意義的變量名，這樣做的目的是加快文件的下載速度，同時(shí)也減小網(wǎng)站訪問(wèn)帶來(lái)的額外數(shù)據(jù)流量，另外在代碼保護(hù)上也起到了一點(diǎn)點(diǎn)作用，至少壓縮后的代碼即使被還原還是沒(méi)那么容易一下讀懂的。要想代碼能正確通過(guò)壓縮，一般要求語(yǔ)句都要以分號(hào)正常結(jié)束，大括號(hào)也要嚴(yán)格結(jié)束等，具體還要看壓縮工具的要求。所以如果一開始沒(méi)有按標(biāo)準(zhǔn)來(lái)做，等壓縮出錯(cuò)后再回去找錯(cuò)誤那是浪費(fèi)時(shí)間。

2、保證代碼能通過(guò)特定IDE的自動(dòng)格式化功能

一般較為完善的開發(fā)工具（比如Aptana Studio）都有代碼“自動(dòng)格式”化功能，這一功能幫助實(shí)現(xiàn)統(tǒng)一換行、縮進(jìn)、空格等代碼編排，你可以設(shè)置自己喜歡的格式標(biāo)準(zhǔn)，比如左大括號(hào){是否另起一行。達(dá)到這個(gè)要求的目的在于方便你的開發(fā)團(tuán)隊(duì)成員拿你代碼的一個(gè)副本用IDE自動(dòng)格式化成他喜歡或熟悉的風(fēng)格進(jìn)行閱讀。你同事需要閱讀你的代碼，可能是因?yàn)槟銓懙氖峭ㄓ梅椒?，他在其它模塊開發(fā)過(guò)程中也要使用到，閱讀你的代碼能最深入了解方法調(diào)用和實(shí)現(xiàn)的細(xì)節(jié)，這是簡(jiǎn)單API文檔不能達(dá)到的效果。

3、使用標(biāo)準(zhǔn)的文檔注釋

這一要求算是最基本的，這有利于在方法調(diào)用處看到方法的具體傳參提示，也可以利用配套文檔工具生成html或其它格式的開發(fā)文檔供其他團(tuán)隊(duì)成員閱讀，你可以嘗試使用jsdoc-toolkit。如果你自動(dòng)生成的API是出自一個(gè)開放平臺(tái)，就像facebook.com應(yīng)用，那么你的文檔是給天下所有開發(fā)者看的。另外編寫完整注釋，也更方便團(tuán)隊(duì)成員閱讀你的代碼，通過(guò)你的參數(shù)描述，團(tuán)隊(duì)成員可以很容易知道你編寫的方法傳參與實(shí)現(xiàn)細(xì)節(jié)。當(dāng)然也方便日后代碼維護(hù)，這樣即使再大的項(xiàng)目，過(guò)了很長(zhǎng)時(shí)間后，回去改點(diǎn)東西也就不至于自己都忘記了當(dāng)時(shí)自己寫的代碼是怎么一回事了。

4、使用規(guī)范有意義的變量名

使用規(guī)范有意義的變量名可以提高代碼的可讀性，作為大項(xiàng)目開發(fā)成員，自己寫的代碼不僅僅要讓別人容易看懂。開發(fā)大項(xiàng)目，其實(shí)每個(gè)人寫的代碼量可能都比較大，規(guī)范命名，日后自己看回自己的代碼也顯的清晰易懂，比如日后系統(tǒng)升級(jí)或新增功能，修改起代碼來(lái)也輕松多了。如果到頭發(fā)現(xiàn)自己當(dāng)初寫的代碼現(xiàn)在看不太懂了，那還真是天大的笑話了。

當(dāng)然，使用有意義的變量名也盡量使用標(biāo)準(zhǔn)的命名，比如像這里：var me = this也許沒(méi)有var self = this好，因?yàn)閟elf是Python中的關(guān)鍵字，在Python中self就是通常語(yǔ)言this的用法。再看下面一個(gè)例子，加s顯然比沒(méi)有加來(lái)的科學(xué)些，這樣可以知道這個(gè)變量名存的是復(fù)數(shù)，可能是數(shù)組等：

var li = document.getElementsByTagName('li')var lis = document.getElementsByTagName('li')

5、不使用生偏語(yǔ)法

JavaScript作為一門動(dòng)態(tài)腳本語(yǔ)言，靈活性既是優(yōu)點(diǎn)也是缺點(diǎn)，眾所周知，動(dòng)態(tài)語(yǔ)言不同層次開發(fā)人員對(duì)實(shí)現(xiàn)同樣一個(gè)功能寫出來(lái)的代碼在規(guī)范或語(yǔ)法上會(huì)存在較大的差別。不管怎么樣，規(guī)范編碼少搞怪，不把簡(jiǎn)單問(wèn)題復(fù)雜化，不違反代碼易讀性原則才是大家應(yīng)該做的。比如這語(yǔ)句：typeof(b)== 'string' && alert(b)應(yīng)該改為：if(typeof(b)== 'string')alert(b)，像前面那種用法，利用了&&運(yùn)算符解析機(jī)制：如果檢測(cè)到&&前語(yǔ)句返回false就不再檢測(cè)后面語(yǔ)句，在代碼優(yōu)化方面也有提到把最可能出現(xiàn)的情況首先判斷，像這種寫法如果條件少還好，如果條件較多而且語(yǔ)句也長(zhǎng)，那代碼可讀性就相當(dāng)差。

又比如：+function(a){var p = a;}('a')應(yīng)該改為：(function(a){var p = a;})('a')，其實(shí)function前面的+號(hào)與包含function的()括號(hào)作用是一樣的，都是起運(yùn)算優(yōu)先作用，后者是常見且容易看明白的防止變量污染的做法，比如好些流行JavaScript框架就是采用后面這種方式。

再說(shuō)個(gè)降低代碼可讀性的例子，如：function getPostionTxt(type){return type == 2 ? “野外” :(type == 3 ? “商城” :(type == 4 ? “副本” : null));}應(yīng)該改成：function

getPostionTxt(type){var typeData={“2”:“野外”,“3”:“商城”,“4”:“副本”};if(typeData[type])return typeData[type];else return null;}。如果type是從0開始不間斷的整數(shù)，那么直接使用數(shù)組還更簡(jiǎn)單，這種結(jié)果看起來(lái)就清晰多了，看到前面那種多層三元表達(dá)式嵌套頭不暈嗎。

6、不在語(yǔ)句非賦值地方出生中文

語(yǔ)句中不應(yīng)該出現(xiàn)中文我想一般人都知道，雖然這樣做不影響程序運(yùn)行，但是顯然有背行業(yè)標(biāo)準(zhǔn)要求，當(dāng)然我們也不是在使用“易語(yǔ)言”做開發(fā)。關(guān)于這一個(gè)問(wèn)題，我本來(lái)不想把它拿出來(lái)說(shuō)的，但我確實(shí)遇到有人這樣做的，也不知道是不是因?yàn)樗挠⒄Z(yǔ)實(shí)在太爛了，至少還可以用拼音吧，另外尋求翻譯工具幫忙也不錯(cuò)的選擇。我舉例如下，像以下寫法出現(xiàn)在教學(xué)中倒還可以理解： this.user['名字'] = '張三' 或者 this.user.名字 = '張三'

7、明確定義函數(shù)固定數(shù)量的參數(shù)

固定數(shù)量參數(shù)的函數(shù)內(nèi)部不使用arguments去獲取參數(shù)，因?yàn)檫@樣，你定義的方法如果包含較多的腳本，就不能一眼看到這個(gè)方法接受些什么參數(shù)以及參數(shù)的個(gè)數(shù)是多少。比如像下面： var $ = function(){return document.getElementById(arguments[0]);}應(yīng)該改成：var $ = function(elemID){return document.getElementById(elemID);}

8、不必?zé)嶂詣?dòng)態(tài)事件綁定

雖然知道事件可以動(dòng)態(tài)綁定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用動(dòng)態(tài)事件綁定可以讓XHTML更干凈，但是一般情況下我還是建議直接把事件寫在DOM節(jié)點(diǎn)上，我認(rèn)為這樣可以使代碼變得更容易維護(hù)，因?yàn)檫@樣做，我們?cè)诓榭丛创a的時(shí)候就可以容易地知道什么Element綁定了什么方法，簡(jiǎn)單說(shuō)這樣更容易知道一個(gè)按鈕或鏈接點(diǎn)擊時(shí)調(diào)了什么方法腳本。

9、降低代碼與XHTML的耦合性

不要過(guò)于依賴DOM的一些內(nèi)容特征來(lái)調(diào)用不同的腳本代碼，而應(yīng)該定義不同功能的方法，然后在DOM上調(diào)用，這樣不管DOM是按鈕還是鏈接，方法的調(diào)用都是一樣的，比如像下面的實(shí)現(xiàn)顯然會(huì)存在問(wèn)題：

function myBtnClick(obj){ if(/確定/.test(obj.innerHTML))

alert('OK');else if(/取消/.test(obj.innerHTML))

alert('Cancel');else

alert('Other');} 確定取消 上面例子其實(shí)在一個(gè)函數(shù)內(nèi)處理了兩件事情，應(yīng)該分成兩個(gè)函數(shù)，像上面的寫法，如果把鏈接換成按鈕，比如改成這樣：，那么myBtnClick函數(shù)內(nèi)部的obj.innerHTML就出問(wèn)題了，因?yàn)榇藭r(shí)應(yīng)該obj.value才對(duì)，另外如果把按鈕名稱由中文改為英文也會(huì)出問(wèn)題，所以這種做法問(wèn)題太多了。

10、一個(gè)函數(shù)應(yīng)該返回統(tǒng)一的數(shù)據(jù)類型

因?yàn)镴avaScrip是弱類型的，在編寫函數(shù)的時(shí)候有些人對(duì)于返回類型的處理顯得比較隨便，我覺得應(yīng)該像強(qiáng)類型語(yǔ)言那樣返回，看看下面的兩個(gè)例子： function getUserName(userID){ if(data[userID])

return data[userID];else

return false;} 應(yīng)該改為：

function getUserName(userID){ if(data[userID])

return data[userID];else

return “";} 這個(gè)方法如果在C#中定義，我們知道它準(zhǔn)備返回的數(shù)據(jù)類型應(yīng)該是字符串，所以如果沒(méi)有找到這個(gè)數(shù)據(jù)我們就應(yīng)該返回空的字符串，而不是返回布爾值或其它不合適的類型。這并沒(méi)有影響到函數(shù)將來(lái)的調(diào)用，因?yàn)榉祷氐目兆址谶壿嬇袛嗌峡杀徽J(rèn)作“非”，即與false一樣，除非我們使用全等于“===”或typeof進(jìn)行判斷。

11、規(guī)范定義JSON對(duì)象，補(bǔ)全雙引號(hào)

使用標(biāo)準(zhǔn)肯定是有好處的，那么為什么還是有人不使用標(biāo)準(zhǔn)呢？我想這可能是懶或習(xí)慣問(wèn)題。也許還會(huì)有人跟我說(shuō)，少寫引號(hào)可以減輕文件體積，我認(rèn)為這有道理但不是重點(diǎn)。對(duì)于服務(wù)器返回的JSON數(shù)據(jù)，使用標(biāo)準(zhǔn)結(jié)構(gòu)可以利用Firefox瀏覽器的JSONView插件方便查看（像查看XML那樣樹形顯示），另外你如果使用jQuery做開發(fā)，最新版本jQuery1.4+是對(duì)JSON格式有更高要求的，具體的可以自己查閱jQuery更新文檔。比如：{name:”Tom“}或{'name':'Tom'}都應(yīng)該改成{”name“:”Tom“}。

12、不在文件中留下未來(lái)確定不再使用的代碼片段

當(dāng)代碼調(diào)整或重構(gòu)后，之前編寫的不再使用的代碼應(yīng)該及時(shí)刪除，如果認(rèn)為這些代碼還有一定利用價(jià)值可以把它們剪切到臨時(shí)文件中。留在項(xiàng)目中不僅增加了文件體積，這對(duì)團(tuán)隊(duì)其它成員甚至自己都起到一定干擾作用，怕將來(lái)自己看回代碼都搞不懂這方法是干什么的，是否有使用過(guò)。當(dāng)然可以用文檔注釋標(biāo)簽@deprecated把這個(gè)方法標(biāo)識(shí)為不推薦的。

13、不重復(fù)定義其他團(tuán)隊(duì)成員已經(jīng)實(shí)現(xiàn)的方法

對(duì)于大型項(xiàng)目，一般會(huì)有部分開發(fā)成員實(shí)現(xiàn)一些通用方法，而另外一些開發(fā)成員則要去熟悉這些通用方法，然后在自己編寫模塊遇到有調(diào)用的需要就直接調(diào)用，而不是像有些開發(fā)者喜歡“單干”，根本不會(huì)閱讀這些通用方法文檔，在自己代碼中又寫了一遍實(shí)現(xiàn)，這不僅產(chǎn)生多余的代碼量，當(dāng)然也是會(huì)影響團(tuán)隊(duì)開發(fā)效率的，這是沒(méi)有團(tuán)隊(duì)合作精神的表現(xiàn)，是重復(fù)造輪子的悲劇。比如在通用類文件Common.js有定義function $(elemID){return document.getElementById(elemID)}那么就不應(yīng)該在Mail.js中再次出現(xiàn)這一功能函數(shù)的重復(fù)定義，對(duì)于一些復(fù)雜的方法更應(yīng)該如此。

14、調(diào)用合適的方法

當(dāng)有幾個(gè)方法都可以實(shí)現(xiàn)同類功能的時(shí)候，我們還是要根據(jù)場(chǎng)景選擇使用最合適的方法。下面拿jQuery框架的兩個(gè)AJAX方法來(lái)說(shuō)明。如果確定服務(wù)器返回的數(shù)據(jù)是JSON應(yīng)該直接使用$.getJSON，而不是使用$.get得到數(shù)據(jù)再用eval函數(shù)轉(zhuǎn)成JSON對(duì)象。如果因?yàn)楸敬握?qǐng)求要傳輸大量的數(shù)據(jù)而不得以使用$.post也應(yīng)該采用指定返回?cái)?shù)據(jù)類型（設(shè)置dataType參數(shù)）的做法。如果使用$.getJSON，在代碼中我們一眼能看出本次請(qǐng)求服務(wù)器返回的是JSON。溫馨提示：jQuery1.4后，如果服務(wù)器有設(shè)置數(shù)據(jù)輸出的ContentType，比如ASP.NET C#設(shè)置 Response.ContentType = ”application/json“，那么$.get將與$.getJSON的使用沒(méi)有什么區(qū)別。

15、使用合適的控件存儲(chǔ)合適的數(shù)據(jù)

曾發(fā)現(xiàn)有人利用DIV來(lái)保存JSON數(shù)據(jù)，以待頁(yè)面下載后將來(lái)使用，像這樣：