5 características de JavaScript que debe saber para desarrollarse en Gutenberg

En 2016, Matt Mullenweg nos dijo: Te daré algunos temas: JavaScript aprende (…) porque es el futuro de la web. Matt Mullenweg (en YouTube) No sé si siguiste su consejo hace tres años, pero si no lo hiciste, no puedes posponer. El lanzamiento oficial del editor de Block ha obligado a muchos desarrolladores a subir a JavaScript. El lenguaje se está volviendo cada vez más relevante en WordPress y, si no queremos quedarnos atrás, debemos mejorar nuestras habilidades con él. En el pasado, escribí una publicación sobre lo que puedes hacer usando Vanilla JavaScript, sin bibliotecas como JQuey. Hoy quiero dar un paso más y explicar algunas de las noticias que se encuentran en las nuevas versiones de JavaScript y que son la primera vez que las ve. Creo que es importante conocerlos, porque están presentes en todos los nuevos proyectos de JavaScript (incluido Gutenberg, por supuesto).
¡Aprendamos JavaScript con Gutenberg! #1 – Destrucción de objetos y pinturas Suponga que queremos ver cómo funciona la interfaz de edición de un párrafo en Gutenberg. Si ha leído nuestras publicaciones anteriores sobre Gutenberg, sabe que debemos ver el componente de edición del bloque relevante. En nuestro caso, este componente es párrafo y lo primero que encontraremos en su método de representación, la línea 127, es esto:
¿Qué son todo esto? Bueno, comencemos con algo más fácil. Imagina que tienes un objeto como el siguiente:
La destrucción de objetos y matrices permite desempacar los valores de matriz o propiedades de objetos en variables distintas:
Con una sola declaración, podríamos recuperar la identificación, el título y la publicación de contenido. Y esto es exactamente lo que Gutenberg estaba haciendo en nuestro primer fragmento: extrajimos los atributos del objeto, la función de los establecimientos, el atributo de OSRTL, etc. De esto. Propiedades. Un poco más confundido, pero igual de interesante, es la posibilidad de extraer atributos de objetos vestidos. Es decir, comenzando desde un objeto para que: podamos tomar los valores en la publicación, así como los valores de un objeto vestido, como ID o nombre en el autor:
Ahora tenga cuidado: cada vez que destruimos un objeto, las variables que creamos tienen los mismos nombres que los atributos que extraemos. Esto plantea la pregunta: ¿qué pasaría si queremos recuperar más atributos de identificación de diferentes artículos vestidos? Por ejemplo, en nuestro caso, tanto la publicación como el autor del objeto vestido tienen una identificación, así que …
¿Podemos obtener estos dos valores? La solución consta de aliados:
Es decir, podemos especificar el atributo que queremos extraer (por ejemplo, autor.id) y el nombre de la variable que mantendrá su valor (autorid) a la vez. Finalmente déjame decirte que la destrucción funciona con Matrix:
así como los parámetros de la función. Es decir, si uno de los parámetros en nuestra función es un objeto, podemos destruirlo en la definición de la función misma:
Bastante útil, ¿verdad? #2 – Sagon funciona otro ejemplo bastante común. Si echas un vistazo a los subtítulos de los bloques de imágenes de Gutenberg, verás lo siguiente en la línea 693:
¿Cuál es el valle de los soportes? ¿Por qué hay una flecha? ¿Qué hay de los establecimientos con aparatos ortopédicos en el interior? Argh !! Bueno, descifremos este paso a paso. Cuando ves una flecha CA =>, acaba de cumplir con una función de flecha. Una función de flecha puede ser extremadamente similar a las funciones clásicas, pero uso una sintaxis ligeramente diferente: la principal ventaja de las funciones de flecha es que pueden simplificarse aún más, haciendo que el código sea aún más compacto. Por ejemplo, si su función tiene solo una instrucción, puede guardar los aparatos ortopédicos y el retorno de la palabra clave, ya que la función devolverá automáticamente el resultado de sus únicas instrucciones:
Otra simplificación que podemos hacer son los soportes en la lista de argumentos. Si escribimos una función que tiene un solo parámetro, los soportes se vuelven opcionales:
#3 – Los operadores de expansión y descanso de regreso al bloque de párrafo, echen un vistazo a la fila 64:
¿Que demonios? Bueno, déjame presentarte al operador de dispersión: …. La sintaxis de propagación permite la expresión de una iterable, como una expresión de matriz o cadena, en lugares donde se esperan cero o más argumentos (para funciones) o elementos (para literales de matriz) o una expresión de objeto (para extender en lugares donde cero o más se esperan pares clave valiosos (para literales de objetos).

Comencemos con el ejemplo más simple. Supongamos que tenemos una matriz con un cierto número de elementos y queremos ponerla en otra pintura. Podemos lograr esto con:
Con él, “extendemos” (de ahí el nombre del operador) los elementos de una pintura (lista) en el otro (resultado). Esto también funciona con objetos:
Ahora mire el siguiente ejemplo (que es una copia del ejemplo de Gutenberg con el que abrí esta sección): si extienden dos objetos que tienen propiedades comunes, el objeto resultante contendrá la unión de propiedades de ambos objetos y para cada uno ” repetir “, contiene el valor del objeto correcto. Por lo tanto, por ejemplo, el atributo de título que se repite en ambos objetos, contiene el valor del objeto Newattributes, mientras que los otros atributos (autor, por un lado, por el otro, aparecen como resultado de los únicos valores que podría contener. .
#4 – Las letras literales de şablon se usan ampliamente en Gutenberg. Puede ver un ejemplo en el siguiente index.js, línea 133:
O, aún más complicado, en línea 136:
La plantilla literal es una cadena literal que permite expresiones incorporadas. Puede usar cadenas con múltiples líneas y funciones de interpolación de cadenas. Fueron llamados “cadenas de plantilla” en las ediciones anteriores de la especificación ES2015. Aquí tienes otro ejemplo similar al primero que acabo de ver:
Ahora, ¿qué pasó en el segundo ejemplo? Básicamente, creamos un objeto con propiedades cuyos “nombres” son dinámicos (algunos usan una variable, otros usan plantilla literal). Veamos eso con un ejemplo más corto:
Más fácil de lo que esperabas, ¿no? # 5 – Adiós y cuánto tiempo, me gustaría terminar esta publicación con algunas funciones que son muy útiles para trabajar con Matrix y con las que ya debería estar familiarizado. Ambos se pueden encontrar, por ejemplo, en el bloque de columnas Gutenberg. De hecho, estoy hablando de MAP (línea 136) y se reduce (línea 119). Veamos cuál es cada uno de ellos y cómo puede usarlos. El método del mapa crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento en la matriz de llamadas: prácticamente, es un método que se ejecuta a través de todos los elementos de una pintura (este es el foro) y aplica una función en cada uno elemento (el “cuerpo” del clásico para).
El método se reduce es muy similar al MAP, pero en lugar de devolver una matriz cuyos elementos son el resultado de aplicar una función de los elementos originales, devuelve un único valor. Es decir, un método que le permite aplicar una función a una batería y cada valor de una pintura (de izquierda a derecha) para reducirla a un solo valor. P.ej:
La conclusión, como puede ver, las nuevas versiones de JavaScript agregan construcciones que permiten la escritura más eficiente y cómoda, pero su sintaxis puede confundirse al principio. Espero que la publicación de hoy te haya ayudado a comprender qué hay de nuevo en JavaScript y cómo usar sus nuevas estructuras y funciones.