写点什么

消除 JavaScript 的一些“异味”

作者:掘金安东尼
  • 2022 年 9 月 07 日
    广东
  • 本文字数:1866 字

    阅读完需:约 6 分钟

打开 IDE,来找一些有“异味”的代码,就像打开冰箱,找到一些发臭的食物,再将它们清理出去。虽然有“异味”的代码,不处理,也许没那么要紧,但是这种“异味”,是“糜烂”、进而影响整个冰箱食物的预警。


上代码:


let a = "start";let b;
for(let i = 0; i < 5; i++) { b += a[i].toUpperCase();}
复制代码


会不会觉得有点味道?把每个字母编程大写,用另外一个值去承接,整个暂且不论,更扯的是循环的次数 5 是被写死的,这样没有任何可扩展可言。


先稍微把这点“异味”处理下先:


let a = "start";let b;
for(let i = 0; i < a.length; i++) { b += a[i].toUpperCase()}
复制代码


然后尽量省去这个中间值,用函数封装一个通用方法;


let a='start'let upperCaseStrFn=(str)=>{    return str.split("").map(i=>i.toUpperCase()).join("")}console.log(upperCaseStrFn(a)) // START
复制代码


这样,异味就被消除啦。


看到 upperCaseStrFn,不需要知道它内部的实现,就知道这个函数是把一个字符串每个字母变成大写的方法,这就是可读性;同时,这个函数不止能处理 a 变量,还能处理其它变成,或者在函数内部再进行扩展,就是可扩展性


关于可读性的另外一个问题:


let total_cost = order.getCost() * 1.52;
复制代码


看到这一行代码,噢,它是用来计算总数的,订单的花费,乘以 1.52...不对!这个 1.52 是什么?


解决异味:


const MADRID_TAX_RATE = 1.52;
let total_cost = order.getCost() * MADRID_TAX_RATE;
复制代码


噢噢,这个 1.52 是 MADRID 税率。


将数据声明和数据处理分开,就是低耦合、高内聚的代码,修改起来也方便,改一处,多处生效;


还有?


单一职责原则 可以有效去除“异味”。


把功能拆分成乐高积木,拆的越精细、紧凑,可组合的灵活性就越大。每个积木都有着单一的功能。


function saveUser(name: string, address: string, birthdate: Date, phone_number: string) {  //...  let diff_ms = Date.now() - birthdate.getTime();  let age_dt = new Date(diff_ms);  let age: number = Math.abs(age_dt.getUTCFullYear() - 1970);
///....}
复制代码


优化后:


function saveUser(usr: User) {                                                  //...  let age: number = usr.getAge();  //...}
复制代码


优化后的代码虽然没全部展示,但是关键部分更易读,不是吗?不需要知道 getAge() 的具体做了什么,只要知道它是做什么的就行。因为你的目光是聚焦在 saveUser() 这个方法上。


还有,常常会遇到这类代码:


function configureChristmasTreeLights(tree, mode) {    switch(mode) {    'rgb_blinking':       tree.setColors('rgb', {        'blinking': true,        'frequency': 10      })      break;    'rgb_fixed':      tree.setColors('rgb', {        'blinking': false      })      break;    'white_smooth':      tree.setColor('white', {        'blinking': true,        'frequency': 1      })      break;    default:      throw new Error("Unrecognized mode used")      break;  }}
复制代码


switch 函数体太大了,并且还有可能变得更大。所以,要消除这个“异味”:


/// Helper functionsfunction blinkingRGBLights(tree) {  tree.setColor('rgb', {    'blinking': true,    'frequency': 10  })}
function fixedRGBLights(tree){ tree.setColor('rgb', { 'blinking': false})}
function whiteSmoothLights(tree) { tree.setColor('white', { 'blinking': true, 'frequency': 1 })}
//The actual functionfunction configureChristmasTreeLights(tree, mode) { const mapping = { 'rgb_blinking': blinkingRGBLights, 'rgb_fixed': fixedRGBLights, 'white_smooth': whiteSmoothLights } try { mapping[mode](tree); } catch (e) { throw new Error("Unrecognized mode used") }}
复制代码


采用 map 的方式可以很好的处理多个判断条件的局面。本瓜对此点深有体会:


if(x===a){   res=A}else if(x===b){   res=B}else if(x===c){   res=C}else if(x===d){    //...}
复制代码


改写为:


let mapRes={    a:A,    b:B,    c:C,    //...}res=mapRes[x]
复制代码


还有:


重复的代码需要封装抽象,这会帮助你的同事,帮助他们用你的方法,是一种“善举”,其实就相当于在团队小范围内在造轮子造福大家了。


小感:


把数据声明和数据处理分离开来,真的很重要!!


让我们一起来为 JavaScript 消除异味吧~~


我是掘金安东尼,输出暴露输入,技术洞见生活,再会~

发布于: 刚刚阅读数: 3
用户头像

安东尼陪你度过漫长编程岁月~ 2022.07.14 加入

社会我瓜哥,人狠话不多😎 微信 anthony1453,加我交个朋友😎 正联合【机械工业出版社】出版《程序员成长手册》,敬请期待😎 真正的大师,永远怀着一颗学徒的心(易)😎

评论

发布
暂无评论
消除 JavaScript 的一些“异味”_JavaScript_掘金安东尼_InfoQ写作社区