关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程教程 > 技术文章 > 正文

JavaScript重构技巧—函数和类

guanshanw 2023-09-29 21:36 17 浏览 0 评论

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

在本文中,我们将介绍一些与清理 JavaScript 函数和类有关的重构思想。

JavaScript重构技巧—函数和类

不要直接对参数赋值

在使用参数之前,我们应该删除对参数的赋值,并将参数值赋给变量。

例如,我们可能会写这样的代码:

const discount = (subtotal) => {
  if (subtotal > 50) {
    subtotal *= 0.8;
  }
}

对比上面的代码,我们可以这样写:

const discount = (subtotal) => {
  let _subtotal = subtotal;
  if (_subtotal > 50) {
    _subtotal *= 0.8;
  }
}

因为参数有可能是通过值或者引用传递的,如果是引用传递的,直接负值操作,有些结果会让感到困惑。

本例是通过值传递的,但为了清晰起见,我们还是将参数赋值给变量了。

用函数替换方法

我们可以将一个方法变成自己的函数,以便所有类都可以访问它。

例如,我们可能会写这样的代码:

const hello = () => {
  console.log('hello');
}
class Foo {
  hello() {
    console.log('hello');
  }
  //...
}
class Bar {
  hello() {
    console.log('hello');
  }
  //...
}

我们可以将hello方法提取到函数中,如下所示:

const hello = () => {
  console.log('hello');
}
class Foo {
  //...
}
class Bar {
  //...
}

由于hello方法不依赖于this,并且在两个类中都重复,因此我们应将其移至其自己的函数中以避免重复。

替代算法

相对流程式的写法,我们想用一个更清晰的算法来代替,例如,我们可能会写这样的代码:

const doubleAll = (arr) => {
  const results = []
  for (const a of arr) {
    results.push(a * 2);
  }
  return results;
}

对比上面的代码,我们可以这样写:

const doubleAll = (arr) => {
  return arr.map(a => a * 2);
}

通过数组方法替换循环,这样doubleAll函数就会更加简洁。

如果有一种更简单的方法来解决我们的需求,那么我们就应该使用它。

移动方法

在两个类之间,我们可以把其中一个类的方法移动到另一个类中,例如,我们可能会写这样的代码:

class Foo {
  method() {}
}
class Bar {
}

假如,我们在 Bar 类使用 method 的次数更多,那么应该把 method 方法移动到 Bar 类中, Foo 如果需要在直接调用 Bar 类的中方法即可。

class Foo {
}
class Bar {
  method() {}
}

移动字段

除了移动方法外,我们还可以移动字段。例如,我们可能会写这样的代码:

class Foo {
  constructor(foo) {
    this.foo = foo;
  }
}
class Bar {
}

跟移动方法的原因类似,我们有时这么改代码:

class Foo {
}
class Bar {
  constructor(foo) {
    this.foo = foo;
  }
}

我们可以将字段移至最需要的地方

提取类

如果我们的类很复杂并且有多个方法,那么我们可以将额外的方法移到新类中。

例如,我们可能会写这样的代码:

class Person {
  constructor(name, phoneNumber) {
    this.name = name;
    this.phoneNumber = phoneNumber;
  }
  addAreaCode(areaCode) {
    return `${areaCode}-${this.phoneNumber}`
  }
}

我们可以这样重构:

class PhoneNumber {
  constructor(phoneNumber) {
    this.phoneNumber = phoneNumber;
  }
  addAreaCode(areaCode) {
    return `${areaCode}-${this.phoneNumber}`
  }
}
class Person {
  constructor(name, phoneNumber) {
    this.name = name;
    this.phoneNumber = new PhoneNumber(phoneNumber);
  }
}

上面我们将Person类不太相关的方法addAreaCode 移动了自己该处理的类中。

通过这样做,两个类只做一件事,而不是让一个类做多件事。

总结

我们可以从复杂的类中提取代码,这些复杂的类可以将多种功能添加到自己的类中。

此外,我们可以将方法和字段移动到最常用的地方。

将值分配给参数值会造成混淆,因此我们应该在使用它们之前将其分配给变量。


John Au-Yeung 来源:medium 译者:前端小智

原文:https://medium.com/swlh/javascript-refactoring-functions-and-classes-c480f71ef431

相关推荐

七条简单命令让您玩转Git
七条简单命令让您玩转Git

凭借着出色的协作能力、快速部署效果与代码构建辅助作用,Git已经得到越来越多企业用户的青睐。除了用于开发商业及消费级应用之外,众多科学及政府机构也开始尝试使用这...

2023-10-07 12:14 guanshanw

基本完整的关于Git分支branch的操作
基本完整的关于Git分支branch的操作

Git使用背景项目中要用到dev或者其他分支开发完代码,需要将该分支合并到master的需求操作步骤下面以dev名称为lex为分支名为例来操作一遍客户端操作:...

2023-10-07 12:14 guanshanw

Git 进阶(合并与变基)
Git 进阶(合并与变基)

在Git中整合来自不同分支的修改主要有两种方法:合并(merge)以及变基(rebase)合并(merge)merge流程图merge的原理是找到这两个分...

2023-10-07 12:13 guanshanw

Git学习笔记 003 Git进阶功能 part5 合并(第一部分)

合并(merge)是很常用的操作。尤其是一个庞大的很多人参与开发的企业级应用。一般会设定一个主分支,和多个副分支。在副分支开发完成后,合并到主分支中。始终保持主分支是一个完整的,稳定的最新状态的分支。...

非标题党,三张图帮你理解git merge和git rebase的区别
非标题党,三张图帮你理解git merge和git rebase的区别

初始场景:基于正常的开发分支修改几个小bug,然后在合并到开发分支上。gitmergegitcheckoutfeaturegitmergeho...

2023-10-07 12:13 guanshanw

git 初次使用(01)
git 初次使用(01)

先从github上克隆代码下来:使用vscode克隆代码如下图,填写上github仓库地址:vscode有时候克隆代码速度比较慢,可以用命令行方式克隆gitc...

2023-10-07 12:12 guanshanw

Git 远程操作

4.Git远程操作命令说明gitremote远程版本库操作gitfetch从远程获取版本库gitpull下载远程代码并合并gitpush上传远程代码并合并4.1远程版本库操作gitre...

Git常用命令-总结
Git常用命令-总结

创建git用户$gitconfig--globaluser.name"YourName"$gitconfig--globaluser.em...

2023-10-07 12:12 guanshanw

git中删除从别人clone下来项目的git信息,并修改为自己的分支

如果你从别人的Git存储库中克隆了一个项目,并想要删除与该存储库相关的Git信息,并将其修改为你自己的分支,则可以执行以下步骤:使用gitclone命令克隆存储库:gitclone<u...

git系列-回滚和放弃本地修改

回滚历史提交就是reset的功能。这种情况是已经提交远程仓库,需要回滚到之前的提交。gitreset--hardcommitId//注:强制提交后,当前版本后面的提交版本将会删掉!gi...

GIT使用小技巧大全
GIT使用小技巧大全

在大型软件工程的开发过程中,版本控制是无法绕过去的;目前来说,最火的版本控制软件就是GIT了。早两年SVN比较火,不过被大神linus喷了几次后,就日落西山了,...

2023-10-07 12:11 guanshanw

git相关命令-上
git相关命令-上

这些命令都是看了文档后,个人觉得比较有用的一些,展示给大家。回到远程仓库的状态抛弃本地所有的修改,回到远程仓库的状态。gitfetch--all&...

2023-10-07 12:10 guanshanw

Git命令行接口:掌握Git的必备技能
Git命令行接口:掌握Git的必备技能

Git是一款强大的分布式版本控制工具,它支持命令行界面操作。熟练掌握Git命令行接口,是开发者使用Git的必备技能之一。在这篇文章中,我们将介绍Git命令行接口...

2023-10-07 12:10 guanshanw

Git命令详解
Git命令详解

相信各位小伙伴们应该都对git有一些了解,毕竟作为代码管理的神器,就算不是IT行业的小伙伴肯定也或多或少的听说过一些。今天就来和小伙伴们分享一下自己总结的常用命...

2023-10-07 12:10 guanshanw

工作7年收集到的git命令
工作7年收集到的git命令

概念git中的术语解释:仓库也叫版本库(repository)stage:暂存区,add后会存到暂存区,commit后提交到版本库git安装linux...

2023-10-07 12:10 guanshanw

取消回复欢迎 发表评论: