如何編寫高質量程式碼
對於開發人員來說,編寫高質量的程式碼是有很重要的意義的,特別是在團隊協作裡。本篇博文從前端開發的角度,總結出編寫高質量前端程式碼的一些經驗。前端開發涉及的主要語言包括html,css,js等。這裡主要針對JS來介紹。
編碼思維
1. 邏輯思維
當接到某個任務的時候,不要急於開始動手,而是先靜下心來思考,理清這個任務要實現的功能,這個功能用在什麼場景下,將來是否會複用,如果將來會變化,可能會怎樣變化。要怎麼設計利於功能的擴充套件和優化,可能會出現哪些問題,如何規避問題。這些都是在前期動筆前需要思考清楚的,不然到後面開發的時候可能會不停的修改,最終效率越來越低。一個功能有著良好的執行邏輯,才不會容易出錯。當然如果時間不允許,或是隻上一次就廢棄的功能,此時效率可能會優先考慮。
通常專業的設計師,在設計網頁的時候會使頁面保持相同的風格,相似的模組同質性很高,這些在我們開發的時候,對複用性較高的程式碼定義成公共的模組或元件。甚至我們在接到設計稿的時候,對於差異較大但是功能類似的頁面提出疑問,提醒視覺保持統一。
有良好的邏輯思維能力和豐富的工作經驗能使我們想的更深更遠。對寫程式碼保持強烈的熱情跟好奇心,多看多讀,有些程式碼晦澀難懂,比如複雜的演算法或是新的概念,沒關係,第一次看了瞭解,第二次看了就熟悉,第三次可能就精通了,堅持學習和吸收新的知識,有助於我們更好的瞭解需要開發的功能,磨練自己的邏輯思維,增加解決問題的辦法。
2. 優化思維
對於自己寫過的程式碼持懷疑態度,追求完美的程式碼。何為完美,每個人的標準不一樣。對於自己寫過的程式碼,寫完後想想整個的流程,是否還有值得優化的地方。儘量用最簡潔的程式碼來實現,比如用三元運算子代替if語句,重複的程式碼提取成方法,重用的功能寫成一個元件等等。對於寫的不好的程式碼要有重構的勇氣和信心。
在開發的過程中,還時時需要考慮頁面的效能,選擇效能最好的解決方案。比如JS少用全域性變數,用完後及時銷燬,合理使用閉包,避免頻繁操作DOM節點,大量的計算等,HTML程式碼的SEO優化,樣式的合理組織等,開發完後通過firebug或chrome自帶的除錯工具檢視頁面載入的速度,資源大小等,然後有針對性的優化。
3. 設計思維
作為一名前端開發,懂點設計的基礎是很有必要的。前端的設計是指一個畫面或元素,如何在不同的瀏覽器,不同的裝置上被建立,顯示,或刪除。我們除了直接跟設計師打交道外,還直接面向用戶,做好響應式的設計與開發,從使用者的角度出發,客觀的評價設計稿所傳達的資訊,是否體驗最優,就是我們前端的設計思維。設計的思維,會直接影響我們寫程式碼的結構。
JS程式碼規範
2.1變數
使用合理易於理解的英文變數名稱,變數命名的風格統一,比如都用駝峰命名法,區域性變數名儘量簡短。NEJ裡的規範,區域性變用介面內區域性變數或者傳遞的引數用_來量表示,如_type,_index等。物件外可訪問的介面或者屬性,用_$開頭,_$$表示類物件等。
宣告變數必須加上 var
關鍵字.當你沒有寫 var
, 變數就會暴露在全域性上下文中, 這樣很可能會和現有變數衝突。變數需先聲明後使用,防止變數提升。
另外常量名字都用大寫。
2.2方法
JS面向物件開發中公有介面命名首字母為大寫,私有介面命名首字母小寫。事件的命名用動詞+名詞+動詞的方式,方法名具有語義化,儘量完整。如:onExchange,doExchange,cbExchange等。邏輯操作符 ||
和 &&
可被用來返回布林值,簡化程式碼。
3.程式碼註釋
程式碼加上合理的註釋,提高可讀性。例如對於某個功能的簡介,或者變數的特殊含義和用處。每個JS檔案頭部說明下作者,日期,檔案介紹等。
/**
* KJ-13989 組團買好貨
* author liuhuanchao
* 2015-12-09
*/
/**
* 介面函式的說明
* 引數說明
*/
/**
* 空閒控制 返回函式連續呼叫時,空閒時間必須大於或等於 wait,func 才會執行
*
* @param {function} func 傳入函式
* @param {number} wait 表示時間視窗的間隔
* @param {boolean} immediate 設定為ture時,呼叫觸發於開始邊界而不是結束邊界
* @return {function} 返回客戶呼叫函式
*/
當你寫註釋時一定要注意:不要寫你的程式碼都幹了些什麼,而要寫你的程式碼為什麼要這麼寫,背後的考量是什麼。對於檔案的修改,也可以在註釋里加上相關的任務號。
4.語句結束時新增分號
記得語句結束時使用分號。如果僅依靠語句間的隱式分隔, 有時會很麻煩。而且新增分號也利於程式碼的理解。
5.不要在塊內宣告一個函式,使用函式表示式來定義函式
不要寫成:
if (x) {
function foo() {}
}
雖然很多 JS 引擎都支援塊內宣告函式, 但它不屬於 ECMAScript 規範 (見 ECMA-262, 第13和14條)。 各個瀏覽器的實現相互不相容, 有些也與未來 ECMAScript 草案相違背。ECMAScript 只允許在指令碼的根語句或函式中宣告函式。 如果確實需要在塊中定義函式, 建議使用函式表示式來初始化變數:
if (x) {
var foo = function() {}
}
(function(){
//do some thing
})()
全域性變數可以通過定義全域性物件變數來儲存,像在ftl頁面的JS中定義ftl值的時候,可以統一寫成:
var configInfos ={
remindType:${remindType!2},
totalPoint:${pointTotalCount!0},
isSigned:"${isSigned?string('yes','no')}"
}
而後通過configInfos.remindType獲取到remindType值。這樣可以減少全域性變數的個數,避免變數衝突。
7.使用單引號定義字串。
ftl檔案中用雙引號,JS中用單引號。
8.使用簡化的編碼方式。
如物件和陣列的宣告,三元操作符等。
var a = [],obj={};
9.避免使用with語句。
該語句在設計上就有缺陷,在ES5和ES6上也存在潛在相容問題。對效能也有很大影響。
10.避免使用eval。
存在潛在安全問題,在需要使用eval的場景中應當儘量使用其它方法代替。
11.事件處理和業務邏輯分離,資料和程式碼邏輯分離。
現在使用的RegularJs框架正是實現了資料與程式碼邏輯的分離。
12.結構樣式與邏輯分離
CSS樣式分離,將多個樣式放置在class中後控制class的增刪,通過掛靠樣式名來改變樣式。避免在JS中對元素操作大量的style來改變樣式。
_e._$addClassName(this.__passWord,'u-ipt-login-active');
13.合理定義互動元素的樣式名
在JS中,可以通過獲取元素的className,id,或元素名來操作DOM節點。如果是頁面上固定的節點,則可以通過給元素掛靠'ztag','j-flag'等樣式名。這些名字不需要帶任何樣式。避免用大量的id來獲取元素。如果是通過判斷來顯示的元素,則可以通過ID來獲取。
pro.__getNodes = function(){ var _node = _e._$getByClassName(document.body,'ztag'),i=0; this.__aboutWrap = _node[i++]; this.__goodsDescWrap = _node[i++]; this.__fixedBtn = _node[i++]; this.__payBtn = _node[i++]; };
14.程式碼格式化
15.理解 JavaScript 的定義域和定義域提升,提前宣告變數
在 JavaScript 中變數和方法定義會自動提升到執行之前。JavaScript 只有 function 級的定義域,而無其他很多程式語言中的塊定義域,所以使得你在某一function 內的某語句和迴圈體中定義了一個變數,此變數可作用於整個 function 內,而不僅僅是在此語句或迴圈體中,因為它們的宣告被 JavaScript 自動提升了。所以一般在函式開頭先宣告好變數。避免變數在定義前被使用,導致報錯。
16.合理使用AJAX技術
明確AJAX技術的使用場景,在AJAX過程中做好使用者的互動,如禁用按鈕避免重複觸發、顯示載入進度條等。
17.記憶體回收
全域性物件或物件的屬性使用完後,將值設為null或undefined,或者某個例項化的元件,使用後及時解除引用(recycle或destroy方法),解除已經不需要的事件監聽(delEvent),不要在函式內返回外部不需要的物件等。這些操作利於瀏覽器的回收程式執行時能回收其佔用的記憶體。
18.使用高效能的變數或屬性值的讀取方式
for(var i=0,len=number.length;i<len;i++){}
變數涉及作用域鏈查詢的過程,屬性涉及原型鏈查詢的過程,定義成區域性變數可以節約查詢的時間。
19.高效的DOM操作
20.增加容錯處理
例如給變數或屬性設定預設值,對某段程式碼使用try,catch操作。
21.程式碼注意安全性
常見的Web前端攻擊方式有XSS Cross Site Scripting 跨站點指令碼攻擊,CSRF Cross Site Request Forgery 跨站請求偽造,介面操作劫持等。我們需要注意的是不輕信任何使用者輸入的內容,針對使用者輸入的內容進行HTML編碼、JavaScript編碼、CSS編碼、URL編碼等。對使用者表單提交的資料做完整的驗證。
22.移動端開發注意點
使用流式佈局。使用合適的圖片顯示相容方案。使用移動平臺特有事件處理如手勢操作。增加連結按鈕的可操作區域,如安卓開發規範中保證這些控制元件的高度至少有48px間隔至少有32px等。
23.程式碼檢查,code review
24.ftl裡程式碼優化
ftl裡避免在JS中填充大量的資料,尤其是像列表資料,不利於優化。如果確實需要,在JS獲得資料後刪除該節點。
其他注意點
1.提前設計
提前規劃設計好,從全域性角度規劃程式碼的結構。保證程式碼精簡,寫完某個功能後重新思考下整個流程,是否可以優化,方向有沒有寫錯。
我記得剛開始寫程式碼的時候,某個功能寫到某一步的時候,發現寫不下去了,這個時候只能重新換個思路,推倒之前的程式碼重新寫。這就是沒有提前規劃好思路,急於下筆,導致浪費了很多時間。
2.前端程式碼重構注意事項
拿到設計稿後,規劃好結構,先寫完html程式碼,最後再補充完整的樣式,這樣效率最高。邊寫邊調是很浪費時間的。