Maîtrisez les astuces JavaScript pour vous aider à améliorer la qualité du code

javascriptLa colonne présente des conseils pour améliorer la qualité du code de l'article

Recommandé ( gratuit) :javascript(Vidéo)

Introduction

Présentez principalement les points suivants :

• Extraire les fonctions

• Fusionner les fragments conditionnels en double

• Extraire les instructions de branchement conditionnelles en fonctions

• Utilisez les boucles de manière appropriée

• Laissez la fonction se terminer plus tôt au lieu de branches conditionnelles imbriquées

• Passez les paramètres d'objet au lieu de listes de paramètres trop longues

• Utilisez moins d'opérateurs ternaires

• Utilisez les appels en chaîne de manière appropriée

• Décomposez les grandes classes

Cet article sera continuellement mis à jour. S'il y a des lacunes, n'hésitez pas à les ajouter dans la zone de commentaires.

1. Fonctions d'affinage

Avantages :

• Évitez les fonctions trop volumineuses.

• Les fonctions indépendantes facilitent la réutilisation du code.

• Les fonctions indépendantes sont plus faciles à remplacer.

• Si la fonction indépendante a une bonne réputation, elle joue elle-même le rôle d'un commentaire.

• La mise en œuvre sémantique de plusieurs éléments de logique distincts dans différentes fonctions peut rendre la logique du code claire et voir clairement ce que fait chaque étape.

Exemple de code :

implémente l'obtention de données, puis exploite dom pour afficher les données, et enfin ajoute des événements

Avant l'extraction de la fonction

// 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用
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
            });
        }
    });
}

Après le raffinement de la fonction

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(); // 添加事件
}

2. Fusionner les fragments conditionnels en double

S'il y a des instructions de branchement conditionnelles dans un corps de fonction et que des instructions conditionnelles répétées sont dispersées. à l'intérieur du code de ces instructions de branchement conditionnel, il est alors nécessaire de fusionner et de supprimer les doublons.

// 合并前
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 函数独立出来
};

3. Affiner les instructions de branchement conditionnel en fonctions

Les instructions de branchement conditionnelles complexes sont une raison importante pour laquelle les programmes sont difficiles à lire et à comprendre, et peuvent facilement conduire à un fonction énorme. Parfois, les instructions de branchement conditionnel peuvent être affinées en fonctions sémantiques pour rendre le code plus intuitif et logiquement clair.

// 根据不同季节决定打折力度
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;
};

4. Utilisation raisonnable des boucles

Si plusieurs morceaux de code sont réellement responsables d'un travail répétitif, ils peuvent être remplacés par des boucles pour augmenter la quantité de code. plus petit.

// 判断是什么浏览器
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;;
}

5. Laissez la fonction se terminer plus tôt au lieu de branches conditionnelles imbriquées

Laissez la fonction revenir plus tôt avec plusieurs sorties et remplacer les branches conditionnelles imbriquées.

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 );
    }
};

6. Transmettez les paramètres d'objet au lieu de listes de paramètres trop longues

Si les paramètres de fonction sont trop longs, le risque d'erreurs augmentera. que l'ordre de passage est correct. Le problème est que la lisibilité du code deviendra également pire. Essayez de vous assurer que les paramètres de la fonction ne sont pas trop longs. Si plusieurs paramètres doivent être transmis, il est recommandé d'utiliser des objets à la place.

De manière générale, il est préférable de ne pas avoir plus de 3 paramètres de fonction

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
});

7. Utiliser moins d'opérateurs ternaires

Performances des opérateurs ternaires Élevées, moins de code.

Mais il ne faut pas abuser de l'opérateur ternaire. Nous devons l'utiliser dans des branches logiques simples et éviter de l'utiliser dans des branches logiques complexes.

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

8. Utilisation raisonnable des appels en chaîne

Avantages :

Les appels en chaîne sont simples à utiliser et nécessitent moins de code.

Inconvénients :

L'inconvénient des appels en chaîne est qu'il n'est pas pratique de déboguer. Si l'on sait qu'il y a une erreur dans une chaîne, il faut d'abord démonter la chaîne avant d'ajouter du débogage. enregistrez ou ajoutez des points d’arrêt pour localiser l’endroit où l’erreur se produit.

Si la structure de la chaîne est relativement stable et difficile à modifier ultérieurement, le type de chaîne peut être utilisé.

var User = {
    id: null,
    name: null,
    setId: function( id ){
        this.id = id;
        return this;
    },
    setName: function( name ){
        this.name = name;
        return this;
    }
};
User
  .setId( 1314 )
  .setName( 'sven' );
var user = new User();
user.setId( 1314 );
user.setName( 'sven' );

9. Décomposer les grandes classes

La décomposition des grandes classes est très similaire au raffinement des fonctions. Si une classe est trop grande, la logique ne sera pas claire. et difficile à comprendre et à maintenir.

Une décomposition raisonnable de grandes catégories peut rendre la logique de la classe claire et les sous-modules peuvent être facilement réutilisés.

10. Utilisez des opérateurs au niveau du bit

Les performances des langages de programmation pour calculer la multiplication et la division ne sont pas élevées, mais dans certains cas, l'utilisation d'opérateurs au niveau du bit peut améliorer la effectuer des opérations telles que la multiplication et la division.

// 按位右移
var n = parseInt(3 / 2); // 原始
var n = 3 >> 1; // 按位右移

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!