Ausführliche Erklärung, wie JavaScript die Funktionskomplexität reduziert

JavaScript ist eine leicht zu erlernende Programmiersprache und es ist einfach, Programme zu schreiben, die ausgeführt werden und etwas tun. Allerdings ist es schwierig, sauberen JavaScript-Code zu schreiben.

In diesem Artikel schauen wir uns an, wie man die Funktionskomplexität reduzieren kann.

Verschieben Sie den doppelten Code an dieselbe Stelle

Wir sollten den doppelten Code extrahieren und an derselben Stelle zusammenführen, sodass wir nur eine Stelle ändern müssen, wenn etwas geändert werden muss. und gleichzeitig verringert es auch die Wahrscheinlichkeit, Fehler zu machen.

Angenommen, wir können einfach den folgenden Code schreiben:

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

Der obige Code enthält zwei document.querySelector(„p“). Wir können ihn so optimieren und document einfügen. querySelector ("p") in eine Variable und verwenden Sie diese Variable dann wie folgt: document.querySelector(“p”)，我们可以这样优化，把document.querySelector(“p”) 保存到一个变量中，然后使用该变量即可，如下所示：

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

这样我们就不必写长长的document.querySelector("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语句替换为卫语句，因为它们可以执行与嵌套的ifrrreee

Auf diese Weise müssen wir nicht den langen document.querySelector("p")-Code schreiben >, schreibe einfach eine Variable p.

Ein weiteres häufiges Beispiel für Zahlen im Code. Es ist schwer zu erkennen, was sie bedeuten, wenn man sich nur die Zahlen ansieht: rrreee

Wir wissen nicht, was die drei oben genannten bedeuten, also können wir den doppelten Code entfernen und einen geeigneten verwenden one Der Variablenname wird wie folgt ausgedrückt: 🎜rrreee🎜Damit wir wissen, dass der Wert von numPeople 1 ist, was die Anzahl der Personen darstellt. 🎜🎜🎜🎜Vereinfachte Funktionen🎜🎜🎜🎜Die Funktion sollte so einfach wie möglich sein, vorzugsweise nur eine Sache tun, und die Anzahl der Zeilen sollte nicht zu groß sein, höchstens 30 Zeilen. 🎜🎜Wir sollten weder ES5-Klassen noch 🎜IIFE🎜 für Module oder Blöcke verwenden. Stattdessen sollten wir eine Klassensyntax verwenden, bei der wir mehrere Instanzmethoden der Klasse in eine Klasse einbinden können. Dadurch wird die Größe der Funktion erheblich reduziert. 🎜🎜Solange wir Funktionen definieren können, sollten Funktionen reine Funktionen sein, was bedeutet, dass sie keine Nebenwirkungen haben sollten. 🎜🎜Die beste einfache Funktion lautet beispielsweise wie folgt: 🎜rrreee🎜Die obige Funktion hat keine Nebenwirkungen, da sie keine Variablen außerhalb der Funktion ändert. Darüber hinaus handelt es sich auch um eine reine Funktion. Bei derselben Eingabe ist auch das Ausgabeergebnis dasselbe. 🎜🎜🎜🎜Verwenden Sie Schutzanweisungen anstelle verschachtelter Anweisungen🎜🎜🎜🎜Definition und Verwendung von Schutzanweisungen🎜

🎜Eine Schutzanweisung dient dazu, einen komplexen bedingten Ausdruck in mehrere bedingte Ausdrücke aufzuteilen, z Mehrere Ebenen von If-Then-Else-Anweisungen, die in mehrere If-Anweisungen umgewandelt werden, um ihre Logik zu implementieren werden einfach mit einem Fehler zurückgegeben. In diesem Fall sollte der mit einem Fehler zurückgegebene Zweig sofort zurückgegeben werden, wenn die Bedingung wahr ist. Solche separaten Prüfungen können unsere Augen von der Ausnahmebehandlung und dem Fokus befreien auf dem normalen Verarbeitungscode. 🎜🎜Zum Beispiel könnten wir Code wie diesen schreiben: 🎜rrreee🎜Wir können so optimieren🎜rrreee🎜Im zweiten Beispiel wird ein Fehler ausgegeben, wenn jeder Parameter keine Zeichenfolge ist, wodurch der verschachtelte if eliminiert wird. code>-Anweisung. 🎜🎜Dadurch werden verschachtelte <code>if-Anweisungen auf nicht verschachtelte if-Anweisungen reduziert, während dieselbe Operation ausgeführt wird. 🎜🎜Nester sind schwer zu lesen und zu verstehen, wir sollten sie überall loswerden. 🎜🎜🎜🎜 Zusammenfassung 🎜🎜🎜🎜Doppelter Code ist immer schlecht. Wir sollten uns immer an den Grundsatz „Don’t Repeat Yourself (DRY)“ erinnern. 🎜🎜Darüber hinaus sollten einige neue Methoden zum Einsatz kommen, um die Schreibmethoden in der ES5-Ära zu ersetzen. 🎜🎜Schließlich sollten verschachtelte if-Anweisungen durch Guard-Anweisungen ersetzt werden, da sie die gleichen Prüfungen durchführen können wie verschachtelte if-Anweisungen, was einfacher zu lesen ist. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie JavaScript die Funktionskomplexität reduziert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!