五种使 JavaScript 代码库更干净的方法

时间：2022-03-24 16:44:52

五种使 JavaScript 代码库更干净的方法

1、使用默认参数代替短路或条件

默认参数通常比短路更干净。

  1. function SomeMethod(paramThatCanBeUndefined) { 
  2.  
  3.    const localValue = paramThatCanBeUndefined || "Default Value"; 
  4.    console.log(localValue) 
  5.    // ... 
  6. } 
  7. SomeMethod() // Default Value 
  8. SomeMethod("SomeValue") // SomeValue 

尝试以下方法：

  1. function SomeMethod( 
  2.   console.log(paramThatCanBeUndefined) 
  3.   // ... 
  4. } 
  5. SomeMethod() // Default Value 
  6. SomeMethod("SomeValue") // SomeValue 

声明：Falsy值，如''，""，false，null，0，和NaN将不会被默认值替代：

  1. function SomeMethod(paramThatCanBeUndefined = "Default Value") {         
  2.   console.log(paramThatCanBeUndefined)   
  3.   // ... 
  4. } 
  5. SomeMethod(null) // will not Default Value, will null Instead 
  6. SomeMethod("SomeValue") // SomeValue 

2、处理多个条件

  1. const conditions = ["Condition 2","Condition String2"]; 
  2. someFunction(str){ 
  3.   if(str.includes("someValue1") || str.includes("someValue2")){ 
  4.     return true 
  5.   }else{ 
  6.     return false 
  7.   } 
  8. } 

一种更干净的方法是：

  1. someFunction(str){ 
  2.    const conditions = ["someValue1","someValue2"]; 
  3.    return conditions.some(condition=>str.includes(condition)); 
  4. } 

3、用动态键值对替换开关(即对象文字)

开关版本(或将开关替换为if / else)：

  1. const UserRole = { 
  2.   ADMIN: "Admin", 
  3.   GENERAL_USER: "GeneralUser", 
  4.   SUPER_ADMIN: "SuperAdmin", 
  5. }; 
  6. function getRoute(userRole = "default role"){ 
  7.  
  8.  
  9.   switch(userRole){ 
  10.     case UserRole.ADMIN: 
  11.       return "/admin" 
  12.     case UserRole.GENERAL_USER: 
  13.         return "/GENERAL_USER" 
  14.     case UserRole.SUPER_ADMIN: 
  15.         return "/superadmin" 
  16.     default: 
  17.       return "/"  
  18.   } 
  19.  
  20. } 
  21. console.log(getRoute(UserRole.ADMIN)) // return "/admin" 
  22. console.log(getRoute("Anything")) // return Default path 
  23. console.log(getRoute()) // return Default path 
  24. console.log(getRoute(null)) // return Default path 
  25.  
  26. // More cases if new arrive 
  27. // You can think if else instead of switch 

动态键值对版本：

  1. const UserRole = { 
  2.    ADMIN: "Admin", 
  3.    GENERAL_USER: "GeneralUser", 
  4.    SUPER_ADMIN: "SuperAdmin", 
  5. }; 
  6. function getRoute(userRole = "default role"){ 
  7.  const appRoute = { 
  8.   [UserRole.ADMIN]: "/admin", 
  9.   [UserRole.GENERAL_USER]: "/user", 
  10.   [UserRole.SUPER_ADMIN]: "/superadmin" 
  11.  }; 
  12.  return appRoute[userRole] || "Default path"; 
  13. } 
  14. console.log(getRoute(UserRole.ADMIN)) // return "/admin" 
  15. console.log(getRoute("Anything")) // return Default path 
  16. console.log(getRoute()) // return Default path 
  17. console.log(getRoute(null)) // return Default path 
  18. // No more switch/if-else here. 
  19. // Easy to Further expansion 

4、避免过多的函数参数

  1. function myFunction(employeeName,jobTitle,yrExp,majorExp){ 
  2.  return `${employeeName} is working as ${jobTitle} with ${yrExp}    years of experience in ${majorExp}` 
  3. } 
  4. //output be like John is working as Project Manager with 12 year of experience in Project Management 
  5. // you can call it via 
  6. console.log(myFunction("John","Project Manager",12,"Project Management")) 
  7. //    ***** PROBLEMS ARE ***** 
  8. // Violation of 'clean code' principle 
  9. // Parameter sequencing is important 
  10. // Unused Params warning if not used 
  11. // Testing need to consider a lot of edge cases. 

这是一种更清洁的方法：

  1. function myFunction({employeeName,jobTitle,yrExp,majorExp}){ 
  2.  return `${employeeName} is working as ${jobTitle} with ${yrExp} years of experience in ${majorExp}` 
  3. } 
  4. //output be like John is working as Project Manager with 12 year of experience in Project Management 
  5. // you can call it via 
  6. const mockTechPeople = { 
  7.   employeeName:"John", 
  8.   jobTitle:"Project Manager", 
  9.   yrExp:12, 
  10.   majorExp:"Project Management" 
  11. } 
  12. console.log(myFunction(mockTechPeople)) 
  13. // ES2015/ES6 destructuring syntax is in action 
  14. // map your desired value to variable you need. 

5、使用Object.assign设置默认对象

这看起来很繁琐：

  1. const someObject = { 
  2.  title: null, 
  3.  subTitle: "Subtitle", 
  4.  buttonColor: null, 
  5.  disabled: true 
  6. }; 
  7. function createOption(someObject) { 
  8.  someObject.title = someObject.title || "Default Title"; 
  9.  someObject.subTitle = someObject.subTitle || "Default Subtitle"; 
  10.  someObject.buttonColor = someObject.buttonColor || "blue"; 
  11.  someObject.disabled = someObject.disabled !== undefined ?  someObject.disabled : true; 
  12.  return someObject 
  13. } 
  14. console.log(createOption(someObject)); 
  15.  
  16. // Output be like  
  17. // {title: 'Default Title', subTitle: 'Subtitle', buttonColor: 'blue', disabled: true} 

这种方法看起来更好：

  1. const someObject = { 
  2.   title: null, 
  3.   subTitle: "Subtitle", 
  4.   buttonColor: null, 
  5.   disabled: true 
  6.  }; 
  7.  function creteOption(someObject) { 
  8.   const newObject = Object.assign({ 
  9.    title: "Default Title", 
  10.    subTitle: "Default Subtitle", 
  11.    buttonColor: "blue", 
  12.    disabled: true 
  13.  },someObject) 
  14.  return newObject 
  15.  } 
  16.  console.log(creteOption(someObject)); 

原文链接：https://www.toutiao.com/a7046985686419014157/

标签：

相关文章