{"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\/pt\/spieth-em-risco-de-falhar-o-cut-2","title":{"rendered":"Dominar o JavaScript no WordPress: Guia de Melhores Pr\u00e1ticas"},"content":{"rendered":"

Dominar os padr\u00f5es de codifica\u00e7\u00e3o JavaScript do WordPress: Um guia abrangente para desenvolvedores<\/strong><\/p>

Os padr\u00f5es de codifica\u00e7\u00e3o JavaScript no WordPress s\u00e3o cruciais para manter a consist\u00eancia, a legibilidade e o c\u00f3digo de alta qualidade, quer esteja a desenvolver temas, plug-ins ou a contribuir para o n\u00facleo. Estes padr\u00f5es garantem que o seu JavaScript se integra perfeitamente com PHP, HTML e CSS e facilitam a colabora\u00e7\u00e3o entre diversas equipas. Vamos mergulhar nesses padr\u00f5es, detalhando-os com exemplos pr\u00e1ticos para torn\u00e1-los acess\u00edveis a todos os desenvolvedores.<\/p>

\"\"<\/figure>

Vis\u00e3o geral: Construindo sobre a base do jQuery<\/strong><\/p>

Os padr\u00f5es de codifica\u00e7\u00e3o JavaScript do WordPress s\u00e3o derivados do Guia de estilo JavaScript do jQuery<\/strong>introduzido originalmente em 2012. Embora inicialmente destinado a projectos jQuery, o seu sucesso levou a uma ado\u00e7\u00e3o generalizada para al\u00e9m da estrutura. No entanto, o WordPress tem a sua pr\u00f3pria abordagem a estas normas, que difere ligeiramente do guia jQuery original.<\/p>

\"\"<\/figure>

As principais diferen\u00e7as incluem:<\/p>

  1. Cita\u00e7\u00f5es simples para cordas<\/strong>: O WordPress prefere aspas simples para declara\u00e7\u00f5es de strings.<\/li>\n\n
  2. Indenta\u00e7\u00e3o da declara\u00e7\u00e3o de caso<\/strong>: No WordPress, as instru\u00e7\u00f5es case s\u00e3o indentadas dentro de um bloco switch.<\/li>\n\n
  3. Indenta\u00e7\u00e3o coerente da fun\u00e7\u00e3o<\/strong>: Todo o conte\u00fado no interior de uma fun\u00e7\u00e3o \u00e9 indentado, incluindo os inv\u00f3lucros de encerramento de todo o ficheiro.<\/li>\n\n
  4. Limite de comprimento de linha flexibilizado<\/strong>: Enquanto o jQuery imp\u00f5e um limite de 100 caracteres por linha, o WordPress incentiva-o mas n\u00e3o o imp\u00f5e rigorosamente.<\/li><\/ol>

    \u00c1reas principais cobertas pelos padr\u00f5es JavaScript do WordPress<\/h3>

    1.C\u00f3digo Formata\u00e7\u00e3o e indenta\u00e7\u00e3o<\/strong><\/p>

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

      A formata\u00e7\u00e3o e a indenta\u00e7\u00e3o corretas s\u00e3o essenciais para um c\u00f3digo leg\u00edvel e de f\u00e1cil manuten\u00e7\u00e3o. O padr\u00e3o WordPress enfatiza:<\/p>

      • Indenta\u00e7\u00e3o<\/strong>: Utilizar separadores<\/strong> em vez de espa\u00e7os para a indenta\u00e7\u00e3o. Cada bloco l\u00f3gico deve ser indentado para facilitar a leitura. Os separadores ajudam a manter a consist\u00eancia, especialmente quando diferentes programadores est\u00e3o a trabalhar na mesma base de c\u00f3digo.<\/li><\/ul>
        ( function ( $ ) {\n    \/\/ As express\u00f5es de bloco s\u00e3o indentadas\n    function doSomething() {\n        \/\/ O c\u00f3digo da fun\u00e7\u00e3o tamb\u00e9m est\u00e1 indentado\n        console.log( 'Fazendo algo' );\n    }\n} )( jQuery );<\/code><\/pre>
        No exemplo acima, a fun\u00e7\u00e3o doSomething() e o seu conte\u00fado est\u00e3o indentados para mostrar que fazem parte do IIFE.<\/p>
        No exemplo acima, a fun\u00e7\u00e3o doSomething() e o seu conte\u00fado est\u00e3o indentados para mostrar que fazem parte do IIFE.<\/strong><\/p>
        var html = '<p>A soma de ' + a + ' e ' + b + ' é ' + ( a + b ) + '<\/p>';\n\nelementos\n    .addClass( 'foo' )\n    .filhos()\n        .html( 'hello' )\n    .fim()\n    .appendTo( 'body' );<\/code><\/pre>
        Aqui, cada m\u00e9todo da cadeia come\u00e7a numa nova linha, tornando a sequ\u00eancia de opera\u00e7\u00f5es mais leg\u00edvel.<\/p>
        \"\"<\/figure>
        2. Espa\u00e7amento entre objectos e matrizes<\/strong><\/p>
        Objectos e matrizes<\/strong>: O espa\u00e7amento consistente \u00e9 crucial para a clareza visual, especialmente quando trabalha com estruturas de dados complexas. Siga estas diretrizes de espa\u00e7amento:<\/p>
        \/\/ Forma correta de declarar objectos\nvar obj = {\n    nome: 'Jo\u00e3o',\n    idade: 27,\n    altura: 179\n};\n\n\/\/ Forma incorrecta de declarar objectos (n\u00e3o condense propriedades)\nvar obj = { nome: 'Jo\u00e3o', idade: 27, altura: 179 };\n\n\/\/ Os arrays tamb\u00e9m devem seguir um espa\u00e7amento consistente\nvar array = [ 1, 2, 3 ];<\/code><\/pre>
        O espa\u00e7amento correto em objectos e arrays garante que a sua estrutura de dados \u00e9 visualmente distinta, o que ajuda na depura\u00e7\u00e3o ou revis\u00e3o do c\u00f3digo.<\/p>
        3. Ponto e v\u00edrgula<\/strong><\/p>
        Utilize sempre ponto e v\u00edrgula<\/strong> para terminar as instru\u00e7\u00f5es. A omiss\u00e3o de ponto e v\u00edrgula pode levar a problemas inesperados durante a inser\u00e7\u00e3o autom\u00e1tica de ponto e v\u00edrgula (ASI) do JavaScript.<\/p>
        var array = [ 1, 2 ];\nconsola.log( 'Ol\u00e1, mundo!' );<\/code><\/pre>
        Embora o JavaScript possa, por vezes, inferir pontos e v\u00edrgulas, \u00e9 uma boa pr\u00e1tica inclu\u00ed-los explicitamente para evitar ambiguidades, especialmente ao combinar v\u00e1rios fragmentos de c\u00f3digo ou ao contribuir para projectos de equipa.<\/p>
        4. Declara\u00e7\u00f5es de vari\u00e1veis: const<\/code>, deixar<\/code>e var<\/code><\/strong><\/p>
        • Utilize const<\/strong> para vari\u00e1veis cujo valor n\u00e3o ser\u00e1 alterado. Isto ajuda a evitar a reatribui\u00e7\u00e3o acidental e torna as suas inten\u00e7\u00f5es claras para os outros programadores.<\/li>\n\n
        • Utilize deixar<\/strong> para vari\u00e1veis cujo valor pode mudar dentro de um determinado escopo. Isso garante que a vari\u00e1vel tenha escopo de bloco, evitando problemas relacionados a hoisting.<\/li>\n\n
        • **Evitevar<\/strong> a menos que seja necess\u00e1rio, uma vez que tem um \u00e2mbito de fun\u00e7\u00e3o, o que pode levar a comportamentos n\u00e3o intencionais devido ao i\u00e7amento.<\/li><\/ul>
          const userName = 'Alice'; \/\/ Utilize const para valores fixos\nlet userAge = 30; \/\/ Use let para valores que podem mudar<\/code><\/pre>
          Utilizar const<\/code> e deixar<\/code> ajuda a melhorar a seguran\u00e7a do c\u00f3digo e facilita o racioc\u00ednio sobre os tempos de vida das vari\u00e1veis.<\/p>
          5. Conven\u00e7\u00f5es de nomenclatura<\/strong><\/p>
          As conven\u00e7\u00f5es de nomenclatura consistentes tornam o c\u00f3digo mais leg\u00edvel e f\u00e1cil de manter:<\/p>
          • CamelCase<\/strong>: Utilizar camelCase<\/strong> para nomes de vari\u00e1veis e fun\u00e7\u00f5es. Por exemplo, userId<\/code> ou fetchUserData<\/code>.<\/li>\n\n
          • Classes<\/strong>: Utilizar UpperCamelCase<\/strong> (PascalCase) para nomes de classes.<\/li>\n\n
          • Constantes<\/strong>: Utilizar CAIXA_DE_COBRA_GRITANTE<\/strong> para constantes.<\/li><\/ul>
            const MAX_CONNECTIONS = 5;\nclasse UserProfile {\n    constructor( nome ) {\n        this.name = name;\n    }\n}<\/code><\/pre>
            \"\"<\/figure>
            O CamelCase para vari\u00e1veis e fun\u00e7\u00f5es ajuda a diferenci\u00e1-las de classes e constantes, contribuindo para uma melhor clareza do c\u00f3digo.<\/p>
            6. Controlos de igualdade<\/strong><\/p>
            Utilize sempre igualdade\/inequalidade estrita (===******** e !==)<\/strong> em vez de verifica\u00e7\u00f5es abstractas (== e !=). Isto ajuda a evitar tipos inesperados de coer\u00e7\u00e3o que podem levar a bugs.<\/p>
            if ( name === 'John' ) {\n    \/\/ Controlo rigoroso da igualdade\n    consola.log( 'Ol\u00e1, Jo\u00e3o!' );\n}\n\nse ( resultado !== falso ) {\n    \/\/ Verifica\u00e7\u00e3o rigorosa da desigualdade\n    consola.log( 'O resultado n\u00e3o \u00e9 falso' );\n}<\/code><\/pre>
            A igualdade estrita garante que tanto o tipo como o valor s\u00e3o comparados, tornando o seu c\u00f3digo mais previs\u00edvel.<\/p>
            7. Manuseamento de cordas<\/strong><\/p>
            Utilize aspas simples<\/strong> para cadeias de caracteres, a n\u00e3o ser que a cadeia de caracteres contenha uma aspa simples, caso em que deve utilizar aspas duplas para evitar a fuga.<\/p>
            var sauda\u00e7\u00e3o = \"Ol\u00e1 mundo!\";\nvar declara\u00e7\u00e3o = \"Est\u00e1 um bom dia\";<\/code><\/pre>
            Esta regra assegura a consist\u00eancia em toda a base de c\u00f3digo, tornando mais f\u00e1cil para os programadores seguirem as mesmas pr\u00e1ticas.<\/p>
            8. Mudar as declara\u00e7\u00f5es<\/strong><\/p>
            As instru\u00e7\u00f5es Switch devem ter um pausa<\/strong> para cada caso (exceto para a predefini\u00e7\u00e3o) para evitar erros de passagem. Adicionalmente, recue as instru\u00e7\u00f5es de caso<\/strong> deve estar num separador dentro do interrutor.<\/p>
            switch ( event.keyCode ) {\n    case $.ui.keyCode.ENTER:\n    case $.ui.keyCode.SPACE:\n        executeFunction();\n        interrompa;\n    case $.ui.keyCode.ESCAPE:\n        canceleFunction();\n        pausa;\n    por defeito:\n        defaultFunction();\n}<\/code><\/pre>
            A indenta\u00e7\u00e3o correta e a utiliza\u00e7\u00e3o de pausas evitam comportamentos indesejados quando se verificam casos m\u00faltiplos.<\/p>
            \"\"<\/figure>
            Melhores pr\u00e1ticas no desenvolvimento JavaScript para WordPress<\/strong><\/p>
            1. Evite vari\u00e1veis globais<\/h4>
            As vari\u00e1veis globais podem levar a polui\u00e7\u00e3o do espa\u00e7o nominal<\/strong> e conflitos com outros scripts. Em vez disso, encapsule o seu c\u00f3digo dentro de um Express\u00e3o de fun\u00e7\u00e3o imediatamente invocada (IIFE)<\/strong> para criar um \u00e2mbito local.<\/p>
            ( function() {\n    const localVar = 'Com escopo para esta fun\u00e7\u00e3o';\n    \/\/ O c\u00f3digo aqui est\u00e1 protegido do \u00e2mbito global\n} )();<\/code><\/pre>
            O encapsulamento de c\u00f3digo reduz o risco de conflitos, especialmente quando trabalha em ambientes com v\u00e1rias bibliotecas de terceiros.<\/p>
            2. Documenta\u00e7\u00e3o e coment\u00e1rios<\/strong><\/p>
            O WordPress segue o Norma JSDoc 3<\/strong> para documentar o c\u00f3digo JavaScript. A documenta\u00e7\u00e3o \u00e9 crucial para compreender a funcionalidade de m\u00e9todos, classes e fun\u00e7\u00f5es complexos.<\/p>
            • Coment\u00e1rios de uma linha<\/strong>: Utilizar \/\/<\/code> para explica\u00e7\u00f5es breves, particularmente quando descreve uma linha espec\u00edfica de c\u00f3digo.<\/li>\n\n
            • Coment\u00e1rios de v\u00e1rias linhas<\/strong>: Utilizar \/* *\/<\/code> para explica\u00e7\u00f5es mais detalhadas ou para descrever um bloco de c\u00f3digo.<\/li><\/ul>
              \/**\n * Adiciona dois n\u00fameros.\n *\n * @param {number} a - O primeiro n\u00famero.\n * @param {n\u00famero} b - O segundo n\u00famero.\n * @return {n\u00famero} Soma de a e b.\n *\/\nfunction add( a, b ) {\n    retorne a + b;\n}<\/code><\/pre>
              A documenta\u00e7\u00e3o de c\u00f3digo com JSDoc permite que as ferramentas gerem documenta\u00e7\u00e3o automaticamente e ajuda os programadores a compreenderem o seu c\u00f3digo sem terem de se aprofundar na implementa\u00e7\u00e3o.<\/p>
              3. Tratamento de erros<\/strong><\/p>
              Utilize tente... apanhe<\/strong> para lidar com poss\u00edveis erros de forma graciosa. O tratamento de erros garante que os problemas inesperados n\u00e3o causem a falha de toda a sua aplica\u00e7\u00e3o.<\/p>
              tente {\n    const data = JSON.parse( jsonString );\n} catch ( error ) {\n    consola.error( 'JSON inv\u00e1lido:', erro );\n}<\/code><\/pre>
              O tratamento adequado de erros melhora a resili\u00eancia do seu c\u00f3digo, tornando-o mais f\u00e1cil de depurar e manter.<\/p>
              Padr\u00f5es de codifica\u00e7\u00e3o JavaScript na pr\u00e1tica<\/h3>
              Para se certificar de que o seu c\u00f3digo JavaScript cumpre as normas do WordPress<\/p>
              \"\"<\/figure>","protected":false},"excerpt":{"rendered":"
              Dominando os padr\u00f5es de codifica\u00e7\u00e3o JavaScript do WordPress: Um guia abrangente para desenvolvedores Os padr\u00f5es de codifica\u00e7\u00e3o JavaScript no WordPress s\u00e3o cruciais para manter a consist\u00eancia, legibilidade e c\u00f3digo de alta qualidade, seja...<\/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\/pt\/wp-json\/wp\/v2\/posts\/1972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/comments?post=1972"}],"version-history":[{"count":6,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/1972\/revisions"}],"predecessor-version":[{"id":3542,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/1972\/revisions\/3542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media\/3129"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media?parent=1972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/categories?post=1972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/tags?post=1972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}