5种方法告诉你如何使JavaScript 代码库更干净


Posted in Javascript onSeptember 15, 2021

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种方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!谢谢大家的阅读

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
vue.js简单配置axios的方法详解
Dec 13 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 #Javascript
javascript函数式编程基础
Sep 15 #Javascript
15个值得收藏的JavaScript函数
Sep 15 #Javascript
详解JavaScript中Arguments对象用途
详细谈谈JavaScript中循环之间的差异
Aug 23 #Javascript
javascript代码简写的几种常用方式汇总
Aug 23 #Javascript
vue使用Google Recaptcha验证的实现示例
You might like
BBS(php & mysql)完整版(四)
2006/10/09 PHP
php5中类的学习
2008/03/28 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
python如何对实例属性进行类型检查
2018/03/20 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
python离线安装外部依赖包的实现
2020/02/13 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
班长岗位职责
2013/11/10 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
本溪关门山导游词
2015/02/09 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Redis RDB技术底层原理详解
2021/09/04 Redis