John Au-Yeung
来源:medium
译者:前端小智
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
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
移动了自己该处理的类中。
通过这样做,两个类只做一件事,而不是让一个类做多件事。
我们可以从复杂的类中提取代码,这些复杂的类可以将多种功能添加到自己的类中。
此外,我们可以将方法和字段移动到最常用的地方。
将值分配给参数值会造成混淆,因此我们应该在使用它们之前将其分配给变量。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://levelup.gitconnected....
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
在使用织梦建站的时候如果是中英文版本的网站,分页就需要对应英文地址,该怎么...
作者:Ashish Lahoti 译者:前端小智 来源:codingnconcept 点赞再看 ,微信搜索...
Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0...
作者:Ahmad shaded 译者:前端小智 来源:sitepoint 点赞再看,养成习惯 本文 G...
问题背景 假设有这样的一个需求:判断某一朵花是不是鸢尾花。我们知道不同品种的...
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。 以下实例均是响应式的。 ...
前言 笔者最近写了本关于可视化搭建方向的掘进小册,直接放链接: https://jueji...
链接可以制作 WML 卡片来显示 WML 的锚功能,图像可以制作 WML 卡片来显示图像. ...
有时候我们已经有了网站项目,想要导入到Dreamweaver里面,该怎么导入到dw中呢?...
摩尔定律不再适用 从2004年伟创力(Flextronics)收购 Frog 设计公司开始,过去 10...