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 相关文章推荐
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
javascript整除实现代码
Nov 23 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP使用数组实现队列
2012/02/05 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中的getopt函数使用详解
2015/07/28 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python实现自动整理文件的脚本
2020/12/17 Python
华为的Java面试题
2014/03/07 面试题
Internet体系结构
2014/12/21 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
工作失职检讨书范文
2014/01/16 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
会计学自我鉴定
2014/02/06 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python