JavaScript語(yǔ)法約定和程序調(diào)試原理解析
JavaScript 語(yǔ)法約定
1、大小寫(xiě)的區(qū)分
1). JavaScript的關(guān)鍵字,永遠(yuǎn)都是小寫(xiě)的;
2). 內(nèi)置對(duì)象,如Math和Date是以大寫(xiě)字母開(kāi)頭的;
3). 對(duì)象的名稱通常是小寫(xiě);若是多個(gè)單詞,駝峰(Camel)命名法。
駝峰(Camel)命名法:開(kāi)頭單詞小寫(xiě),后面單詞首字母大寫(xiě)。使用的很普遍,很多人習(xí)慣這種命名方法。示例:userName。
2、變量、對(duì)象和函數(shù)的名稱命名
當(dāng)聲明變量、對(duì)象和函數(shù)的名稱時(shí)大小寫(xiě),數(shù)字,下劃線,美元符號(hào)都可以,但是必須以字母,下劃線,美元符號(hào)開(kāi)頭。否者會(huì)出現(xiàn)Uncaught SyntaxError類型的錯(cuò)誤提示。
3、分號(hào) ";"
JavaScript允許開(kāi)發(fā)者自行決定是否以分號(hào)結(jié)束一行代碼。
如果沒(méi)有分號(hào),JavaScript就將行代碼的結(jié)尾看作該語(yǔ)句的結(jié)尾,不會(huì)報(bào)錯(cuò)。但最好每寫(xiě)完一行代碼就加上";" 作為結(jié)尾。
4、運(yùn)算符周圍的空格
在運(yùn)算符( = + - * / )周圍以及逗號(hào)之后添加空格,如下:
var a = 2 + 5;var arr = ["a", "b", "c"];
5、代碼縮進(jìn)
使用對(duì)代碼塊縮進(jìn)使用 4 個(gè)空格,使代碼塊更加清晰。如以下格式:
function isFunny(){
var isTrue=true;
if(isTrue){
console.log("你是對(duì)的");
}
}
JavaScript 語(yǔ)法約定的特點(diǎn):
- 善代碼可讀性
- 提升代碼可維護(hù)性
JavaScript 程序調(diào)試
1、打開(kāi)瀏覽器,按F12進(jìn)入調(diào)試界面:

Elements:用于查看和編輯當(dāng)前頁(yè)面中的HTML和CSS元素。

Console:用于顯示腳本中所輸出的調(diào)試信息,或運(yùn)行測(cè)試腳本等。
Sources:用于查看和調(diào)試當(dāng)前頁(yè)面所加載的腳本的源文件。在source目錄下進(jìn)行調(diào)試。在該模式下,點(diǎn)擊js里每一行即可以加斷點(diǎn)。

斷點(diǎn)調(diào)試細(xì)節(jié)后續(xù)講到?。?!
- Network:用于查看HTTP請(qǐng)求的詳細(xì)信息,如請(qǐng)求,響應(yīng)及返回內(nèi)容等。
- Timeline:用于查看腳本的執(zhí)行時(shí)間,頁(yè)面元素渲染時(shí)間等信息。
- Profiles:用于查看CPU執(zhí)行時(shí)間與內(nèi)存占用等信息。
- Resource:用于查看當(dāng)前頁(yè)面所請(qǐng)求的資源文件,如HTML,CSS樣式等。
- Audits: 用于優(yōu)化前端頁(yè)面,加速網(wǎng)頁(yè)加載速度等。
2、用alert,每次都彈框判斷出錯(cuò)的位置
alert() 會(huì)阻塞 UI 和 alert() 以下的 javascript 代碼的執(zhí)行,必須點(diǎn)擊 '確定' 按鈕才能繼續(xù),非常低效。當(dāng)使用 alert() 進(jìn)行彈出時(shí),最后產(chǎn)品上線后,會(huì)降低用戶體驗(yàn)。
3、用console.log,這個(gè)數(shù)據(jù)量小還可以,調(diào)試時(shí)console.log是最常用的命令之一。
console.log()可以接受任何字符串、數(shù)字和JavaScript對(duì)象。與alert()函數(shù)類似,console.log()也可以接受換行符\n以及制表符\t。console.log()語(yǔ)句所打印的調(diào)試信息可以在瀏覽器的調(diào)試控制臺(tái)中看到。不同的瀏覽器中console.log()行為可能會(huì)有所不同。
以上僅是個(gè)人見(jiàn)解,若有不足之處歡迎在下方評(píng)論指出,那就先分享到這里!! 😄 后續(xù)繼續(xù)更新!!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 溫習(xí)Javascript基礎(chǔ)語(yǔ)法之詞法結(jié)構(gòu)
- javascript中正則表達(dá)式語(yǔ)法詳解
- javascript 高級(jí)語(yǔ)法之繼承的基本使用方法示例
- 詳解JavaScript 新語(yǔ)法之Class 的私有屬性與私有方法
- JSON基本語(yǔ)法及與JavaScript的異同實(shí)例分析
- NodeJS模塊與ES6模塊系統(tǒng)語(yǔ)法及注意點(diǎn)詳解
- JavaScript ES6中的簡(jiǎn)寫(xiě)語(yǔ)法總結(jié)與使用技巧
- js es6系列教程 - 新的類語(yǔ)法實(shí)戰(zhàn)選項(xiàng)卡(詳解)
- 關(guān)于javascript事件響應(yīng)的基礎(chǔ)語(yǔ)法總結(jié)(必看篇)
- 深入理解JavaScript中的語(yǔ)法和代碼結(jié)構(gòu)
相關(guān)文章
BOM之navigator對(duì)象和用戶代理檢測(cè)
navigator對(duì)象現(xiàn)在已經(jīng)成為識(shí)別客戶端瀏覽器的事實(shí)標(biāo)準(zhǔn),navigator對(duì)象是所有支持javascript的瀏覽器所共有的。本文將詳細(xì)介紹navigator對(duì)象和用戶代理檢測(cè)。下面跟著小編一起來(lái)看下吧2017-02-02
GWT中復(fù)制到剪貼板 js+flash實(shí)現(xiàn)復(fù)制 兼容性比較好
今天看到有個(gè)Google Code的項(xiàng)目,叫ZeroClipboard,大意是使用flash作為媒介,將內(nèi)容復(fù)制到剪貼板。這比用純javascript好,因?yàn)椴煌瑸g覽器會(huì)出于安全的原因,有不同反應(yīng),例如IE會(huì)給出提示,有的瀏覽器不支持復(fù)制到剪貼板。2010-03-03
spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例
下面小編就為大家分享一篇spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
學(xué)習(xí)JSON.stringify的9大特性和轉(zhuǎn)換規(guī)則
本文介紹JSON.stringify9大特性和轉(zhuǎn)換規(guī)則,JSON.stringify()方法將一個(gè)JavaScript對(duì)象或值轉(zhuǎn)換為?JSON?字符串,如果指定了一個(gè)replacer?函數(shù),則可以選擇性地替換值,或者指定的replacer是數(shù)組,則可選擇性地僅包含數(shù)組指定的屬性,更多內(nèi)容需要的小火煸可以參考下面溫行內(nèi)容2022-02-02
JS實(shí)現(xiàn)查找數(shù)組中對(duì)象的屬性值是否存在示例
這篇文章主要介紹了JS實(shí)現(xiàn)查找數(shù)組中對(duì)象的屬性值是否存在,涉及javascript針對(duì)json數(shù)組的遍歷、查找相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
javascript 實(shí)現(xiàn)頁(yè)面加載進(jìn)度條代碼
javascript 實(shí)現(xiàn)頁(yè)面加載進(jìn)度條代碼,需要的朋友可以參考下。2010-04-04
javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)秒表計(jì)時(shí)器的制作方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02

