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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
MVVM 双向绑定的实现代码
Jun 21 Javascript
JavaScript中AOP的实现与应用
May 06 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可变函数的使用详解
2013/06/14 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
深入浅析Python的类
2018/06/22 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
python实现字符串和字典的转换
2018/09/29 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
社团成立邀请函
2014/01/08 职场文书
军训自我鉴定100字
2014/02/13 职场文书
业务员简历自我评价
2014/03/06 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书