{"id":229717,"date":"2022-11-17T11:07:00","date_gmt":"2022-11-17T08:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229717"},"modified":"2022-11-17T11:07:38","modified_gmt":"2022-11-17T08:07:38","slug":"creacion-de-componentes-jquery-en-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/creacion-de-componentes-jquery-en-wordpress\/","title":{"rendered":"Creaci\u00f3n de componentes jQuery en WordPress"},"content":{"rendered":"\n

El desarrollo front-end ha dado grandes pasos en los \u00faltimos a\u00f1os (y contin\u00faa haci\u00e9ndolo) mediante el uso de preprocesadores CSS<\/a> y varias tecnolog\u00edas basadas en JavaScript.<\/p>\n

Lo bueno es que todos estos todav\u00eda se pueden usar en el contexto del desarrollo de WordPress; sin embargo, dado que WordPress incluye jQuery, no es raro continuar escribiendo JavaScript basado en jQuery.<\/p>\n

A pesar de todas las diversas tecnolog\u00edas (como Angular<\/a>, Vue<\/a>, React<\/a>, etc.), sigo usando jQuery<\/a> y ES6<\/a> m\u00e1s que otras bibliotecas y herramientas.<\/p>\n

Para tareas simples, no es un problema, pero cuando se necesita, por ejemplo, construir componentes m\u00e1s avanzados basados \u200b\u200ben la respuesta de una llamada API, usar jQuery puede ser un poco complicado.<\/p>\n

Esto no significa que no se pueda usar, y explicar\u00e9 c\u00f3mo usarlo para construir componentes moment\u00e1neamente de forma din\u00e1mica, pero creo que presenta un caso en el que otras opciones son m\u00e1s variables.<\/p>\n

Pero m\u00e1s sobre eso al final de la publicaci\u00f3n.<\/p>\n

Creaci\u00f3n de componentes jQuery en WordPress<\/h2>\n

Cada vez que me refiero a la idea de un componente, estoy pensando en una combinaci\u00f3n de elementos que trabajan juntos para crear un elemento m\u00e1s complejo.<\/p>\n

Por ejemplo, supongamos que realiza una llamada a la API y luego, utilizando la respuesta, necesita crear un componente compuesto por otros elementos.<\/p>\n

Definici\u00f3n y dibujo de un componente<\/h3>\n

Entonces, para empezar, creo que es una buena manera de definir un componente: un elemento que se compone de una combinaci\u00f3n de elementos.<\/p>\n

Al menos eso es lo que voy a usar para esta publicaci\u00f3n en particular.<\/p>\n

A continuaci\u00f3n, \u00bfc\u00f3mo podr\u00edamos visualizar esto en t\u00e9rminos antes de codificarlo? Tal vez algo como esto:<\/p>\n

Nuevamente, todo esto se basa en la idea de realizar una solicitud de API y trabajar en los datos.<\/p>\n

Hacer la llamada a la API<\/h3>\n

Hacer una llamada API usando la API de WordPress es algo que he cubierto en algunas publicaciones (y si est\u00e1 buscando la forma m\u00e1s segura de hacerlo, le recomiendo leer esta publicaci\u00f3n<\/a> ).<\/p>\n

Pero el flujo de control se ver\u00eda as\u00ed:<\/p>\n

\"Creaci\u00f3n<\/a><\/p>\n

Y el c\u00f3digo para hacerlo ser\u00eda algo como esto<\/a> :<\/p>\n

$.get(acme_ajax_object.ajax_url, {\n\n  action:   'get_data',\n  security: acme_ajax_object.security\n\n}, function(response) {\n\n  \/\/ More to come...\n\n});<\/code><\/pre>\n
Pero eso todav\u00eda no nos lleva al punto de construir el componente a partir de la respuesta.<\/p>\n
Trabajar con la respuesta<\/h3>\n
El siguiente bit es todo sobre c\u00f3mo optas por escribir tu JavaScript. No estoy afirmando que la forma en que lo hago sea la forma de hacerlo, pero es una forma de hacerlo.<\/p>\n
De todos modos, para esta publicaci\u00f3n, suponga que vamos a recuperar algunos datos de la API y que tenemos la garant\u00eda de tenerlos (esto nos evita tener que escribir cl\u00e1usulas de protecci\u00f3n).<\/p>\n
Adem\u00e1s, nos permite completar las variables necesarias para construir nuestro componente. Por lo tanto, mantengo el c\u00f3digo lo m\u00e1s simple posible<\/a>.<\/p>\n
var $container = $('#component-container'),\n    i, l       = 0;\n\n$.get(acme_ajax_object.ajax_url, {\n\n  action:   'get_data',\n  security: acme_ajax_object.security\n\n}, function( response) {\n\n  for( i = 0, l = response.data.length; i < l; i++) {\n    $container.append(\n      _createComponent(response.data[i])\n    );\n  }\n\n});<\/code><\/pre>\n
Desde aqu\u00ed, ahora podemos configurar un m\u00e9todo que crear\u00e1 un componente y devolver\u00e1 el resultado que nos permitir\u00e1 agregarlo al DOM.<\/p>\n
Poniendolo todo junto<\/h3>\n
Seg\u00fan el c\u00f3digo anterior, deber\u00eda quedar relativamente claro lo que debe hacer para crear el componente.<\/p>\n
A\u00fan as\u00ed, ponerlo todo junto es un proceso que requiere lo siguiente:<\/p>\n
    \n
  1. haciendo la solicitud,<\/li>\n
  2. leyendo la respuesta,<\/li>\n
  3. construir un componente basado en la respuesta<\/li>\n<\/ol>\n
    \/**\n * Creates a component to be added from the DOM based on the incoming data.\n *\n * For the purposes of this function, we're assuming there are several properties\n * on data of which we're already aware.\n *\n * @param data  The object containing the properties we need for the component.\n *\n * @return      The component created from the incoming data.\n *\/\nfunction _createComponent(data) {\n\n  var title       = data.title,\n      imageUrl    = data.imageUrl,\n      description = data.description,\n      $component  = $('<div ><\/div>');\n\n  $component\n    .append(\n      $('<p ><\/p>').text(title)) .append(\n      $('<img \/>').attr('src', imageUrl)) .append(\n      $('<p ><\/p>').text(description)\n    );\n\n  return $component;\n}<\/code><\/pre>\n
    El c\u00f3digo anterior deber\u00eda explicarse por s\u00ed mismo, pero si no, est\u00e1 haciendo lo siguiente<\/a> :<\/p>\n
      \n
    1. Tomando informaci\u00f3n de la respuesta, como el t\u00edtulo, la URL de la imagen y la descripci\u00f3n,<\/li>\n
    2. creando elementos de cada uno de ellos,<\/li>\n
    3. a\u00f1adi\u00e9ndolos a un elemento div<\/strong><\/li>\n
    4. devolver el\u00a0 elemento div<\/strong> despu\u00e9s de que se le hayan agregado las distintas piezas.<\/li>\n<\/ol>\n
      A partir de ah\u00ed, puede tomar el elemento, el componente, y agregarlo a un contenedor (como se muestra anteriormente en el c\u00f3digo) y luego continuar haci\u00e9ndolo con el resto de la informaci\u00f3n de la respuesta.<\/p>\n
      \u00bfUtiliza otras tecnolog\u00edas de JavaScript?<\/h2>\n
      Como se mencion\u00f3 al comienzo de la publicaci\u00f3n, se trata de mucho trabajo con respecto a jQuery para crear un componente para agregar al DOM.<\/p>\n
      Combine esto con la naturaleza receptiva (no receptiva en t\u00e9rminos de dise\u00f1o m\u00f3vil sino en t\u00e9rminos de partes de una pantalla que responden a cambios en la capa de presentaci\u00f3n), y tiene un caso bastante bueno para usar una tecnolog\u00eda diferente para hacer algo como esto.<\/p>\n
      Pero a\u00fan as\u00ed, hay proyectos que requerir\u00e1n una cierta pila, y si jQuery es parte de esa pila, entonces esta es una forma de seguir adelante y hacer precisamente eso.<\/p>\n
      Fuente de grabaci\u00f3n:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
      Aunque otras tecnolog\u00edas pueden ser m\u00e1s adecuadas para esto, aqu\u00ed se explica c\u00f3mo crear componentes jQuery en WordPress para usarlos cuando se trabaja con Ajax.<\/p>\n","protected":false},"author":1,"featured_media":224394,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,727,914,840],"tags":[1172],"class_list":["post-229717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-javascript-2","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229717"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229717\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224394"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}