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 本页面传值实现代码
May 17 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python 正则式使用心得
2009/05/07 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
单链表反转python实现代码示例
2018/02/08 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
python中的tcp示例详解
2018/12/09 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Pytorch之parameters的使用
2019/12/31 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
计算机操作自荐信
2013/12/07 职场文书
个人委托书怎么写
2014/09/17 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
导游词范文
2015/02/13 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
python读取mnist数据集方法案例详解
2021/09/04 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server