Beherrschen Sie JavaScript-Tipps, die Ihnen helfen, die Codequalität zu verbessern

JavascriptIn der Kolumne werden Tipps zur Verbesserung der Qualität des Artikelcodes vorgestellt führt hauptsächlich die folgenden Punkte ein: 🔜 Zweige

Übergabeobjekte Parameter ersetzen zu lange Parameterlisten

Verwenden Sie weniger ternäre Operatoren

Verwenden Sie Kettenaufrufe rational

Zerlegen Sie große Klassen

• Dieser Artikel wird kontinuierlich aktualisiert. Wenn es Mängel gibt, zögern Sie nicht Sie können sie gerne im Kommentarbereich hinzufügen.

• 1. Funktionen verfeinern

Vorteile:
Vermeiden Sie zu große Funktionen.
Unabhängige Funktionen helfen bei der Wiederverwendung von Code.
Unabhängige Funktionen lassen sich leichter überschreiben.
Wenn die unabhängige Funktion einen guten Namen hat, spielt sie selbst die Rolle eines Kommentars.
Die semantische Implementierung mehrerer separater Logikteile in verschiedenen Funktionen kann die Codelogik klar machen und klar erkennen, was jeder Schritt bewirkt.
Codebeispiel:

• Implementieren Sie die Datenerfassung, bedienen Sie dann dom, um Daten anzuzeigen, und fügen Sie schließlich Ereignisse hinzu Eine Funktion enthält einige bedingte Verzweigungsanweisungen im Hauptteil und einige wiederholte Codes sind in diesen bedingten Verzweigungsanweisungen verstreut. Daher ist es erforderlich, Duplikate zusammenzuführen und zu entfernen.

  // 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
  function main() {
      $.ajax.get('/getData').then((res) => {
          const ul = document.getElementById('ul');
          ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join(&#39;\n&#39;);
          const list = document.getElementsByClassName(&#39;li&#39;);
          for (let i = 0; i < list.length; i ++) {
              list[i].addEventListener(&#39;focus&#39;, () => {
                  // do something
              });
          }
      });
  }

3. Bedingte Verzweigungsanweisungen in Funktionen verfeinern

Komplexe bedingte Verzweigungsanweisungen sind ein wichtiger Grund dafür, dass Programme schwer zu lesen und zu verstehen sind und leicht zu einer großen Funktion führen können. Manchmal können bedingte Verzweigungsanweisungen in semantische Funktionen verfeinert werden, um den Code intuitiver und logisch klarer zu machen.

function getData() {
    return $.ajax.get('/getData').then((res) => res.data.list);
}
function showList(list) {
    const ul = document.getElementById('ul');
    ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join(&#39;\n&#39;);
}
function addEvent() {
    const list = document.getElementsByClassName(&#39;li&#39;);
    for (let i = 0; i < list.length; i ++) {
        list[i].addEventListener(&#39;focus&#39;, () => {
            // do something
        });
    }
}
// 逻辑清晰，一眼读懂每一步在做什么，某些提炼出来的函数还可以被复用
async function main() {
    const list = await getData(); // 获取数据
    showList(list); // 显示页面
    addEvent(); // 添加事件
}

4. Sinnvoller Einsatz von Schleifen

Wenn tatsächlich mehrere Codeteile für sich wiederholende Arbeiten verantwortlich sind, können sie durch Schleifen ersetzt werden, um die Codemenge zu verringern.

• // 合并前
  function main( currPage ){
      if ( currPage <= 0 ){
          currPage = 0;
          jump( currPage ); // 跳转
      }else if ( currPage >= totalPage ){
          currPage = totalPage;
          jump( currPage ); // 跳转
      }else{
          jump( currPage ); // 跳转
      }
  };
  // 合并后
  function main( currPage ){
      if ( currPage <= 0 ){
          currPage = 0;
      }else if ( currPage >= totalPage ){
          currPage = totalPage;
      }
      jump( currPage ); // 把jump 函数独立出来
  };

  5. Lassen Sie die Funktion früher beenden, anstatt verschachtelte bedingte Verzweigungen.

• Lassen Sie die Funktion früh mit mehreren Ausgängen zurückkehren und verschachtelte bedingte Verzweigungen ersetzen.

  // 根据不同季节决定打折力度
  function getPrice( price ){
      var date = new Date();
      if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
          return price * 0.8;
      }
      return price;
  };
  // 是否是夏天
  function isSummer(){
      var date = new Date();
      return date.getMonth() >= 6 && date.getMonth() <= 9;
  };
  // 提炼条件后
  function getPrice( price ){
      if ( isSummer() ){
          return price * 0.8;
      }
      return price;
  };

• 6. Übergeben Sie Objektparameter anstelle zu langer Parameterlisten. Wenn die Funktionsparameter zu lang sind, erhöht sich das Fehlerrisiko. Es ist schwierig sicherzustellen, dass die Reihenfolge der Übergabe korrekt ist und die Lesbarkeit beeinträchtigt wird Der Code wird auch schlechter. Versuchen Sie sicherzustellen, dass die Parameter der Funktion nicht zu lang sind. Wenn mehrere Parameter übergeben werden müssen, wird empfohlen, stattdessen Objekte zu verwenden.
  Im Allgemeinen ist es am besten, nicht mehr als 3 Funktionsparameter zu haben

// 判断是什么浏览器
function getBrowser(){
    const str = navigator.userAgent;
    if (str.includes('QQBrowser')) {
return 'qq';
    } else if (str.includes('Chrome')) {
return 'chrome';
    } else if (str.includes('Safari')) {
        return 'safri';
    } else if (str.includes('Firefox')) {
        return 'firefox';
    } else if(explorer.indexOf('Opera') >= 0){
        return 'opera';
    } else if (str.includes('msie')) {
        return 'ie';
    } else {
        return 'other';
    }
};
// 循环判断，将对应关系抽象为配置，更加清晰明确
function getBrowser(){
    const str = navigator.userAgent;
    const list = [
        {key: 'QQBrowser', browser: 'qq'},
        {key: 'Chrome', browser: 'chrome'},
        {key: 'Safari', browser: 'safari'},
        {key: 'Firefox', browser: 'firefox'},
        {key: 'Opera', browser: 'opera'},
        {key: 'msie', browser: 'ie'},
    ];
    for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (str.includes(item.key)) {return item.browser};
    }
    return &#39;other&#39;;
}

• 7. Verwenden Sie weniger ternäre Operatoren

• Ternäre Operatoren haben eine hohe Leistung und weniger Code.
  Aber der ternäre Operator sollte nicht missbraucht werden. Wir sollten ihn in einfachen Logikzweigen verwenden und ihn in komplexen Logikzweigen vermeiden.

function del( obj ){
    var ret;
    if ( !obj.isReadOnly ){ // 不为只读的才能被删除
        if ( obj.isFolder ){ // 如果是文件夹
            ret = deleteFolder( obj );
        }else if ( obj.isFile ){ // 如果是文件
            ret = deleteFile( obj );
        }
    }
    return ret;
};
function del( obj ){
    if ( obj.isReadOnly ){ // 反转if 表达式
        return;
    }
    if ( obj.isFolder ){
        return deleteFolder( obj );
    }
    if ( obj.isFile ){
        return deleteFile( obj );
    }
};

8. Sinnvoller Einsatz von Kettenaufrufen

Vorteile:

Kettenaufrufe sind einfach zu verwenden und erfordern weniger Code.

Nachteile:

Der Nachteil von Kettenaufrufen besteht darin, dass das Debuggen umständlich ist. Wenn wir wissen, dass in einer Kette ein Fehler vorliegt, müssen wir zunächst die Kette zerlegen, bevor wir einige Debugprotokolle hinzufügen oder Haltepunkte hinzufügen. Nur dann können wir Sie finden heraus, wo der Fehler aufgetreten ist.

Wenn die Struktur der Kette relativ stabil ist und sich später nicht leicht ändern lässt, kann der Kettentyp verwendet werden.

function setUserInfo( id, name, address, sex, mobile, qq ){
    console.log( 'id= ' + id );
    console.log( 'name= ' +name );
    console.log( 'address= ' + address );
    console.log( 'sex= ' + sex );
    console.log( 'mobile= ' + mobile );
    console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 );
function setUserInfo( obj ){
    console.log( 'id= ' + obj.id );
    console.log( 'name= ' + obj.name );
    console.log( 'address= ' + obj.address );
    console.log( 'sex= ' + obj.sex );
    console.log( 'mobile= ' + obj.mobile );
    console.log( 'qq= ' + obj.qq );
};
setUserInfo({
    id: 1314,
    name: 'sven',
    address: 'shenzhen',
    sex: 'male',
    mobile: '137********',
    qq: 377876679
});

9. Zerlegen großer Klassen

Die Zerlegung großer Klassen ist der Verfeinerung von Funktionen sehr ähnlich. Wenn die Klasse zu groß ist, ist die Logik unklar und schwer zu verstehen und aufrechtzuerhalten.

Eine vernünftige Zerlegung großer Kategorien kann die Logik der Klasse klar machen und Untermodule können problemlos wiederverwendet werden.

10. Verwenden Sie bitweise Operatoren

Die Leistung von Programmiersprachen zur Berechnung von Multiplikationen und Divisionen ist nicht hoch, aber in einigen Fällen kann die Verwendung bitweiser Operatoren die Leistung von Operationen wie Multiplikationen und Divisionen verbessern.

// 简单逻辑可以使用三目运算符
var global = typeof window !== "undefined" ? window : this;
// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1;

Das obige ist der detaillierte Inhalt vonBeherrschen Sie JavaScript-Tipps, die Ihnen helfen, die Codequalität zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!