編寫可維護的JavaScript-程式設計風格
可以使用JSHint對程式碼進行檢查。程式碼規範可以是使開發更高效。
基本的格式化
縮排層級
- 使用製表符進行縮排。
Tab
- 使用空格進行縮排。
語句結尾
是不是使用分號看個人喜好,書上推薦是不使用;但是jshint等工具,還有Google 的JavaScript風格指南推薦使用。
行的長度
單行長度限定在80個字元之內。
1. Java規定單行長度不超過80個字元;
2. Android不超過100個字元;
3. Ruby規定不超過80個字元;
4. Python不超過79個字元;
所以在JavaScript中,推薦單行長度限定在80個字元之內。
換行
這一段挺多的,我就寫幾個例項吧。
var tasks = [openDocument, writeText, closeDocument, updateUIcloseDocument,writeText,
updateUIcloseDocument, updateUI];
if (options & OPTION_D||tioDay===20|start!==1000&&
(window.t.s(num))) {
//do something
console.log(options);
}
空行
書上建議
- 在方法之間(我比較認同);
- 在方法中的區域性變數和第一條語句之間。
- 在多行或單行註釋之前;
- 在方法內的邏輯片段之間傳入空行,提高可讀性。
本人建議慎用空行
命名
小駝峰命名(大家都知道的)myName
變數和函式
函式名前應該是動詞:getCount;單純名詞是變數:myName。
count、length、size儘量是數字;
name、title、message儘量是字串;
以can、has、is儘量是布林。
set開頭儘量來儲存一個值。
常量
大寫字母和下劃線來表示常量 var MAX_COUNT=10;
建構函式
使用大駝峰命名法。
function Person(name) {
this.name=name;
}
Person.prototype.myName=function () {
alert(this.name)
}
var me=new Person("Jack")
字串和數字
字串單引號和雙引號看你自己的喜好,數字10進位制,且如果有小數部分,請寫全;不要10.
;.23
這種。
null
使用場景
- 用來初始化一個變數,這個變數可能賦值為一個物件。
- 用來和一個已經初始化的變數比較,這個變數可以是也可以不是一個物件
- 當函式的引數期望是物件時,做引數使用;/**/
- 當函式的返回值期望是物件的時候。作返回值使用。
不要使用場景
- 不要使用null來檢查是否傳入了某個引數。
- 不要用null來檢測一個未初始化的變數。
undefined
沒有被初始化的變數都有一個初始值,即undefined;表示這個變數等待被賦值。
//b未被宣告
var f;
console.log(typeof f);
console.log(typeof b);
建議此時將f賦值為null;然後typeof 運算null之後,返回“object”,這樣可以和undefined區分了。
註釋
單行註釋
//
- 獨佔一行,用來解釋下一行程式碼。這行註釋之前總是有一個空行,且縮排層級和下一行程式碼保持一致。
- 在程式碼行的尾部註釋,程式碼結束到註釋之間至少有一個縮排。
多行註釋
/* */
多行的時候,要加*,且有空格
/*
* 78787
* 和哦窘迫
*/
文件註釋
/**
@param :一個物件引數
@param :一個物件引數
**/
- 對方法、期望的引數和可能的返回值新增註釋。
- 對自定義型別和期望的引數新增註釋。
- 如果一個物件包含一個或多個附帶文件註釋的方法,那麼這個物件也應當適當的針對文件生成工具新增文件註釋。
語句和表示式
所有的塊語句都應當使用花括號:
- if
- for
- while
- do…while
- try…catch…finally
for迴圈
注意break;和continue的使用。
for-in迴圈
最好使用hasOwnProperty();方法來為for-in迴圈過濾出例項屬性。
var obj={value: 310, name: '郵件營銷'};
var item;
for(item in obj){
if(obj.hasOwnProperty(item)){
console.log(item);
console.log(obj[item]);
}
}
變數、函式、運算子
變數宣告
變數宣告提前
function dos() {
var res=10+val;
var val=10;
return res;
}
此時由於變數宣告提前;列印出來的是NaN
;其中的原因是瀏覽器自己理解為
function dos() {
var res;
var val;
res=10+val;
val=10;
return res;
}
建議儘量將變數宣告放到最頂部。
函式宣告
- 先宣告函式,在使用函式。
- 函式宣告不要在條件語句的內部。
嚴格模式避免放入到全域性作用域中。
儘量使用====
和!==
而不是==和!=
;
eval();function();setInterval(); setTimeout()傳入字串來立即生成js程式碼去執行的,儘量避免使用。
相關文章
- 編寫可維護的JSJS
- 編寫可維護的CSSCSS
- 編寫可維護的JavaScriptJavaScript
- 如何編寫高質量和可維護的程式碼
- 如何編寫可維護的物件導向JavaScript程式碼物件JavaScript
- 遠離麵條程式碼:編寫可維護的 JS 程式碼JS
- 尋找頭緒:編寫可維護的 JavaScriptJavaScript
- 前端進階篇之如何編寫可維護可升級的程式碼前端
- PEP 8 程式程式碼的編寫風格指南
- 編寫業務邏輯程式碼,清晰可維護是很重要的
- 編寫可維護的程式碼是一種溝通技巧 - Max Chernyak
- 糟糕程式設計師的程式設計風格程式設計師
- 軟體編寫風格
- 書寫可維護程式碼的重要性
- Javascript程式設計風格JavaScript程式設計
- Dave Cheney:編寫簡單,可讀,可維護的Go程式碼的十個工程建議Go
- 讀《程式碼不朽:編寫可維護軟體的10大要則》C# 版C#
- 8 個幫助你編寫可維護、精簡化前端程式碼的 CSS 策略前端CSS
- JavaScript 程式設計風格指南JavaScript程式設計
- 優秀Java程式設計師的程式設計風格Java程式設計師
- 編寫高質量可維護的程式碼:一目瞭然的註釋
- 各種流行的程式設計風格程式設計
- Go 語言實戰: 編寫可維護 Go 語言程式碼建議Go
- 註釋之重——程式設計師與程式碼可維護性程式設計師
- 物件導向程式設計風格 VS 基於物件程式設計風格(boost::bind/function)物件程式設計Function
- 面向可複用性和可維護性的設計模式設計模式
- Google Java 程式設計風格指南GoJava程式設計
- [譯] Go 語言實戰: 編寫可維護 Go 語言程式碼建議Go
- Python程式設計風格和設計模式Python程式設計設計模式
- 如何培養良好的程式設計風格程式設計
- java中須遵守的程式設計風格Java程式設計
- FPGA可綜合風格程式碼FPGA
- 編寫高質量程式碼之狀態維護
- 可程式設計的編譯器程式設計編譯
- JavaScript-設計模式-物件導向程式設計JavaScript設計模式物件程式設計
- Google Python 程式設計風格指南GoPython程式設計
- 前端 JavaScript 程式設計風格淺析前端JavaScript程式設計
- 你需要懂點程式設計風格程式設計