前端开发之if-else 的优化过程（七爪源码如何重构）

编写 if-else 是程序员的日常工作 每当我们编写代码时，我们都会检查某事是真还是假 但是编写太多 if-else 条件会使代码不可读 以下是我重构 if-else 块时遵循的一些步骤，下面我们就来聊聊关于前端开发之if-else 的优化过程?接下来我们就一起去了解一下吧!

前端开发之if-else 的优化过程

编写 if-else 是程序员的日常工作。 每当我们编写代码时，我们都会检查某事是真还是假。 但是编写太多 if-else 条件会使代码不可读。 以下是我重构 if-else 块时遵循的一些步骤。

方法调用：

有时基于一个参数，我们不得不做不同的操作。

class SomeClass { public action(status: string) { if (status === ‘draft’) { //Do some operations } else if (status === ‘confirmed’) { //Do some operations } else if (status === ‘payed’) { //Do some operations } else if (status === ‘shipped’) { //Do some operations } } }

我们可以通过根据参数值调用方法来改善这一点。

class SomeClass { public action(status: string) { if (typeof this[status] === ‘undefined’) { //Throw your exception, do some default operations and return } return this[status]() } public draft() { //Do the draft operations } public confirmed() { //Do the confirm operations } public payed() { //Do the payed operations } public shipped() { //Do shipped operations } }

对象字面量：

如果您只需要基于参数返回一个值，那么您可以使用对象字面量

if (operator === ‘=’) { return a === b; } else if (operator === ‘<’) { return a < b; } else if (operator === ‘>’) { return a > b; } else if (operator === ‘>=’) { return a >= b; } else if (operator === ‘<=’) { return a <= b; } else if (operator === ‘like’) { return String(a).toLowerCase().includes(String(b).toLowerCase()); }

重构

action(operator) { const operators = { ‘=’: (a, b) => a === b, ‘<’: (a, b) => a < b, ‘>’: (a, b) => a > b, ‘>=’: (a, b) => a >= b, ‘<=’: (a, b) => a <= b, like: (a, b) => String(a).toLowerCase().includes(String(b).toLowerCase()), }; if (typeof operators[operator] === ‘undefined’) { //Do your operation and return } return operators[operator]; }

注意：我们也可以使用工厂设计模式。 但在大多数情况下，这将是矫枉过正

对于更多这样的内容。 请务必关注我。