{"id":1972,"date":"2024-10-09T11:37:53","date_gmt":"2024-10-09T03:37:53","guid":{"rendered":"https:\/\/www.openbyt.com\/spieth-in-danger-of-missing-cut-2"},"modified":"2024-10-19T21:30:38","modified_gmt":"2024-10-19T13:30:38","slug":"spieth-in-danger-of-missing-cut-2","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/fr\/spieth-risque-de-manquer-la-coupe-2","title":{"rendered":"Ma\u00eetriser JavaScript dans WordPress : Guide des meilleures pratiques"},"content":{"rendered":"

Ma\u00eetriser les normes de codage JavaScript de WordPress : Un guide complet pour les d\u00e9veloppeurs<\/strong><\/p>

Les normes de codage JavaScript dans WordPress sont cruciales pour maintenir la coh\u00e9rence, la lisibilit\u00e9 et un code de haute qualit\u00e9, que vous d\u00e9veloppiez des th\u00e8mes, des plugins ou que vous contribuiez au noyau. Ces normes garantissent que votre JavaScript s'int\u00e8gre de mani\u00e8re transparente avec le PHP, le HTML et le CSS et facilitent la collaboration entre diff\u00e9rentes \u00e9quipes. Nous allons nous plonger dans ces normes, en les d\u00e9composant \u00e0 l'aide d'exemples pratiques afin de les rendre accessibles \u00e0 tous les d\u00e9veloppeurs.<\/p>

\"\"<\/figure>

Vue d'ensemble : Construire sur les fondations de jQuery<\/strong><\/p>

Les normes de codage JavaScript de WordPress sont d\u00e9riv\u00e9es de la norme Guide de style JavaScript jQuery<\/strong>, introduit \u00e0 l'origine en 2012. Bien qu'initialement destin\u00e9 aux projets jQuery, son succ\u00e8s a conduit \u00e0 une adoption g\u00e9n\u00e9ralis\u00e9e au-del\u00e0 du cadre. Cependant, WordPress a son propre point de vue sur ces normes, qui diff\u00e8re l\u00e9g\u00e8rement du guide original de jQuery.<\/p>

\"\"<\/figure>

Les principales diff\u00e9rences sont les suivantes :<\/p>

  1. Citations simples pour cordes<\/strong>: WordPress pr\u00e9f\u00e8re les guillemets simples pour les d\u00e9clarations de cha\u00eenes de caract\u00e8res.<\/li>\n\n
  2. Indentation de l'\u00e9nonc\u00e9 du cas<\/strong>: Dans WordPress, les d\u00e9clarations de cas sont indent\u00e9es \u00e0 l'int\u00e9rieur d'un bloc d'interrupteurs.<\/li>\n\n
  3. Fonction coh\u00e9rente Indentation<\/strong>: Tout le contenu d'une fonction est indent\u00e9, y compris les fermetures de fichiers.<\/li>\n\n
  4. Limite de longueur de ligne assouplie<\/strong>: Alors que jQuery impose une limite de 100 caract\u00e8res par ligne, WordPress l'encourage mais ne l'applique pas strictement.<\/li><\/ol>

    Principaux domaines couverts par les normes JavaScript de WordPress<\/h3>

    1.Code Formatage et indentation<\/strong><\/p>

    1. <\/li><\/ol>

      Une mise en forme et une indentation correctes sont essentielles \u00e0 la lisibilit\u00e9 et \u00e0 la maintenance du code. La norme WordPress met l'accent sur :<\/p>

      • Indentation<\/strong>: Utilisation onglets<\/strong> au lieu d'espaces pour l'indentation. Chaque bloc logique doit \u00eatre indent\u00e9 pour faciliter la lecture. Les tabulations aident \u00e0 maintenir la coh\u00e9rence, en particulier lorsque diff\u00e9rents d\u00e9veloppeurs travaillent sur la m\u00eame base de code.<\/li><\/ul>
        ( function ( $ ) {\n    \/\/ Les expressions en bloc sont indent\u00e9es\n    function doSomething() {\n        \/\/ Le code de la fonction est \u00e9galement indent\u00e9\n        console.log('Doing something') ;\n    }\n} )( jQuery ) ;<\/code><\/pre>
        Dans l'exemple ci-dessus, la fonction doSomething() et son contenu sont indent\u00e9s pour montrer qu'ils font partie de l'IIFE.<\/p>
        Dans l'exemple ci-dessus, la fonction doSomething() et son contenu sont indent\u00e9s pour montrer qu'ils font partie de l'IIFE.<\/strong><\/p>
        var html = '<p>La somme de ' + a + ' et de ' + b + ' est ' + ( a + b ) + '<\/p>' ;\n\néléments\n    .addClass( 'foo' )\n    .children()\n        .html( 'hello' )\n    .end()\n    .appendTo( 'body' ) ;<\/code><\/pre>
        Ici, chaque m\u00e9thode de la cha\u00eene commence sur une nouvelle ligne, ce qui rend la s\u00e9quence d'op\u00e9rations plus lisible.<\/p>
        \"\"<\/figure>
        2. Espacement des objets et des tableaux<\/strong><\/p>
        Objets et tableaux<\/strong>: Un espacement coh\u00e9rent est essentiel pour la clart\u00e9 visuelle, en particulier lorsque vous travaillez avec des structures de donn\u00e9es complexes. Suivez les lignes directrices suivantes en mati\u00e8re d'espacement :<\/p>
        \/\/ Fa\u00e7on correcte de d\u00e9clarer des objets\nvar obj = {\n    name : 'John',\n    \u00e2ge : 27,\n    height : 179\n} ;\n\n\/\/ Fa\u00e7on incorrecte de d\u00e9clarer des objets (ne pas condenser les propri\u00e9t\u00e9s)\nvar obj = { name : 'John', age : 27, height : 179 } ;\n\n\/\/ Les tableaux doivent \u00e9galement respecter un espacement coh\u00e9rent\nvar array = [ 1, 2, 3 ] ;<\/code><\/pre>
        L'espacement correct des objets et des tableaux garantit que votre structure de donn\u00e9es est visuellement distincte, ce qui est utile lors du d\u00e9bogage ou de la r\u00e9vision du code.<\/p>
        3. Point-virgule<\/strong><\/p>
        Utilisez toujours points-virgules<\/strong> pour terminer les instructions. L'omission de points-virgules peut entra\u00eener des probl\u00e8mes inattendus lors de l'insertion automatique de points-virgules (ASI) par JavaScript.<\/p>
        var array = [ 1, 2 ] ;\nconsole.log('Hello, world!') ;<\/code><\/pre>
        M\u00eame si JavaScript peut parfois d\u00e9duire les points-virgules, il est pr\u00e9f\u00e9rable de les inclure explicitement pour \u00e9viter toute ambigu\u00eft\u00e9, en particulier lorsque vous combinez plusieurs extraits de code ou que vous participez \u00e0 des projets d'\u00e9quipe.<\/p>
        4. D\u00e9clarations de variables : constante<\/code>, laissez<\/code>et var<\/code><\/strong><\/p>
        • Utiliser constante<\/strong> pour les variables dont la valeur ne changera pas. Cela permet d'\u00e9viter les r\u00e9affectations accidentelles et d'indiquer clairement vos intentions aux autres d\u00e9veloppeurs.<\/li>\n\n
        • Utiliser laissez<\/strong> pour les variables dont la valeur peut changer dans un p\u00e9rim\u00e8tre donn\u00e9. Cela permet de s'assurer que la variable a une port\u00e9e en bloc, ce qui \u00e9vite les probl\u00e8mes li\u00e9s \u00e0 l'accaparement.<\/li>\n\n
        • **Avoid **var<\/strong> \u00e0 moins que cela ne soit n\u00e9cessaire, car il a une port\u00e9e fonctionnelle, ce qui peut entra\u00eener des comportements non souhait\u00e9s en raison de l'hissage.<\/li><\/ul>
          const userName = 'Alice' ; \/\/ Utilisez const pour les valeurs fixes\nlet userAge = 30 ; \/\/ Utilisez let pour les valeurs susceptibles de changer<\/code><\/pre>
          L'utilisation constante<\/code> et laissez<\/code> contribue de mani\u00e8re appropri\u00e9e \u00e0 am\u00e9liorer la s\u00e9curit\u00e9 du code et facilite le raisonnement sur les dur\u00e9es de vie des variables.<\/p>
          5. Conventions d'appellation<\/strong><\/p>
          Des conventions de d\u00e9nomination coh\u00e9rentes rendent le code plus lisible et plus facile \u00e0 maintenir :<\/p>
          • CamelCase<\/strong>: Utilisation camelCase<\/strong> pour les noms de variables et de fonctions. Par exemple, ID utilisateur<\/code> ou fetchUserData<\/code>.<\/li>\n\n
          • Classes<\/strong>: Utilisation UpperCamelCase<\/strong> (PascalCase) pour les noms de classes.<\/li>\n\n
          • Constantes<\/strong>: Utilisation CAS_DE_SERPENT_CRIANT<\/strong> pour les constantes.<\/li><\/ul>
            const MAX_CONNECTIONS = 5 ;\nclass UserProfile {\n    constructor( name ) {\n        this.name = name ;\n    }\n}<\/code><\/pre>
            \"\"<\/figure>
            CamelCase pour les variables et les fonctions permet de les diff\u00e9rencier des classes et des constantes, ce qui contribue \u00e0 une meilleure clart\u00e9 du code.<\/p>
            6. Contr\u00f4les de l'\u00e9galit\u00e9<\/strong><\/p>
            Utilisez toujours \u00e9galit\u00e9\/in\u00e9galit\u00e9 stricte (===******** et !==)<\/strong> au lieu de v\u00e9rifications abstraites (== et !=). Cela permet d'\u00e9viter des types de coercition inattendus qui peuvent entra\u00eener des bogues.<\/p>
            if ( name === 'John' ) {\n    \/\/ Contr\u00f4le strict de l'\u00e9galit\u00e9\n    console.log('Hello, John!') ;\n}\n\nif ( result !== false ) {\n    \/\/ V\u00e9rification de l'in\u00e9galit\u00e9 stricte\n    console.log('Resultat n'est pas faux') ;\n}<\/code><\/pre>
            L'\u00e9galit\u00e9 stricte garantit que le type et la valeur sont compar\u00e9s, ce qui rend votre code plus pr\u00e9visible.<\/p>
            7. Traitement des cordes<\/strong><\/p>
            Utiliser guillemets simples<\/strong> pour les cha\u00eenes de caract\u00e8res, sauf si la cha\u00eene contient un guillemet simple, auquel cas il convient d'utiliser des guillemets doubles pour \u00e9viter l'\u00e9chappement.<\/p>
            var greeting = 'Hello world!' ;\nvar statement = \"C'est une belle journ\u00e9e\" ;<\/code><\/pre>
            Cette r\u00e8gle assure la coh\u00e9rence de la base de code, ce qui permet aux d\u00e9veloppeurs de suivre plus facilement les m\u00eames pratiques.<\/p>
            8. D\u00e9clarations de commutation<\/strong><\/p>
            Les instructions de commutation doivent avoir un pause<\/strong> pour chaque cas (sauf pour la valeur par d\u00e9faut) afin d'\u00e9viter les erreurs de transposition. En outre, indenter les d\u00e9clarations de cas<\/strong> doit se trouver dans un seul onglet du commutateur.<\/p>
            switch ( event.keyCode ) {\n    case $.ui.keyCode.ENTER :\n    case $.ui.keyCode.SPACE :\n        executeFunction() ;\n        break ;\n    case $.ui.keyCode.ESCAPE :\n        annulerFonction() ;\n        break ;\n    par d\u00e9faut :\n        defaultFunction() ;\n}<\/code><\/pre>
            Une indentation correcte et l'utilisation de pauses permettent d'\u00e9viter des comportements non d\u00e9sir\u00e9s lorsque plusieurs cas sont rencontr\u00e9s.<\/p>
            \"\"<\/figure>
            Meilleures pratiques pour le d\u00e9veloppement JavaScript de WordPress<\/strong><\/p>
            1. \u00c9vitez les variables globales<\/h4>
            Les variables globales peuvent conduire \u00e0 pollution de l'espace de noms<\/strong> et des conflits avec d'autres scripts. Au lieu de cela, encapsulez votre code dans un fichier Expression de la fonction imm\u00e9diatement invoqu\u00e9e (IIFE)<\/strong> pour cr\u00e9er une port\u00e9e locale.<\/p>
            ( function() {\n    const localVar = 'Scoped to this function' ;\n    \/\/ Le code est ici prot\u00e9g\u00e9 de la port\u00e9e globale\n} )() ;<\/code><\/pre>
            L'encapsulation du code r\u00e9duit le risque de conflits, en particulier lorsque vous travaillez dans des environnements comportant de nombreuses biblioth\u00e8ques tierces.<\/p>
            2. Documentation et commentaires<\/strong><\/p>
            WordPress suit la norme Norme JSDoc 3<\/strong> pour documenter le code JavaScript. La documentation est essentielle pour comprendre la fonctionnalit\u00e9 des m\u00e9thodes, classes et fonctions complexes.<\/p>
            • Commentaires sur une seule ligne<\/strong>: Utilisation \/\/<\/code> pour de br\u00e8ves explications, en particulier lorsque vous d\u00e9crivez une ligne de code sp\u00e9cifique.<\/li>\n\n
            • Commentaires sur plusieurs lignes<\/strong>: Utilisation \/* *\/<\/code> pour des explications plus d\u00e9taill\u00e9es ou pour d\u00e9crire un bloc de code.<\/li><\/ul>
              \/**\n * Additionne deux nombres.\n *\n * @param {number} a - Le premier nombre.\n * @param {number} b - Le second nombre.\n * @return {number} Somme de a et b.\n *\/\nfunction add( a, b ) {\n    return a + b ;\n}<\/code><\/pre>
              La documentation du code avec JSDoc permet aux outils de g\u00e9n\u00e9rer automatiquement de la documentation et aide les d\u00e9veloppeurs \u00e0 comprendre votre code sans avoir \u00e0 se plonger dans l'impl\u00e9mentation.<\/p>
              3. Gestion des erreurs<\/strong><\/p>
              Utiliser try...catch<\/strong> pour g\u00e9rer les erreurs potentielles avec \u00e9l\u00e9gance. La gestion des erreurs permet d'\u00e9viter que des probl\u00e8mes inattendus ne fassent \u00e9chouer l'ensemble de votre application.<\/p>
              try {\n    const data = JSON.parse( jsonString ) ;\n} catch ( error ) {\n    console.error('Invalid JSON:', error ) ;\n}<\/code><\/pre>
              Une bonne gestion des erreurs am\u00e9liore la r\u00e9silience de votre code, ce qui facilite le d\u00e9bogage et la maintenance.<\/p>
              Les normes de codage JavaScript en pratique<\/h3>
              Pour vous assurer que votre code JavaScript respecte les normes de WordPress<\/p>
              \"\"<\/figure>","protected":false},"excerpt":{"rendered":"
              Ma\u00eetriser les standards de codage JavaScript de WordPress : Un guide complet pour les d\u00e9veloppeurs Les normes de codage JavaScript dans WordPress sont cruciales pour maintenir la coh\u00e9rence, la lisibilit\u00e9 et un code de haute qualit\u00e9, que ce soit...<\/p>","protected":false},"author":1,"featured_media":3129,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,83],"tags":[196,195,197,194],"class_list":["post-1972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev-tips","category-developer-tips","tag-best-practices","tag-coding-standards","tag-web-development","tag-wordpress-javascript",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/1972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/comments?post=1972"}],"version-history":[{"count":6,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/1972\/revisions"}],"predecessor-version":[{"id":3542,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/posts\/1972\/revisions\/3542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media\/3129"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/media?parent=1972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/categories?post=1972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/fr\/wp-json\/wp\/v2\/tags?post=1972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}