重构你的 javascript 代码

近查阅较多js编码指南以及重新阅读了《代码整洁之道》、《重构:改善既有代码的设计》两本经典书籍(强烈建议每隔一段时间看,每次都有新体会),整理出以下几个要点,帮助大家以最小的记忆,重构大部分坏代码。

坏代码判断

坏代码对每个人、每个项目标准都不一样,但以下几点大概率会是坏代码,需要使用重构方法进行代码重构。

重复代码
过长函数
过大的类
过长参数列表

重构方法

  1. 好的命名

好的命名贯穿整个软件编码过程,好命名包括合理使用大小写定义、缩进等。目前前端工程提供很多lint或format工具,能很方便的帮助工程检测和自动化,不清楚的同学可以看看笔者AI前端工具链。不管是变量名、函数名或是类名,一个好的命名会加快自身开发效率以及阅读代码效率,毕竟程序读的次数会比写的次数多的多。读github上优秀源码就知道,有时候只要看函数名就知道作者的意图。

// bad
var yyyymmdstr = moment().format(‘YYYY/MM/DD‘);

// good
var yearMonthDay = moment().format(‘YYYY/MM/DD‘);
// bad
function dateAdd(date, month) {
  // ...
}

let date = new Date();
dateAdd(date, 1) // 很难理解dateAdd(date, 1)是什么意思。笔者注:这里单拎出来举例很简单易懂,但希望在做工程时也时刻谨记这条

// good
function dateAddMonth(date, month) {
  // ...
}

let date = new Date();
dateAddMonth(date, 1);

2. 函数单一职责

软件工程中最重要原则之一。刚毕业不久的开发人员容易出现这个问题,觉得业务逻辑很复杂,没办法再细分成单独函数,写出很长的业务函数。但根据笔者指导小伙伴经验,大多数是临时变量过多,导致看不穿业务逻辑的本质;其实重构过程中一步步分解职责,拆分成细小函数并用恰当的名称命名函数名,能很快理解业务的本质,说不定还能发现潜藏的bug。

// bad
function handle(arr) {
    //数组去重
    let _arr=[],_arrIds=[];
    for(let i=0;i<arr.length;i++){
        if(_arrIds.indexOf(arr[i].id)===-1){
            _arrIds.push(arr[i].id);
            _arr.push(arr[i]);
        }
    }
    //遍历替换
    _arr.map(item=>{
        for(let key in item){
            if(item[key]===‘‘){
                item[key]=‘--‘;
            }
        }
    });
    return _arr;
}

// good
function handle(arr) {
    let filterArr = filterRepeatById(arr)
    return replaceEachItem(filterArr)
}

3. 通过引入解释性变量或函数,使得表达更清晰

// bad
if (platform.toUpperCase().indexOf(‘MAC‘) > -1 && browser.toUpperCase().indexOf(‘IE‘) > -1 && wasInitialized() && resize > 0) {
  // do something
}

// good
let isMacOs = platform.toUpperCase().indexOf(‘MAC‘) > -1
let isIEBrowser = browser.toUpperCase().indexOf(‘IE‘) > -1
let isResize = resize > 0
if (isMacOs && isIEBrowser && wasInitialized() && isResize) {
  // do something
}
// bad
const cityStateRegex = /^(.+)[,\\s]+(.+?)\s*(\d{5})?$/;
saveCityState(ADDRESS.match(cityStateRegex)[1], ADDRESS.match(cityStateRegex)[2]);

// good
var cityStateRegex = /^(.+)[,\\s]+(.+?)\s*(\d{5})?$/;
var match = ADDRESS.match(cityStateRegex)
let [, city, state] = match
saveCityState(city, state);
// bad
if (date.before(SUMMER_START) || date.after(SUMMER_END)) {
  charge = quantity * _winterRate + _winterServiceCharge
} else {
  charge = quantity * _summerRate
}

// good
if (notSummer(date)) {
  charge = winterCharge(quantity)
} else {
  charge = summerCharge(quantity)
}

4. 更少的嵌套,尽早 return

// bad
let getPayAmount = () => {
  let result
  if (_isDead) result = deadAmount()
  else {
    if (_isSeparated) result = separatedAmount()
    else {
      if (_isRetired) result = retiredAmount()
      else result = normalPayAmount()
    }
  }

  return result
}

// good
let payAmount = () => {
  if (_isDead) return deadAmount()
  if (_isSeparated) return separatedAmount()
  if (_isRetired) return retiredAmount()
  return normalPayAmount()
}

5. 以HashMap取代条件表达式

// bad
let getSpeed = type => {
  switch (type) {
    case SPEED_TYPE.AIR:
    return getAirSpeed()
    case SPEED_TYPE.WATER:
    return getWaterSpeed()
    ...
  }
}

// good
let speedMap = {
  [SPEED_TYPE.AIR]: getAirSpeed,
  [SPEED_TYPE.WATER]: getWaterSpeed
}
let getSpeed = type => speedMap[type] && speedMap[type]()

其他

实践以上列举的重构方法,能解决项目中大部分的坏代码,但还有许多重构方法,能让你的代码变得干净整洁易于阅读。

  • 清晰的项目目录结构
  • ES6+语法糖
  • [ ] arrow function
  • [ ] rest
  • [ ] 函数默认参数
  • [ ] async/await
  • [ ] let/const 代替var
  • 常用全部使用const,并字母全部为大写
  • 使用合适的函数名或变量名代替注释
  • 善于利用js中的&& 与 ||
  • 避免‘否定情况’的判断
  • 尽量不写全局函数与变量
  • 采用函数式编程,ES6 Array支持的很好
  • 移除重复的代码
  • 移除注释的代码

原文地址:http://blog.51cto.com/14082686/2346898

时间: 2024-10-12 22:12:52

重构你的 javascript 代码的相关文章

javascript代码的小小重构

写js也有那么段时间了,也看过几本关于js的书,从最初的<锋利的jquery><高性能javasrcipt>到<javascript设计模式>等,虽然看了些书,看到了书中的各种理论与技巧,然而在实际的使用中,真正用到的却是不多. js的面向对象与我所熟悉的c#等语言的面向对象稍有不同,但基本都会有封装,继承,多态等.弱语言天生就具备多态性,没有类型检测的js相对而言可以做出许多强类型语言所做不到的灵活,虽然这不能说完全没有坏处,但这个优势让js代码变得丰富多彩. 程序的

JavaScript进阶之路——认识和使用Promise,重构你的Js代码

一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半年的单身生活.大家一起加油~~ 一直以来,JavaScript处理异步都是以callback的方式,在前端开发领域callback机制几乎深入人心.在设计API的时候,不管是浏览器厂商还是SDK开发商亦或是各种类库的作者,基本上都已经遵循着callback的套路.近几年随着JavaScript开发模式的逐渐成

编写简洁的 JavaScript 代码

作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/223515216来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 避免使用 js 糟粕和鸡肋 这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从"世界上最被误解的语言"变成了"世界上最流行的语言".但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比如

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

[转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:Stoyan Stefanov原文链接:The Essentials of Writing High Quality JavaScript翻译编辑:张鑫旭 //zxx: 俗不可耐的开场白就免了,直接进入翻译内容(其实是因为本文是在太..太..长了,). 教程相关细节主题:JavaScript最佳实践难度

高质量JavaScript代码

才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

那些年被吐槽的JavaScript代码风格你写过多少?老师傅来打通你的任督二脉!

现在写代码比以前好多了,代码的格式都有 eslint.prettier.babel(写新版语法) 这些来保证,然而,技术手段再高端都不能解决代码可读性(代码能否被未来的自己和同事看懂)的问题,因为这个问题只有人自己才能解决.我们写代码要写到下图中左边这样基本上就功德圆满了. (1)变量数量的定义 拒绝:滥用变量 let kpi = 4; // 定义好了之后再也没用过 function example() { var a = 1; var b = 2; var c = a+b; var d = c

实践提高《重构改善既有代码的设计第2版》PDF中文+PDF英文+对比分析

重构是编程的基础,是在不改变外部行为的前提下,有条不紊地改善代码.编程爱好者都知道,Martin Fowler 的<重构:改善既有代码的设计>已经成为全球有经验的程序员手中的利器,既可用来改善既有代码的设计.提升软件的可维护性,又可用于使既有代码更易理解.焕发出新的活力. <重构改善既有代码的设计(第2版)>在第1 版的基础上做了全面修订,反映了编程领域业已发生的许多变化.第2 版中介绍的重构列表更加内聚,并用JavaScript 语言重写了代码范例.此外,第2 版中还新增了与函数

FineUI(专业版)实现百变通知框(无JavaScript代码)!

曾经,有网友抱怨FineUI中连个通知框都没有,当用户进行某个操作成功时给个右下角的提示很不方便. 强大的设置参数 现在,FineUI(专业版)提供了强大的通知框机制,一个小小的通知框居然有多达 16 种不同的设置,可见威力之强大. 下面通过一张图片来简单概括一下: 1. 模式或者非模式对话框2. 消息图标可显示(消息.警告.问题.错误.成功),也可隐藏3. 正在加载图片可显示隐藏4. 消息正文可自定义5. 对话框标题可自定义6. 关闭图标可显示隐藏7. 标题栏可拖动8. 标题栏可隐藏9. 弹出