推薦(免費):(視訊)
簡介
主要介紹以下幾點:
提煉函數
合併重複的條件片段
把條件分支語句提煉成函數
合理使用迴圈
提前讓函數退出代替巢狀條件分支
傳遞物件引數代替過長的參數列
少用三目運運算元
合理使用鏈式呼叫
分解大型類
本文會不斷更新,不足之處歡迎評論區補充。
1. 提煉函數
好處:
避免出現超大函數。
獨立出來的函數有助於程式碼複用。
獨立出來的函數更容易被覆寫。
獨立出來的函數如果擁有一個良好的命名,它本身就起到了註釋的作用。
語意化將多段分離的邏輯放在不同的函數中實現,可以使程式碼邏輯清晰,清楚的看到每一步在做什麼。
程式碼舉例:
實現獲取資料,然後操作dom顯示資料,最後新增事件
函數提煉前
// 邏輯都寫在一起,需要將所有邏輯看完才知道這段程式碼是幹嘛的,區域性邏輯無法複用 function main() { $.ajax.get('/getData').then((res) => { const ul = document.getElementById('ul'); ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n'); const list = document.getElementsByClassName('li'); for (let i = 0; i < list.length; i ++) { list[i].addEventListener('focus', () => { // do something }); } }); }
函數提煉後
function getData() { return $.ajax.get('/getData').then((res) => res.data.list); } function showList(list) { const ul = document.getElementById('ul'); ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join('\n'); } function addEvent() { const list = document.getElementsByClassName('li'); for (let i = 0; i < list.length; i ++) { list[i].addEventListener('focus', () => { // do something }); } } // 邏輯清晰,一眼讀懂每一步在做什麼,某些提煉出來的函數還可以被複用 async function main() { const list = await getData(); // 獲取資料 showList(list); // 顯示頁面 addEvent(); // 新增事件 }
2. 合併重複的條件片段
如果一個函數體內有一些條件分支語句,而這些條件分支語句內部散佈了一些重複的程式碼,那麼就有必要進行合併去重工作。
// 合併前 function main( currPage ){ if ( currPage <= 0 ){ currPage = 0; jump( currPage ); // 跳轉 }else if ( currPage >= totalPage ){ currPage = totalPage; jump( currPage ); // 跳轉 }else{ jump( currPage ); // 跳轉 } }; // 合併後 function main( currPage ){ if ( currPage <= 0 ){ currPage = 0; }else if ( currPage >= totalPage ){ currPage = totalPage; } jump( currPage ); // 把jump 函數獨立出來 };
3. 把條件分支語句提煉成函數
複雜的條件分支語句是導致程式難以閱讀和理解的重要原因,而且容易導致一個龐大的函數。有時可以將條件分支語句提煉成語意化的函數,使程式碼更加直觀,邏輯清晰。
// 根據不同季節決定打折力度 function getPrice( price ){ var date = new Date(); if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天 return price * 0.8; } return price; }; // 是否是夏天 function isSummer(){ var date = new Date(); return date.getMonth() >= 6 && date.getMonth() <= 9; }; // 提煉條件後 function getPrice( price ){ if ( isSummer() ){ return price * 0.8; } return price; };
4. 合理使用迴圈
如果多段程式碼實際上負責的是一些重複性的工作,那麼可以用迴圈代替,使程式碼量更少。
// 判斷是什麼瀏覽器 function getBrowser(){ const str = navigator.userAgent; if (str.includes('QQBrowser')) { return 'qq'; } else if (str.includes('Chrome')) { return 'chrome'; } else if (str.includes('Safari')) { return 'safri'; } else if (str.includes('Firefox')) { return 'firefox'; } else if(explorer.indexOf('Opera') >= 0){ return 'opera'; } else if (str.includes('msie')) { return 'ie'; } else { return 'other'; } }; // 迴圈判斷,將對應關係抽象為設定,更加清晰明確 function getBrowser(){ const str = navigator.userAgent; const list = [ {key: 'QQBrowser', browser: 'qq'}, {key: 'Chrome', browser: 'chrome'}, {key: 'Safari', browser: 'safari'}, {key: 'Firefox', browser: 'firefox'}, {key: 'Opera', browser: 'opera'}, {key: 'msie', browser: 'ie'}, ]; for (let i = 0; i < list.length; i++) { const item = list[i]; if (str.includes(item.key)) {return item.browser}; } return 'other'; }
5. 提前讓函數退出代替巢狀條件分支
讓函數變成多出口提前返回,替換巢狀條件分支。
function del( obj ){ var ret; if ( !obj.isReadOnly ){ // 不為唯讀的才能被刪除 if ( obj.isFolder ){ // 如果是資料夾 ret = deleteFolder( obj ); }else if ( obj.isFile ){ // 如果是檔案 ret = deleteFile( obj ); } } return ret; }; function del( obj ){ if ( obj.isReadOnly ){ // 反轉if 表示式 return; } if ( obj.isFolder ){ return deleteFolder( obj ); } if ( obj.isFile ){ return deleteFile( obj ); } };
6. 傳遞物件引數代替過長的參數列
函數引數過長那麼就增加出錯的風險,想保證傳遞的順序正確就是一件麻煩的事,程式碼可讀性也會變差,儘量保證函數的引數不會太長。如果必須傳遞多個引數的話,建議使用物件代替。
一般來說,函數引數最好不要超過3個
function setUserInfo( id, name, address, sex, mobile, qq ){ console.log( 'id= ' + id ); console.log( 'name= ' +name ); console.log( 'address= ' + address ); console.log( 'sex= ' + sex ); console.log( 'mobile= ' + mobile ); console.log( 'qq= ' + qq ); }; setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 ); function setUserInfo( obj ){ console.log( 'id= ' + obj.id ); console.log( 'name= ' + obj.name ); console.log( 'address= ' + obj.address ); console.log( 'sex= ' + obj.sex ); console.log( 'mobile= ' + obj.mobile ); console.log( 'qq= ' + obj.qq ); }; setUserInfo({ id: 1314, name: 'sven', address: 'shenzhen', sex: 'male', mobile: '137********', qq: 377876679 });
7. 少用三目運運算元
三目運運算元效能高,程式碼量少。
但不應該濫用三目運運算元,我們應該在簡單邏輯分支使用,在複雜邏輯分支避免使用。
// 簡單邏輯可以使用三目運運算元 var global = typeof window !== "undefined" ? window : this; // 複雜邏輯不適合使用 var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;
8. 合理使用鏈式呼叫
優點:
鏈式呼叫使用簡單,程式碼量少。
缺點:
鏈式呼叫帶來的壞處就是在偵錯不方便,如果我們知道一條鏈中有錯誤出現,必須得先把這條鏈拆開才能加上一些偵錯 log 或者增加斷點,這樣才能定位錯誤出現的地方。
如果該鏈條的結構相對穩定,後期不易發生修改,可以使用鏈式。
var User = { id: null, name: null, setId: function( id ){ this.id = id; return this; }, setName: function( name ){ this.name = name; return this; } }; User .setId( 1314 ) .setName( 'sven' ); var user = new User(); user.setId( 1314 ); user.setName( 'sven' );
9. 分解大型類
大型類的分解和函數的提煉很像,類太大會出現邏輯不清晰,難以理解和維護的問題。
合理的大類分解可以使類的邏輯清晰,且子模組可以方便複用。
10. 活用位元運算符
程式語言計算乘除的效能都不高,但是某些情況使用位元運算符可以提升乘除等運算的效能。
// 按位元右移 var n = parseInt(3 / 2); // 原始 var n = 3 >> 1; // 按位元右移
以上就是掌握javascript 小技巧幫你提升程式碼品質的詳細內容,更多請關注TW511.COM其它相關文章!