5種方法告訴你如何使JavaScript 代碼庫更幹凈
1、使用默認參數代替短路或條件
默認參數通常比短路更幹凈。
function SomeMethod(paramThatCanBeUndefined) {
const localValue = paramThatCanBeUndefined || "Default Value"; console.log(localValue) // ... } SomeMethod() // Default Value SomeMethod("SomeValue") // SomeValue
嘗試以下方法:
function SomeMethod( console.log(paramThatCanBeUndefined) // ... } SomeMethod() // Default Value SomeMethod("SomeValue") // SomeValue
聲明:Falsy值,如”,””,false,null,0,和NaN將不會被默認值替代:
function SomeMethod(paramThatCanBeUndefined = "Default Value") { console.log(paramThatCanBeUndefined) // ... } SomeMethod(null) // will not Default Value, will null Instead SomeMethod("SomeValue") // SomeValue
2、處理多個條件
const conditions = ["Condition 2","Condition String2"]; someFunction(str){ if(str.includes("someValue1") || str.includes("someValue2")){ return true }else{ return false } }
一種更幹凈的方法是:
someFunction(str){ const conditions = ["someValue1","someValue2"]; return conditions.some(condition=>str.includes(condition)); }
3、用動態鍵值對替換開關(即對象文字)
開關版本(或將開關替換為if / else):
const UserRole = { ADMIN: "Admin", GENERAL_USER: "GeneralUser", SUPER_ADMIN: "SuperAdmin", }; function getRoute(userRole = "default role"){ switch(userRole){ case UserRole.ADMIN: return "/admin" case UserRole.GENERAL_USER: return "/GENERAL_USER" case UserRole.SUPER_ADMIN: return "/superadmin" default: return "/" } } console.log(getRoute(UserRole.ADMIN)) // return "/admin" console.log(getRoute("Anything")) // return Default path console.log(getRoute()) // return Default path console.log(getRoute(null)) // return Default path // More cases if new arrive // You can think if else instead of switch
動態鍵值對版本:
const UserRole = { ADMIN: "Admin", GENERAL_USER: "GeneralUser", SUPER_ADMIN: "SuperAdmin", }; function getRoute(userRole = "default role"){ const appRoute = { [UserRole.ADMIN]: "/admin", [UserRole.GENERAL_USER]: "/user", [UserRole.SUPER_ADMIN]: "/superadmin" }; return appRoute[userRole] || "Default path"; } console.log(getRoute(UserRole.ADMIN)) // return "/admin" console.log(getRoute("Anything")) // return Default path console.log(getRoute()) // return Default path console.log(getRoute(null)) // return Default path // No more switch/if-else here. // Easy to Further expansion
4、避免過多的函數參數
function myFunction(employeeName,jobTitle,yrExp,majorExp){ return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}` } //output be like John is working as Project Manager with 12 year of experience in Project Management // you can call it via console.log(myFunction("John","Project Manager",12,"Project Management")) // ***** PROBLEMS ARE ***** // Violation of 'clean code' principle // Parameter sequencing is important // Unused Params warning if not used // Testing need to consider a lot of edge cases.
這是一種更清潔的方法:
function myFunction({employeeName,jobTitle,yrExp,majorExp}){ return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}` } //output be like John is working as Project Manager with 12 year of experience in Project Management // you can call it via const mockTechPeople = { employeeName:"John", jobTitle:"Project Manager", yrExp:12, majorExp:"Project Management" } console.log(myFunction(mockTechPeople)) // ES2015/ES6 destructuring syntax is in action // map your desired value to variable you need.
5、使用Object.assign設置默認對象
這看起來很繁瑣:
const someObject = { title: null, subTitle: "Subtitle", buttonColor: null, disabled: true }; function createOption(someObject) { someObject.title = someObject.title || "Default Title"; someObject.subTitle = someObject.subTitle || "Default Subtitle"; someObject.buttonColor = someObject.buttonColor || "blue"; someObject.disabled = someObject.disabled !== undefined ? someObject.disabled : true; return someObject } console.log(createOption(someObject)); // Output be like // {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true}
這種方法看起來更好:
const someObject = { title: null, subTitle: "Subtitle", buttonColor: null, disabled: true }; function creteOption(someObject) { const newObject = Object.assign({ title: "Default Title", subTitle: "Default Subtitle", buttonColor: "blue", disabled: true },someObject) return newObject } console.log(creteOption(someObject));
到此這篇關於如何使JavaScript 代碼庫更幹凈 5種方法告訴你的文章就介紹到這瞭,更多相關使 JavaScript 代碼庫更幹凈的5種方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!謝謝大傢的閱讀
推薦閱讀:
- JavaScript簡寫技巧
- 總結分享10 個超棒的 JavaScript 簡寫技巧
- 8個JavaScript條件語句優化小技巧分享
- JavaScript中關於遞歸與回溯的實例詳解
- JavaScript中的Map數據結構詳解