Maîtriser les normes de codage JavaScript de WordPress : Un guide complet pour les développeurs

Les normes de codage JavaScript dans WordPress sont cruciales pour maintenir la cohérence, la lisibilité et un code de haute qualité, que vous développiez des thèmes, des plugins ou que vous contribuiez au noyau. Ces normes garantissent que votre JavaScript s'intègre de manière transparente avec le PHP, le HTML et le CSS et facilitent la collaboration entre différentes équipes. Nous allons nous plonger dans ces normes, en les décomposant à l'aide d'exemples pratiques afin de les rendre accessibles à tous les développeurs.

Vue d'ensemble : Construire sur les fondations de jQuery

Les normes de codage JavaScript de WordPress sont dérivées de la norme Guide de style JavaScript jQuery, introduit à l'origine en 2012. Bien qu'initialement destiné aux projets jQuery, son succès a conduit à une adoption généralisée au-delà du cadre. Cependant, WordPress a son propre point de vue sur ces normes, qui diffère légèrement du guide original de jQuery.

Les principales différences sont les suivantes :

1. Citations simples pour cordes: WordPress préfère les guillemets simples pour les déclarations de chaînes de caractères.
2. Indentation de l'énoncé du cas: Dans WordPress, les déclarations de cas sont indentées à l'intérieur d'un bloc d'interrupteurs.
3. Fonction cohérente Indentation: Tout le contenu d'une fonction est indenté, y compris les fermetures de fichiers.
4. Limite de longueur de ligne assouplie: Alors que jQuery impose une limite de 100 caractères par ligne, WordPress l'encourage mais ne l'applique pas strictement.

Principaux domaines couverts par les normes JavaScript de WordPress

1.Code Formatage et indentation

Une mise en forme et une indentation correctes sont essentielles à la lisibilité et à la maintenance du code. La norme WordPress met l'accent sur :

• Indentation: Utilisation onglets au lieu d'espaces pour l'indentation. Chaque bloc logique doit être indenté pour faciliter la lecture. Les tabulations aident à maintenir la cohérence, en particulier lorsque différents développeurs travaillent sur la même base de code.

( function ( $ ) {
    // Les expressions en bloc sont indentées
    function doSomething() {
        // Le code de la fonction est également indenté
        console.log('Doing something') ;
    }
} )( jQuery ) ;

Dans l'exemple ci-dessus, la fonction doSomething() et son contenu sont indentés pour montrer qu'ils font partie de l'IIFE.

Dans l'exemple ci-dessus, la fonction doSomething() et son contenu sont indentés pour montrer qu'ils font partie de l'IIFE.

var html = '<p>La somme de ' + a + ' et de ' + b + ' est ' + ( a + b ) + '</p>' ;

éléments
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' ) ;

Ici, chaque méthode de la chaîne commence sur une nouvelle ligne, ce qui rend la séquence d'opérations plus lisible.

2. Espacement des objets et des tableaux

Objets et tableaux: Un espacement cohérent est essentiel pour la clarté visuelle, en particulier lorsque vous travaillez avec des structures de données complexes. Suivez les lignes directrices suivantes en matière d'espacement :

// Façon correcte de déclarer des objets
var obj = {
    name : 'John',
    âge : 27,
    height : 179
} ;

// Façon incorrecte de déclarer des objets (ne pas condenser les propriétés)
var obj = { name : 'John', age : 27, height : 179 } ;

// Les tableaux doivent également respecter un espacement cohérent
var array = [ 1, 2, 3 ] ;

L'espacement correct des objets et des tableaux garantit que votre structure de données est visuellement distincte, ce qui est utile lors du débogage ou de la révision du code.

3. Point-virgule

Utilisez toujours points-virgules pour terminer les instructions. L'omission de points-virgules peut entraîner des problèmes inattendus lors de l'insertion automatique de points-virgules (ASI) par JavaScript.

var array = [ 1, 2 ] ;
console.log('Hello, world!') ;

Même si JavaScript peut parfois déduire les points-virgules, il est préférable de les inclure explicitement pour éviter toute ambiguïté, en particulier lorsque vous combinez plusieurs extraits de code ou que vous participez à des projets d'équipe.

4. Déclarations de variables : constante, laissezet var

• Utiliser constante pour les variables dont la valeur ne changera pas. Cela permet d'éviter les réaffectations accidentelles et d'indiquer clairement vos intentions aux autres développeurs.
• Utiliser laissez pour les variables dont la valeur peut changer dans un périmètre donné. Cela permet de s'assurer que la variable a une portée en bloc, ce qui évite les problèmes liés à l'accaparement.
• **Avoid **var à moins que cela ne soit nécessaire, car il a une portée fonctionnelle, ce qui peut entraîner des comportements non souhaités en raison de l'hissage.

const userName = 'Alice' ; // Utilisez const pour les valeurs fixes
let userAge = 30 ; // Utilisez let pour les valeurs susceptibles de changer

L'utilisation constante et laissez contribue de manière appropriée à améliorer la sécurité du code et facilite le raisonnement sur les durées de vie des variables.

5. Conventions d'appellation

Des conventions de dénomination cohérentes rendent le code plus lisible et plus facile à maintenir :

• CamelCase: Utilisation camelCase pour les noms de variables et de fonctions. Par exemple, ID utilisateur ou fetchUserData.
• Classes: Utilisation UpperCamelCase (PascalCase) pour les noms de classes.
• Constantes: Utilisation CAS_DE_SERPENT_CRIANT pour les constantes.

const MAX_CONNECTIONS = 5 ;
class UserProfile {
    constructor( name ) {
        this.name = name ;
    }
}

CamelCase pour les variables et les fonctions permet de les différencier des classes et des constantes, ce qui contribue à une meilleure clarté du code.

6. Contrôles de l'égalité

Utilisez toujours égalité/inégalité stricte (===******** et !==) au lieu de vérifications abstraites (== et !=). Cela permet d'éviter des types de coercition inattendus qui peuvent entraîner des bogues.

if ( name === 'John' ) {
    // Contrôle strict de l'égalité
    console.log('Hello, John!') ;
}

if ( result !== false ) {
    // Vérification de l'inégalité stricte
    console.log('Resultat n'est pas faux') ;
}

L'égalité stricte garantit que le type et la valeur sont comparés, ce qui rend votre code plus prévisible.

7. Traitement des cordes

Utiliser guillemets simples pour les chaînes de caractères, sauf si la chaîne contient un guillemet simple, auquel cas il convient d'utiliser des guillemets doubles pour éviter l'échappement.

var greeting = 'Hello world!' ;
var statement = "C'est une belle journée" ;

Cette règle assure la cohérence de la base de code, ce qui permet aux développeurs de suivre plus facilement les mêmes pratiques.

8. Déclarations de commutation

Les instructions de commutation doivent avoir un pause pour chaque cas (sauf pour la valeur par défaut) afin d'éviter les erreurs de transposition. En outre, indenter les déclarations de cas doit se trouver dans un seul onglet du commutateur.

switch ( event.keyCode ) {
    case $.ui.keyCode.ENTER :
    case $.ui.keyCode.SPACE :
        executeFunction() ;
        break ;
    case $.ui.keyCode.ESCAPE :
        annulerFonction() ;
        break ;
    par défaut :
        defaultFunction() ;
}

Une indentation correcte et l'utilisation de pauses permettent d'éviter des comportements non désirés lorsque plusieurs cas sont rencontrés.

Meilleures pratiques pour le développement JavaScript de WordPress

1. Évitez les variables globales

Les variables globales peuvent conduire à pollution de l'espace de noms et des conflits avec d'autres scripts. Au lieu de cela, encapsulez votre code dans un fichier Expression de la fonction immédiatement invoquée (IIFE) pour créer une portée locale.

( function() {
    const localVar = 'Scoped to this function' ;
    // Le code est ici protégé de la portée globale
} )() ;

L'encapsulation du code réduit le risque de conflits, en particulier lorsque vous travaillez dans des environnements comportant de nombreuses bibliothèques tierces.

2. Documentation et commentaires

WordPress suit la norme Norme JSDoc 3 pour documenter le code JavaScript. La documentation est essentielle pour comprendre la fonctionnalité des méthodes, classes et fonctions complexes.

• Commentaires sur une seule ligne: Utilisation // pour de brèves explications, en particulier lorsque vous décrivez une ligne de code spécifique.
• Commentaires sur plusieurs lignes: Utilisation /* */ pour des explications plus détaillées ou pour décrire un bloc de code.

/**
 * Additionne deux nombres.
 *
 * @param {number} a - Le premier nombre.
 * @param {number} b - Le second nombre.
 * @return {number} Somme de a et b.
 */
function add( a, b ) {
    return a + b ;
}

La documentation du code avec JSDoc permet aux outils de générer automatiquement de la documentation et aide les développeurs à comprendre votre code sans avoir à se plonger dans l'implémentation.

3. Gestion des erreurs

Utiliser try...catch pour gérer les erreurs potentielles avec élégance. La gestion des erreurs permet d'éviter que des problèmes inattendus ne fassent échouer l'ensemble de votre application.

try {
    const data = JSON.parse( jsonString ) ;
} catch ( error ) {
    console.error('Invalid JSON:', error ) ;
}

Une bonne gestion des erreurs améliore la résilience de votre code, ce qui facilite le débogage et la maintenance.

Les normes de codage JavaScript en pratique

Pour vous assurer que votre code JavaScript respecte les normes de WordPress