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

 [[442863]]

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));