OpenByt - A sua melhor fonte de conhecimento gratuito sobre WordPress

Dominar o JavaScript no WordPress: Guia de Melhores Práticas

openbyt

Dominar os padrões de codificação JavaScript do WordPress: Um guia abrangente para desenvolvedores

JavaScript coding standards in WordPress are crucial for maintaining consistency, readability, and high-quality code, whether you are developing themes, plugins, or contributing to the core. These standards ensure that your JavaScript integrates seamlessly with PHP, HTML, and CSS and facilitate collaboration across diverse teams. Let’s dive into these standards, breaking them down with practical examples to make them accessible for all developers.

Overview: Building on jQuery’s Foundation

Os padrões de codificação JavaScript do WordPress são derivados do Guia de estilo JavaScript do jQueryintroduzido originalmente em 2012. Embora inicialmente destinado a projectos jQuery, o seu sucesso levou a uma adoção generalizada para além da estrutura. No entanto, o WordPress tem a sua própria abordagem a estas normas, que difere ligeiramente do guia jQuery original.

As principais diferenças incluem:

  1. Citações simples para cordas: O WordPress prefere aspas simples para declarações de strings.
  2. Indentação da declaração de caso: No WordPress, as instruções case são indentadas dentro de um bloco switch.
  3. Indentação coerente da função: Todo o conteúdo no interior de uma função é indentado, incluindo os invólucros de encerramento de todo o ficheiro.
  4. Limite de comprimento de linha flexibilizado: Enquanto o jQuery impõe um limite de 100 caracteres por linha, o WordPress incentiva-o mas não o impõe rigorosamente.

Áreas principais cobertas pelos padrões JavaScript do WordPress

1.Código Formatação e indentação

A formatação e a indentação corretas são essenciais para um código legível e de fácil manutenção. O padrão WordPress enfatiza:

( function ( $ ) {
    // As expressões de bloco são indentadas
    function doSomething() {
        // O código da função também está indentado
        console.log( 'Fazendo algo' );
    }
} )( jQuery );

No exemplo acima, a função doSomething() e o seu conteúdo estão indentados para mostrar que fazem parte do IIFE.

No exemplo acima, a função doSomething() e o seu conteúdo estão indentados para mostrar que fazem parte do IIFE.

var html = '<p>A soma de ' + a + ' e ' + b + ' é ' + ( a + b ) + '</p>';

elementos
    .addClass( 'foo' )
    .filhos()
        .html( 'hello' )
    .fim()
    .appendTo( 'body' );

Aqui, cada método da cadeia começa numa nova linha, tornando a sequência de operações mais legível.

2. Espaçamento entre objectos e matrizes

Objectos e matrizes: O espaçamento consistente é crucial para a clareza visual, especialmente quando trabalha com estruturas de dados complexas. Siga estas diretrizes de espaçamento:

// Correct way to declare objects
var obj = {
    name: 'John',
    age: 27,
    height: 179
};

// Incorrect way to declare objects (do not condense properties)
var obj = { name: 'John', age: 27, height: 179 };

// Arrays should also follow consistent spacing
var array = [ 1, 2, 3 ];

O espaçamento correto em objectos e arrays garante que a sua estrutura de dados é visualmente distinta, o que ajuda na depuração ou revisão do código.

3. Ponto e vírgula

Utilize sempre ponto e vírgula to terminate statements. Omitting semicolons can lead to unexpected issues during JavaScript’s automatic semicolon insertion (ASI).

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

Even though JavaScript can sometimes infer semicolons, it’s best practice to include them explicitly to avoid ambiguities, especially when combining multiple code snippets or contributing to team projects.

4. Declarações de variáveis: const, deixare var

const userName = 'Alice'; // Utilize const para valores fixos
let userAge = 30; // Use let para valores que podem mudar

Utilizar const e deixar ajuda a melhorar a segurança do código e facilita o raciocínio sobre os tempos de vida das variáveis.

5. Convenções de nomenclatura

As convenções de nomenclatura consistentes tornam o código mais legível e fácil de manter:

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

O CamelCase para variáveis e funções ajuda a diferenciá-las de classes e constantes, contribuindo para uma melhor clareza do código.

6. Controlos de igualdade

Utilize sempre igualdade/inequalidade estrita (===******** e !==) em vez de verificações abstractas (== e !=). Isto ajuda a evitar tipos inesperados de coerção que podem levar a bugs.

if ( name === 'John' ) {
    // Controlo rigoroso da igualdade
    consola.log( 'Olá, João!' );
}

se ( resultado !== falso ) {
    // Verificação rigorosa da desigualdade
    consola.log( 'O resultado não é falso' );
}

A igualdade estrita garante que tanto o tipo como o valor são comparados, tornando o seu código mais previsível.

7. Manuseamento de cordas

Utilize aspas simples para cadeias de caracteres, a não ser que a cadeia de caracteres contenha uma aspa simples, caso em que deve utilizar aspas duplas para evitar a fuga.

var saudação = "Olá mundo!";
var declaração = "Está um bom dia";

Esta regra assegura a consistência em toda a base de código, tornando mais fácil para os programadores seguirem as mesmas práticas.

8. Mudar as declarações

As instruções Switch devem ter um pausa para cada caso (exceto para a predefinição) para evitar erros de passagem. Adicionalmente, recue as instruções de caso deve estar num separador dentro do interrutor.

switch ( event.keyCode ) {
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        executeFunction();
        interrompa;
    case $.ui.keyCode.ESCAPE:
        canceleFunction();
        pausa;
    por defeito:
        defaultFunction();
}

A indentação correta e a utilização de pausas evitam comportamentos indesejados quando se verificam casos múltiplos.

Melhores práticas no desenvolvimento JavaScript para WordPress

1. Evite variáveis globais

As variáveis globais podem levar a poluição do espaço nominal e conflitos com outros scripts. Em vez disso, encapsule o seu código dentro de um Expressão de função imediatamente invocada (IIFE) para criar um âmbito local.

( function() {
    const localVar = 'Com escopo para esta função';
    // O código aqui está protegido do âmbito global
} )();

O encapsulamento de código reduz o risco de conflitos, especialmente quando trabalha em ambientes com várias bibliotecas de terceiros.

2. Documentação e comentários

O WordPress segue o Norma JSDoc 3 para documentar o código JavaScript. A documentação é crucial para compreender a funcionalidade de métodos, classes e funções complexos.

/**
 * Adiciona dois números.
 *
 * @param {number} a - O primeiro número.
 * @param {número} b - O segundo número.
 * @return {número} Soma de a e b.
 */
function add( a, b ) {
    retorne a + b;
}

A documentação de código com JSDoc permite que as ferramentas gerem documentação automaticamente e ajuda os programadores a compreenderem o seu código sem terem de se aprofundar na implementação.

3. Tratamento de erros

Utilize try…catch para lidar com possíveis erros de forma graciosa. O tratamento de erros garante que os problemas inesperados não causem a falha de toda a sua aplicação.

tente {
    const data = JSON.parse( jsonString );
} catch ( error ) {
    consola.error( 'JSON inválido:', erro );
}

O tratamento adequado de erros melhora a resiliência do seu código, tornando-o mais fácil de depurar e manter.

Padrões de codificação JavaScript na prática

Para se certificar de que o seu código JavaScript cumpre as normas do WordPress

Sair da versão móvel