Guía de desarrolladores de WordPress para ES2015 (ES6)

La comunidad de WordPress Developers está discutiendo actualmente JavaScript, especialmente lo que JavaScript Framework se utilizará en el núcleo de WordPress. Independientemente del marco elegido, está claro que WordPress empuja a un enfoque más moderno, centrado en JavaScript, del desarrollo de la UI. Customizer, Calypso y Gutenberg son ejemplos de tales desarrollos de la interfaz de usuario. Si recuerdas, en 2015, Matt dijo que “aprendiera un JavaScript profundo”, pero honestamente, no noté mucho. Sin embargo, recientemente decidí hacer un esfuerzo concertado para mejorar mi conocimiento de JavaScript. En este artículo, me gustaría compartir mis partes favoritas de ES2015, lo que agregará una nota de elegancia a su JavaScript.
¿Qué es ES2015? ¿Pero es6? Debo admitir que hasta hace poco no entendía completamente lo que es ES2015. Sabía que era una versión “más nueva” de JavaScript, pero también vi referencias a ES6 y Harmony. Asumí que todas eran versiones diferentes, pero en realidad son seudónimas de la versión 2015 de JavaScript. Harmony era el nombre original y luego ES6 (porque es la sexta versión principal de Ecmascript). Desde entonces, ES2015 ha sido renombrado por ECMA International. Las versiones futuras de JavaScript utilizarán el año en su nombre. Sin embargo, aquí están mis partes favoritas de ES2015:
Objetos mejorados
clases
módulos
Funciones de flecha
Promesas
Filas de plantillas
Parámetros predeterminados
Objetos mejorados Los objetos tienen algunas completaciones excelentes en ES2015: la estenografía del método puede usarse para declarar métodos de objeto utilizando un valor clave de valor, donde el valor es una función anónima: var utils = {increment: function (count) {return Count + 1; }}; Ahora puede omitir completamente la palabra clave de función: lima utils = {increment (count) {return count + 1; }}; ¡Mucho más limpio! Destrucción Cuando una función o método devuelve un objeto, no siempre necesita todos los valores del objeto. Considere una solicitud de AJAX que devuelva información sobre la aplicación además de cualquier dato que el servidor hubiera devuelto: VAR Respuesta = {Date: {}, Headers: {}, ResponseCode: 200,}; Por supuesto, puede acceder a las propiedades utilizando la notación con puntos: var data = respuesta.data; VAR ResponseCode = Response.ResponseCode; console.log (date, respuestas Code); // {}, 200, sin embargo, con la destrucción de los objetos, no tiene que asignar manualmente cada valor a una variable: var {data, respuestaseCode} = respuesta; console.log (date, respuestas Code); // {}, 200 Esto puede simplificar sus funciones o métodos, porque puede desempaquetar los valores que necesita de antemano: funciones handlerAponse ({data, respuestas -Code}) {console.log (fecha, responsabilidad); } En vez de:
Function handlerEponse (respuesta) {console.log (respuesta.data, respuesta.esponseCode); } Clases Los cursos siempre han sido algo engorrosos en JavaScript. También pueden ser difíciles de entender, especialmente para los usuarios para principiantes que están acostumbrados a los cursos de PHP. Esto se debe a que los métodos de clase en JavaScript están conectados al prototipo del objeto. Tomemos un formulario simple: // form.js formul (entradas) {this.inputs = inputs; } // constructor form.prototype.subMit = function (url) {// ajax post en servidor} // las clases de método ES2015 son más similares a las clases de PHP: formulario de clase {builder (inputs) {this.input = entradas; } enviar () {// Ajax Post al servidor}} También puede definir métodos estáticos. Entonces, en lugar de: form.inputhelper = function () {// método static} puede hacer: class form {builder (inputs) {this.input = inputs; } enviar () {// AJAX Post al servidor} Las clases estáticas inPuthelper () {// Método estático}} y puede acceder a los métodos de un padre utilizando el formulario Super Word: Class OrderForm extiende {Subt () {Super. Enviar (); // Haga algo después de AJAX POST al servidor}} Vale la pena señalar que esto es solo azúcar sintáctica. El enfoque basado en el prototipo todavía se usa debajo del capó. Aunque el resultado es el mismo, encuentro que las clases ES2015 son mucho más fáciles de leer.
Los módulos a medida que los proyectos se vuelven más complejos, a menudo se hace necesario dividir JavaScript en varios archivos. Para extender el ejemplo anterior agregando una adicción a la clase de formulario. La clase de errores se almacenará en un archivo separado: // form.js class form de {builder (entradas) {this.inputs = inputs; this.errors = new errores (); }}; // Errores de clase errores.js {}; Por lo general, cuando hace esto, incluye manualmente los scripts en la fuente de la página. Sin embargo, debe prestar atención al orden en que se cargan los archivos:
Escribir algunos pequeños componentes reutilizables en JavaScript no es nada nuevo, pero anteriormente un cargador de módulo como AMD, CommonJS o UMD, todos con diferentes sintaxis. Afortunadamente, los módulos ES2015 introducen un enfoque estándar para los módulos de carga. Desafortunadamente, hay un problema cuando se trata de módulos ES2015. Debido a que actualmente ningún navegador acepta funciones de importación o exportación, debe usar un paquete de módulos, como Rollup.js, Webpack o Babel. En el futuro, los navegadores importarán automáticamente cualquier adicción necesaria. Las funciones de flecha son mi complemento favorito para ES2015. Tienen tres ventajas principales: sintaxis concisa, la función de flecha tiene una sintaxis más corta que una función regular. Tomemos un controlador típico de eventos en los que pasamos un cierre del controlador: $ (elemento) .on (‘hacer clic’, function (evento) {console.log (‘¡Clicked!’);}); Con las funciones de flecha, puede escribir una versión más concisa, como sigue: $ (elemento) .on (‘hacer clic’, event => {console.log (‘¡Haga clic!’);}); Observe cómo se ha eliminado la palabra clave. Y debido a que el cierre no requiere ningún parámetro, puede simplificar esto:
$ (elemento) .on (‘hacer clic’, () => {console.log (‘Clicked!’);}); Si la devolución de llamada requiere más parámetros, solo tiene que colocarlos en los soportes:
$ (elemento) .on (‘Click’, (evento, Somedata, Moredata) => {Console.log (‘Clickked!’);}); También es posible omitir los aparatos ortopédicos completos cuando el cierre contiene solo una línea lógica: $ (elemento) .on (‘hacer clic’, () => console.log (‘haga clic!’)); Sin vincular estas funciones ordinarias definen su valor. Esto es problemático cuando se intenta acceder al contexto principal, por ejemplo, desde un cierre. Era una práctica ordinaria guardar una referencia a esto: var custom CustomComponent = {clickListener: function (element) {var self = this; $ (elemento) .on (‘hacer clic’, function (evento) {self.handleclicevent (evento);}); }, HandLeclicKeVent: function (event) {console.log (‘Elemento haga clic!’); }}; CustomComponent.ClickListener (‘Body’); Este enfoque ya no es necesario al usar funciones de flecha, porque esto hereda el contexto del padre. Var customComponent = {clickListener: function (elemento) {$ (elemento) .on (‘click’, (event) => this.handleclicKevent (event)); }, HandLeclicKeVent: function (event) {console.log (‘Elemento haga clic!’); }}; CustomComponent.ClickListener (‘Body’); Devuelto predeterminado Las devoluciones predeterminadas llevar una sintaxis concisa un paso más, lo que le permite omitir la devolución de la palabra clave. Esto es útil cuando se escribe funciones en una línea, generalmente en un cierre. Si tiene varios usuarios y desea devolver sus edades, puede mapear sobre la matriz: var users = [{nombre: ‘John Doe’, edad: 32,}, {nombre: ‘Jane Doe’, edad: edad: 31,}]; users.map (function (user) {return user.age;});
// [32, 31] Usando la sintaxis concisa y la retorno predeterminada, puede reescribir esto, de la siguiente manera: users.map (user => user.age);// [32, 31] Las funciones de las flechas pueden parecer algo crípticas a primera vista, pero una vez que te acostumbres a la nueva sintaxis, pronto apreciarás su elegancia.Pero antes de volverse loco y reemplazar todas las funciones ordinarias con funciones de flecha, recuerde que las funciones habituales tienen su lugar.Por ejemplo, si crea un controlador de clic simple para cambiar para mostrar un elemento, desea que esto esté relacionado con el elemento que hizo clic: $ (elemento) .on (‘hacer clic’, function () {this.togle () ;});
Cuando no usar una función de flecha WES BOS es una buena referencia para averiguar cuándo no son apropiadas las funciones de flecha. Promesas Las promesas se utilizan para tareas asincrónicas en las que es posible que no conozca el valor devuelto de inmediato. Un buen ejemplo a este respecto es cuando envía una solicitud AJAX, pero debe esperar una respuesta del servidor. Además, la demanda puede ser exitosa o fallar. Una promesa le permite administrar ambos escenarios, sin importar cuándo puedan ocurrir estos eventos. Una forma simple de pensar una promesa es: quiero realizar esta acción y cuando termina hacer esto o, en caso de falla, hacer esto. El siguiente retraso de DeletedTask () simula una solicitud AJAX. Después de 1 segundo, una promesa que fue resuelta o rechazada regresará. Una promesa resuelta es una que terminó con éxito, mientras que una promesa rechazada es una que falló. Cuando se trata de solicitudes de AJAX, cualquier otra cosa que no sea un código de respuesta de 200 servidor generalmente se rechazará: function demandarTtask () {return new promise ((resolve, rechazar) => {setTimeOut ()> {var rand = math.floor (Math.random () * 3) + 1; // número aleatorio entre 1 – 3 return rand === 2? Rechido (): resolve ();}, 1000);}); } Entonces puede manejar el resultado de la promesa usando entonces y atrapar: retrasoDTask () // Quiero realizar esta tarea .sen => Alert (‘Mira mamá, tengo éxito!’)) // Cuando se complete haz esto. Capt (() => alerta (‘¡Boooo! I fallé!’));
// Al fallar hacer esta cadena de plantillas en la programación, es común tener que construir una cadena con varios datos. En PHP, puede colocar una variable directamente en una cadena con cotizaciones dobles: $ output = “user {$ user-> name} es {$ user-> edad} años de edad”; Sin embargo, esto no fue posible antes de ES2015. O tenía que usar la concatenación de cadenas, o una tercera biblioteca de ayuda de fiesta, como el identificador: lima output = ‘user’ + user.name + ‘es’ + user.age + ‘años’. Las filas Templon (o literales de plantilla) mejoran en gran medida la legibilidad del código y reducen el riesgo de cadenas incorrectas. Para crear una plantilla de cadena, simplemente incluya la cadena en Backticks. Las variables deben ser impartidas por un signo de dólar y cerrarse con aparatos ortopédicos: lima output = `user {user.name} es $ {user.age} años antiguo. También puede usar cadenas de plantilla para cadenas de línea múltiple, que antes de ES2015 requería la concatenación de cadenas. console.log (`Línea de texto. Otra línea de texto. ‘); ¡Las letras de la plantilla son una gran ventaja! Parámetros predeterminados ¡Los parámetros predeterminados finalmente llegaron a JavaScript! Antes de su introducción, debe verificar manualmente el valor: function incrementCount (count) {count = count || 0; Recuento de retorno + 1; } Ahora puede especificar el valor predeterminado por adelantado, como lo hace en php: función incrementCount (count = 0) {return Count + 1;

} Incluso puede pasar una función como un parámetro predeterminado.Esto es útil si tiene que determinar dinámicamente el valor.En este ejemplo, se devuelve el valor predeterminado de 0, a menos que el usuario esté en la página /Sentirlucky: function getDefaultValue () {if (window.location.pathname === ‘sentirlucky’) {return math.floor (matemáticas. () * 100);} return 0;} función incrementCount (count = getDefault ()) {return Count + 1;