{"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\/es\/spieth-en-peligro-de-perderse-el-corte-2","title":{"rendered":"Dominio de JavaScript en WordPress: Gu\u00eda de buenas pr\u00e1cticas"},"content":{"rendered":"

Dominar las normas de codificaci\u00f3n JavaScript de WordPress: Una gu\u00eda completa para desarrolladores<\/strong><\/p>

Los est\u00e1ndares de codificaci\u00f3n de JavaScript en WordPress son cruciales para mantener la coherencia, la legibilidad y un c\u00f3digo de alta calidad, tanto si est\u00e1 desarrollando temas, plugins o contribuyendo al n\u00facleo. Estas normas garantizan que su JavaScript se integre a la perfecci\u00f3n con PHP, HTML y CSS y facilitan la colaboraci\u00f3n entre equipos diversos. Vamos a sumergirnos en estas normas, desglos\u00e1ndolas con ejemplos pr\u00e1cticos para hacerlas accesibles a todos los desarrolladores.<\/p>

\"\"<\/figure>

Visi\u00f3n general: Construyendo sobre la base de jQuery<\/strong><\/p>

Las normas de codificaci\u00f3n JavaScript de WordPress se derivan del Gu\u00eda de estilo jQuery JavaScript<\/strong>, introducido originalmente en 2012. Aunque inicialmente estaba dirigido a proyectos jQuery, su \u00e9xito llev\u00f3 a una adopci\u00f3n generalizada m\u00e1s all\u00e1 del framework. Sin embargo, WordPress tiene su propia versi\u00f3n de estos est\u00e1ndares, que difiere ligeramente de la gu\u00eda original de jQuery.<\/p>

\"\"<\/figure>

Las diferencias clave incluyen:<\/p>

  1. Citas simples para cuerdas<\/strong>: WordPress prefiere las comillas simples para las declaraciones de cadenas.<\/li>\n\n
  2. Sangr\u00eda de la declaraci\u00f3n de caso<\/strong>: En WordPress, las sentencias case est\u00e1n sangradas dentro de un bloque switch.<\/li>\n\n
  3. Sangr\u00eda de funci\u00f3n coherente<\/strong>: Todo el contenido dentro de una funci\u00f3n est\u00e1 sangrado, incluyendo las envolturas de cierre de todo el archivo.<\/li>\n\n
  4. L\u00edmite de longitud de l\u00ednea relajado<\/strong>: Mientras que jQuery impone un l\u00edmite de 100 caracteres por l\u00ednea, WordPress lo fomenta pero no lo impone estrictamente.<\/li><\/ol>

    \u00c1reas principales cubiertas por los est\u00e1ndares JavaScript de WordPress<\/h3>

    1.Formato del c\u00f3digo y sangr\u00eda<\/strong><\/p>

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

      Un formato y una sangr\u00eda adecuados son esenciales para un c\u00f3digo legible y f\u00e1cil de mantener. El est\u00e1ndar de WordPress hace hincapi\u00e9 en:<\/p>

      • Indentaci\u00f3n<\/strong>: Utilice pesta\u00f1as<\/strong> en lugar de espacios para la sangr\u00eda. Cada bloque l\u00f3gico debe ir sangrado para facilitar su legibilidad. Las tabulaciones ayudan a mantener la coherencia, especialmente cuando diferentes desarrolladores trabajan en el mismo c\u00f3digo base.<\/li><\/ul>
        ( funci\u00f3n ( $ ) {\n    \/\/ Las expresiones de bloque est\u00e1n sangradas\n    function hacerAlgo() {\n        \/\/ El c\u00f3digo de la funci\u00f3n tambi\u00e9n est\u00e1 sangrado\n        console.log( 'HacerAlgo' );\n    }\n} )( jQuery );<\/code><\/pre>
        En el ejemplo anterior, la funci\u00f3n doSomething() y su contenido est\u00e1n sangrados para mostrar que forman parte del IIFE.<\/p>
        En el ejemplo anterior, la funci\u00f3n doSomething() y su contenido est\u00e1n sangrados para mostrar que forman parte del IIFE.<\/strong><\/p>
        var html = '<p>La suma de ' + a + ' y ' + b + ' es ' + ( a + b ) + '<\/p>';\n\nelementos\n    .addClass( 'foo' )\n    .children()\n        .html( 'hola' )\n    .end()\n    .appendTo( 'body' );<\/code><\/pre>
        Aqu\u00ed, cada m\u00e9todo de la cadena comienza en una nueva l\u00ednea, lo que hace que la secuencia de operaciones sea m\u00e1s legible.<\/p>
        \"\"<\/figure>
        2. Espaciado entre objetos y matrices<\/strong><\/p>
        Objetos y matrices<\/strong>: Un espaciado coherente es crucial para la claridad visual, especialmente cuando se trabaja con estructuras de datos complejas. Siga estas directrices para el espaciado:<\/p>
        \/\/ Forma correcta de declarar objetos\nvar obj = {\n    nombre: 'Juan',\n    edad: 27\n    altura: 179\n};\n\n\/\/ Forma incorrecta de declarar objetos (no condensar propiedades)\nvar obj = { nombre: 'Juan', edad: 27, altura: 179 };\n\n\/\/ Los arrays tambi\u00e9n deben seguir un espaciado coherente\nvar array = [ 1, 2, 3 ];<\/code><\/pre>
        El espaciado correcto en objetos y matrices garantiza que su estructura de datos sea visualmente distinta, lo que ayuda a la hora de depurar o revisar el c\u00f3digo.<\/p>
        3. Punto y coma<\/strong><\/p>
        Utilice siempre punto y coma<\/strong> para terminar las sentencias. Omitir el punto y coma puede provocar problemas inesperados durante la inserci\u00f3n autom\u00e1tica de punto y coma (ASI) de JavaScript.<\/p>
        var array = [ 1, 2 ];\nconsole.log( '\u00a1Hola, mundo!' );<\/code><\/pre>
        Aunque JavaScript puede inferir a veces puntos y comas, es una buena pr\u00e1ctica incluirlos expl\u00edcitamente para evitar ambig\u00fcedades, especialmente cuando se combinan varios fragmentos de c\u00f3digo o se contribuye a proyectos en equipo.<\/p>
        4. Declaraciones de variables: const<\/code>, deje<\/code>y var<\/code><\/strong><\/p>
        • Utilice const<\/strong> para variables cuyo valor no cambiar\u00e1. Esto ayuda a prevenir la reasignaci\u00f3n accidental y deja claras sus intenciones a otros desarrolladores.<\/li>\n\n
        • Utilice deje<\/strong> para las variables cuyo valor pueda cambiar dentro de un \u00e1mbito determinado. Esto asegura que la variable tiene un \u00e1mbito de bloque, evitando problemas relacionados con el hoisting.<\/li>\n\n
        • **Evitar**var<\/strong> a menos que sea necesario, ya que tiene alcance de funci\u00f3n, lo que puede dar lugar a comportamientos no deseados debido a la elevaci\u00f3n.<\/li><\/ul>
          const userName = 'Alice'; \/\/ Utilice const para valores fijos\nlet userAge = 30; \/\/ Utilice let para valores que puedan cambiar<\/code><\/pre>
          Utilizando const<\/code> y deje<\/code> ayuda adecuadamente a mejorar la seguridad del c\u00f3digo y facilita el razonamiento sobre los tiempos de vida de las variables.<\/p>
          5. Convenciones de denominaci\u00f3n<\/strong><\/p>
          Unas convenciones de nomenclatura coherentes hacen que el c\u00f3digo sea m\u00e1s legible y f\u00e1cil de mantener:<\/p>
          • CamelCase<\/strong>: Utilice camelCase<\/strong> para los nombres de variables y funciones. Por ejemplo, userId<\/code> o fetchUserData<\/code>.<\/li>\n\n
          • Clases<\/strong>: Utilice UpperCamelCase<\/strong> (PascalCase) para los nombres de clase.<\/li>\n\n
          • Constantes<\/strong>: Utilice SCREAMING_SNAKE_CASE<\/strong> para las constantes.<\/li><\/ul>
            const MAX_CONNECTIONS = 5;\nclase UserProfile {\n    constructor( nombre ) {\n        this.nombre = nombre;\n    }\n}<\/code><\/pre>
            \"\"<\/figure>
            CamelCase para variables y funciones ayuda a diferenciarlas de las clases y constantes, contribuyendo a una mayor claridad del c\u00f3digo.<\/p>
            6. Comprobaciones de igualdad<\/strong><\/p>
            Utilice siempre igualdad\/desigualdad estricta (===******** y !==)<\/strong> en lugar de las comprobaciones abstractas (== y !=). Esto ayuda a evitar tipos de coerci\u00f3n inesperados que pueden dar lugar a errores.<\/p>
            if ( nombre === 'Juan' ) {\n    \/\/ Comprobaci\u00f3n estricta de igualdad\n    console.log( '\u00a1Hola, Juan!' );\n}\n\nif ( resultado !== false ) {\n    \/\/ Comprobaci\u00f3n estricta de desigualdad\n    console.log( 'El resultado no es falso' );\n}<\/code><\/pre>
            La igualdad estricta garantiza que tanto el tipo como el valor se comparan, lo que hace que su c\u00f3digo sea m\u00e1s predecible.<\/p>
            7. Manipulaci\u00f3n de cadenas<\/strong><\/p>
            Utilice comillas simples<\/strong> para cadenas a menos que la cadena contenga una comilla simple, en cuyo caso utilice comillas dobles para evitar el escape.<\/p>
            var saludo = \"\u00a1Hola mundo!\nvar statement = \"Que tenga un buen d\u00eda\";<\/code><\/pre>
            Esta regla garantiza la coherencia en todo el c\u00f3digo base, lo que facilita que los desarrolladores sigan las mismas pr\u00e1cticas.<\/p>
            8. Declaraciones de cambio<\/strong><\/p>
            Las sentencias switch deben tener un romper<\/strong> para cada caso (excepto para el predeterminado) para evitar errores de ca\u00edda. Adem\u00e1s, sangrar declaraciones de caso<\/strong> deben estar en una pesta\u00f1a dentro del interruptor.<\/p>
            switch ( event.keyCode ) {\n    case $.ui.keyCode.ENTER:\n    case $.ui.keyCode.SPACE:\n        executeFunction();\n        break;\n    case $.ui.keyCode.ESCAPE:\n        cancelFunction();\n        break;\n    por defecto:\n        defaultFunction();\n}<\/code><\/pre>
            Una sangr\u00eda adecuada y el uso de pausas evitan comportamientos no deseados cuando se dan varios casos.<\/p>
            \"\"<\/figure>
            Mejores pr\u00e1cticas en el desarrollo JavaScript para WordPress<\/strong><\/p>
            1. Evite las variables globales<\/h4>
            Las variables globales pueden dar lugar a contaminaci\u00f3n del espacio de nombres<\/strong> y conflictos con otros scripts. En su lugar, encapsule su c\u00f3digo dentro de un Expresi\u00f3n de funci\u00f3n inmediatamente invocada (IIFE)<\/strong> para crear un \u00e1mbito local.<\/p>
            ( function() {\n    const localVar = '\u00c1mbito de esta funci\u00f3n';\n    \/\/ El c\u00f3digo aqu\u00ed est\u00e1 protegido del \u00e1mbito global\n} )();<\/code><\/pre>
            Encapsular el c\u00f3digo reduce el riesgo de conflictos, especialmente cuando se trabaja en entornos con m\u00faltiples bibliotecas de terceros.<\/p>
            2. Documentaci\u00f3n y comentarios<\/strong><\/p>
            WordPress sigue el Norma JSDoc 3<\/strong> para documentar el c\u00f3digo JavaScript. La documentaci\u00f3n es crucial para comprender la funcionalidad de m\u00e9todos, clases y funciones complejas.<\/p>
            • Comentarios de una l\u00ednea<\/strong>: Utilice \/\/<\/code> para explicaciones breves, sobre todo al describir una l\u00ednea de c\u00f3digo espec\u00edfica.<\/li>\n\n
            • Comentarios multil\u00ednea<\/strong>: Utilice \/* *\/<\/code> para explicaciones m\u00e1s detalladas o para describir un bloque de c\u00f3digo.<\/li><\/ul>
              \/**\n * Suma dos n\u00fameros.\n *\n * @param {number} a - El primer n\u00famero.\n * @param {number} b - El segundo n\u00famero.\n * @devuelve {number} Suma de a y b.\n *\/\nfunction add( a, b ) {\n    devuelve a + b;\n}<\/code><\/pre>
              Documentar el c\u00f3digo con JSDoc permite a las herramientas generar documentaci\u00f3n autom\u00e1ticamente y ayuda a los desarrolladores a comprender su c\u00f3digo sin tener que sumergirse en profundidad en la implementaci\u00f3n.<\/p>
              3. Tratamiento de errores<\/strong><\/p>
              Utilice intentar...atrapar<\/strong> para manejar los posibles errores con elegancia. La gesti\u00f3n de errores garantiza que los problemas inesperados no provoquen el fallo de toda su aplicaci\u00f3n.<\/p>
              try {\n    const datos = JSON.parse( jsonString );\n} catch ( error ) {\n    console.error( 'JSON no v\u00e1lido:', error );\n}<\/code><\/pre>
              Una gesti\u00f3n adecuada de los errores mejora la resistencia de su c\u00f3digo, facilitando su depuraci\u00f3n y mantenimiento.<\/p>
              Normas de codificaci\u00f3n de JavaScript en la pr\u00e1ctica<\/h3>
              Para asegurarse de que su c\u00f3digo JavaScript se adhiere a los est\u00e1ndares de WordPress<\/p>
              \"\"<\/figure>","protected":false},"excerpt":{"rendered":"
              Dominar los est\u00e1ndares de codificaci\u00f3n JavaScript de WordPress: Una gu\u00eda completa para desarrolladores Los est\u00e1ndares de codificaci\u00f3n JavaScript en WordPress son cruciales para mantener la coherencia, la legibilidad y un c\u00f3digo de alta calidad, ya sea...<\/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\/es\/wp-json\/wp\/v2\/posts\/1972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/comments?post=1972"}],"version-history":[{"count":6,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/1972\/revisions"}],"predecessor-version":[{"id":3542,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/posts\/1972\/revisions\/3542"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media\/3129"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/media?parent=1972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/categories?post=1972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/es\/wp-json\/wp\/v2\/tags?post=1972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}