JavaScript重构技巧 — 数组,类名和条件

John Au-Yeung
来源:medium
译者:前端小智
点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

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

在本文中,我们学习如何使用数组来代替条件语句,以及如何使用classList操作类名。

用数组检查替换长表达式

平时开发中,我们可能会写如下的代码:

if (fruit === 'apple' || fruit === 'orange' || fruit === 'grape') {
  //...
}

对于上面,我们可以使用一些数组方法来减少条件表达式的长度。

一种方法是使用数组的include方法:

if (['apple', 'orange' ,'grape'].includes(fruit)) {
  //...
}

如果传递给参数的值包含在数组实例中,include方法返回true,否则返回false

另一种方法是使用数组的some方法:

if (['apple', 'orange', 'grape'].some(a => a === fruit)) {
  //...
}

通过some方法,我们可以检查回调中是否存在具有给定条件的数组元素。

如果存在一个或多个,则返回true,否则返回false

在 DOM 元素中使用 classList 属性

检查 DOM 元素中是否存在类并操作多个类的最简单方法是使用classList属性。

例如,如果要添加多个类,可以使用下面方式:

const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
p.classList.add('baz');

这样,我们可以添加多个类而无需操作字符串。 我们只是获得DOM元素对象的classList属性,然后调用add通过将带有类名的字符串传递到add方法中来添加类。

现在,渲染的DOM元素具有foobarbaz类。

同样,我们可以调用classList属性的remove方法,该方法使用一个带有要删除的类名的字符串来删除该类。

例如,我们可以这样写:

const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
p.classList.add('baz');
p.classList.remove('baz');

要检查 DOM 元素对象中是否存在类名,可以使用contains方法。

例如,我们可以这样写:

const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
const hasBaz = p.classList.contains('baz');

上面判断 p 元素是否包含 baz 类,因为 p 没有包含 baz类,所以返回 false

classList属性还有toggle方法,表示切换类(添加或者移除),例如下面的代码:

const p = document.querySelector('p');
const button = document.querySelector('button');
p.classList.add('foo');
p.classList.add('bar');

button.onclick = () => {
  p.classList.toggle('bar');
}

每点击一次按钮,p 的上 bar 类就会添加或者移除。

clasList属性有一个类似数组的可迭代对象,称为DOMTokenList对象。因此,我们可以使用展开操作符将其转换为数组,将clasList转换为一个带有类名的字符串数组。

例如,我们可以这样写:

const p = document.querySelector('p');
p.classList.add('foo');
p.classList.add('bar');
const classArr = [...p.classList];

上面 classArr 最终值为[“foo”, “bar”]

一旦我们将DOMTokenList转换为一个数组,那么我们就可以使用任何数组方法来操作代码。

总结

带有 || 操作的长条件语句,我们使用对应数组方法来进行优化。

要操作多个类名,我们应该使用作为DOM元素对象一部分的classList属性。通过这种方式,我们可以添加、删除和切换类,而不需要操作字符串并自己将其设置为className属性。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://levelup.gitconnected....


交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

阅读 491

推荐阅读
终身学习者
用户专栏

我要先坚持分享20年,大家来一起见证吧。

39093 人关注
401 篇文章
专栏主页