5种方法告诉你如何使JavaScript 代码库更干净
程序员文章站
2024-01-01 20:01:40
目录5、使用object.assign设置默认对象1、使用默认参数代替短路或条件默认参数通常比短路更干净。function somemethod(paramthatcanbeundefined) {...
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种方法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!谢谢大家的阅读