知识屋：更实用的电脑技术知识网站
知识屋 手机游戏 手机软件 电脑软件 最近更新 手机端
猜您
  • 游戏
  • APP
  • 软件
  • 文章
冒险村物语 英雄无敌3塔防 驾考家园手游 我的小家破解版 业力汉堡商店
cah职工e家 智能安全管控 易慧 iedukids学习中 闪背
亿彩文本文件批 文件自动分类器（ Win8激活信息备
LOL手游国服和外 LOL手游日服怎么 怎么注册LOL手游 2020双十一活动
所在位置：首页 > 编程技术  > C语言编程

JavaScript重构技巧让别人看懂你写的代码

发表时间：2022-03-21来源：网络

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

在本文中，我们将研究如何「降低函数复杂度」。

将重复的代码移到同个位置

我们应该将重复的代码提取出来，合并放到同个位置，这样当有需要修改的，我们只需要改一个地方即可，同时也减少犯错率。

假设我们有可能很写出下面的代码：

const button = document.('button');
let toggled = true;
button.addEventListener('click', () => {
toggled = !toggled;
if (toggled) {
document.("p").style.color = 'red';
} else {
document.("p").style.color = 'green';
}
})

上面代码中有两个document.(“p”)，我们可以这样优化，把document.(“p”) 保存到一个变量中，然后使用该变量即可，如下所示：

const button = document.('button');
const p = document.("p");
let toggled = true;
button.addEventListener('click', () => {
toggled = !toggled;
if (toggled) {
p.style.color = 'red';
} else {
p.style.color = 'green';
}
}

这样我们就不必写长长的document.("p")，只需写个变量 p 就行了。

另一个常见的代码实例中的数字，光看数字我们很难知道其表示的含义：

let x = 1;
let y = 1;
let z = 1;

我们不知道上面这三个一表示什么，所以我们可以移除重复的代码，并用一个合适的变量名来表示，如下所示：

const numPeople = 1;
let x = numPeople;
let y = numPeople;
let z = numPeople;

这样我们就可以知道 numPeople 的值为1，其表示的人的数量。

简化函数

函数应尽可能简单，最好只做一件事，行数也不要太多，最多不能超过 30 行。

我们不应该使用 ES5 类的方式，也不应将「IIFE」用于模块或块。相反，我们应该使用类语法，其中可以在类中包含该类的多个实例方法。这会大大减少了函数的体量。

同样，只要我们可以定义函数，函数就应该是纯函数，这意味着他们不应该产生副作用。

例如，最好的简单函数是如下：

const add = (a, b) => a + b;

上面的函数没有任何副作用，因为它不会在函数外部修改任何变量。另外，它也是一个纯函数，对于相同的输入，输出的结果也都一样的。

使用卫语句代替嵌套语句

卫语句的定义用法

❝

卫语句就是把复杂的条件表达式拆分成多个条件表达式，比如一个很复杂的表达式，嵌套了好几层的if - then-else语句，转换为多个if语句，实现它的逻辑，这多条的if语句就是卫语句

❞

有时候条件式可能出现在嵌套n次才能真正执行，其他分支只是简单报错返回的情况，对于这种情况，应该单独检查报错返回的分支，当条件为真时立即返回，这样的单独检查就是卫语句(guard clauses).卫语句可以把我们的视线从异常处理中解放出来，集中精力到正常处理的代码中。

比如我们可能会编写如下的代码 ：

const greet = (firstName, lastName, greeting) => {
if (typeof firstName === 'string') {
if (typeof lastName === 'string') {
if (typeof greeting === 'string') {
return `${greeting}, ${firstName}${lastName}`;
}
}
}
}

我们可以这样优化

const greet = (firstName, lastName, greeting) => {
if (typeof firstName !== 'string') {
throw new Error('first name is required');
}
if (typeof lastName !== 'string') {
throw new Error('last name is required');
}
if (typeof greeting !== 'string') {
throw new Error('greeting is required');
}
return `${greeting}, ${firstName}${lastName}`;
}

在第二个示例中，如果每个参数都不是字符串，则抛出错误，从而消除了嵌套的if语句。

这将嵌套的if语句在执行相同操作时减少为没有嵌套的if语句。

嵌套很难阅读和理解，我们应该在所有地方都摆脱它们。

总结

重复的代码总是不好的。我们应该永远记住“不要重复自己(DRY)”的原则。

另外应该使用一些新的方式来代替 ES5 时代的写法。

最后，应将嵌套的if语句替换为卫语句，因为它们可以执行与嵌套的if语句相同的检查，这样有利于阅读。


收藏

上一篇：新手入门之 如何正确快速查java api？

下一篇：怎样零基础自学java？

知识阅读

软件推荐

更多 >

游戏推荐

更多 >

精选栏目

热门推荐

  • 人气文章
  • 最新文章
  • 下载排行榜
  • 热门排行榜

手机游戏

手机软件

电脑软件

猜你喜欢

城市 智能 家居 福利 美女 壁纸 截图 照片 修图 新闻 八卦 免费 农业 司机 会议 物流 资源 拍摄 下载 美图 手机 宠物 计算机 服务 汽车 二手 程序员 短视频 播放器 影视 动漫 停车 江浙沪 地铁 公交 抖音 舞蹈 征信 母婴 低息 分期 钱包 区块链 360 投注 彩票 借贷 网贷 借钱 抢票 吃货 购物 WIFI 导航 运动 健康

本站所有软件来自互联网，版权归原著所有。如有侵权，敬请来信告知，我们将及时撤销。

知识屋 www.zhishiwu.com 更实用的电脑技术知识网站

苏ICP备14019037号-7

联系我们