Share
Hoy, ECMAScript 6 está en proceso de finalización. ECMAScript es la base de JavaScript y, por lo tanto, explorar las características propuestas hoy también significa que tenemos un adelanto de cómo escribiremos JavaScript en un futuro cercano. En este artículo, exploraremos diez nuevas características, con un enfoque importante en herramientas, navegadores y transpilers.
JavaScript fue desarrollado originalmente por Brendan Eich de Netscape y lanzado oficialmente como parte de Netscape Navigator 2.0 en 1995. Un año más tarde, se presentó JavaScript a ECMA International, un organismo que facilita la estandarización de la tecnología de la información y la comunicación y la electrónica de consumo, para que se puede formalizar en la industria. ECMAScript, Así, se convirtió en el nombre del lenguaje de scripting estandarizado en ECMA-262..
El estándar ECMAScript forma la columna vertebral de muchos otros lenguajes derivados, incluidos ActionScript y JScript. A lo largo de los años, ECMAScript ha pasado por cuatro versiones, y las discusiones de hoy giran en torno a la versión seis, que también ha recibido el nombre clave, ECMAScript Harmony.
Antes de profundizar en estas nuevas funciones, es importante tener en cuenta que el estándar ECMAScript constituye la base de JavaScript. Existen diferencias numéricas entre cada una de las versiones de JavaScript y las ediciones correspondientes de ECMAScript. Esto quiere decir que JavaScript es compatible con el estándar ECMAScript, al tiempo que proporciona más funciones. La siguiente tabla resume la relación entre JavaScript y ECMAScript:
| Versión de JavaScript | Edición ECMAScript | Año |
| JavaScript 1.1 | Edición ECMAScript 1 | 1997 |
| JavaScript 1.5 | Edición ECMAScript 3 | 1999 |
| JavaScript 2.0 | ECMAScript Harmony | Trabajo en progreso |
JavaScript ha recorrido un largo camino desde sus humildes comienzos hace casi veinte años. Hoy en día, los desarrolladores están escribiendo miles de líneas de código creando aplicaciones complejas de JavaScript. Antes de profundizar en las características detalladas de ES6, es posible que desee ver el panorama general que se define en los borradores de especificaciones, en términos de requisitos, objetivos, medios y temas. Uno de los objetivos de ES6 es ser un mejor lenguaje para crear:
La tabla de compatibilidad de ES6 es muy útil, ya que nos dice las características de ES6 que son compatibles con el navegador actual. También nos brinda un enlace útil a las especificaciones para cada una de las funciones enumeradas. Tenga en cuenta que la existencia de algunas de las características puede no significar un cumplimiento total de las especificaciones. Cuando trabajes con Chrome, asegúrate de habilitar las marcas "Experimental JavaScript".
Ahora que hemos definido el panorama general, exploremos cómo podemos implementarlos. En las siguientes secciones, discutiremos diez características de ES6, usando varias herramientas para que podamos entender ES6 tanto en la teoría como en la práctica. El conocimiento previo de JavaScript es un requisito previo, así que no dude en consultar muchos recursos en JavaScript..
A continuación se enumeran las características que veremos con una herramienta diferente. Pruébalos uno por uno, o salta a la función específica que te gustaría explorar:
Accentsconagua
dejar [usando el navegador Firefox]const [usando el navegador Chrome]dejar dejar Las variables de JavaScript están en función de ámbito. Esto significa que, incluso si hay variables declaradas en un bloque anidado, están disponibles a través de la función. Repasemos un breve ejemplo a continuación; simplemente usaremos la consola web en Firefox o Chrome para ejecutarlos. ¿Cuál crees que será el valor de jsututo?
var jsFuture = "es6"; (function () if (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());
En el ejemplo anterior, el valor de jsututo en el console.log La declaración será "es5". Para su comprensión, es crucial el hecho de que, en JavaScript, las declaraciones de variables se elevan a la parte superior, pero las inicializaciones de variables, por otro lado, no lo son. Por lo tanto, independientemente de dónde se inicialicen y declaren las variables, dentro del alcance de la función, siempre se elevarán. El siguiente fragmento es exactamente el mismo, con comentarios para ilustrar esta característica del levantamiento de variables..
var jsFuture = "es6"; (function () // var jsFuture = undefined; // variable hoisting if (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); // "es5" ());
ES6 aborda este problema con dejar, que es como var, excepto por el hecho de que es un ámbito de bloque en lugar de un ámbito de función. Consideremos otro ejemplo con var abajo. Llamando a la función es [6] () nos dará el valor de i = 10. Note que, aunque var i = 0; se declara en el para bucle, el alcance de var i por defecto a global. Por lo tanto, cuando la función es [6] () se ejecuta, el valor de yo es 10.
var es = []; para (var i = 0; i < 10; i++) es[i] = function () console.log("Upcoming edition of ECMAScript is ES" + i); ; es[6](); // Upcoming edition of ECMAScript is ES10 
Vamos a usar ahora dejar. Para descartar esto, usaremos Firefox y abriremos la consola web a través del menú (Herramientas> Desarrollador web> Consola web). Creando una variable de ámbito de bloque dentro de para lazo, sea c = i; hecho bloque de ámbito.
var es = []; para (var i = 0; i < 10; i++) let c = i; es[i] = function () console.log("Upcoming edition of ECMAScript is ES" + c); ; es[6](); // Upcoming edition of ECMAScript is ES6 
Firefox ya es compatible con muchas características próximas de ES6. Consulte la tabla de cumplimiento de Firefox para mantenerse actualizado sobre qué funciones se admiten y cuáles también cumplen con la especificación actual.
const const Definiciones constantes son ahora posibles con const. dejar y const comportarse de manera similar en el sentido de que ambos son de ámbito de bloque, pero con const, los valores son de solo lectura y no se pueden volver a declarar más adelante. Repasemos un ejemplo de código simple en Chrome:
clase En los lenguajes de programación orientados a objetos, un clase Es una representación de un objeto. Forma el plano, mientras que un objeto es una instancia de una clase. Con respecto a JavaScript, es un lenguaje de programación sin clase y todo es un objeto. Tradicionalmente, hemos usado funciones y prototipos para implementar clases. Vamos a explorar una forma común de implementar clase en ES5.
var Language = function (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "fue creado por" + this.founder + "en" + this.year; ;
A continuación, veamos cómo ES6 implementa clases con una sintaxis de declaración de clase mínima que puede ser extremadamente importante para distinguir clases y funciones. Para codificar clase Usando la sintaxis de ES6, usaremos Traceur de Google, que es un transpiler que compila el código de ES6 en ES5. Primero, vamos a crear el html Estructura de archivos dentro de la cual insertaremos la sintaxis de ES6 para las clases. Para compilar el código Traceur, requerimos tanto traceur.js para compilar Traceur a JavaScript, así como bootstrap.js atarlos a todos. Finalmente, Traceur buscará tipo de script = "texto / traceur" Etiquetas para compilar el código relevante dentro de las etiquetas en JavaScript vainilla.
Clases de ES6
A continuación, dentro de la tipo de script = "texto / traceur" etiquetas, usemos la sintaxis ES6 para implementar la misma clase que hicimos anteriormente para Idioma.
clase Idioma constructor (nombre, fundador, año) this.name = nombre; este fundador = fundador; this.year = year; summary () return this.name + "fue creado por" + this.founder + "en" + this.year;
Ahora podemos crear una instancia de la clase de lenguaje abriendo el archivo HTML en el navegador Chrome como var js = nuevo idioma. En la consola, veremos las indicaciones para otras propiedades del idioma también.!
Con una declaración de sintaxis tan clara, también podemos pasar a extender la clase para implementar una subclase Metalenguaje que heredará todas las propiedades de la clase padre Idioma. Dentro de la función constructora, necesitaremos la función. súper que llamará al constructor de la clase padre para que pueda heredar todas sus propiedades. Por último, también podemos agregar propiedades adicionales, como versión, como se ilustra en el siguiente código. Revisemos la sintaxis de ES6 y ejecutémosla en el navegador Chrome:
la clase MetaLanguage extiende el lenguaje constructor (x, y, z, versión) super (x, y, z); this.version = version;
Traceur es un transpiler útil que nos permite codificar usando la sintaxis ES6, mientras que hacemos el trabajo pesado para que podamos compilarlo de nuevo a la versión actual de JavaScript. Prueba otras características de ES6 en Traceur también!
parámetros de función por defecto Con los parámetros de función predeterminados, siempre podemos tener parámetros de función como una opción configurando algunos valores predeterminados. La sintaxis de esta característica en ES6 es extremadamente intuitiva. Los parámetros predeterminados se definen cuando se definen las funciones. Veamos la sintaxis de ES6 a continuación en un nuevo archivo de TypeScript con una extensión de * .ts.
el historial de funciones (lang = "C", año = 1972) return lang + "se creó alrededor del año" + year;
A continuación, instalaremos TypeScript como un módulo npm y ejecutaremos el archivo. .* ts y compilarlo a JavaScript vainilla. Aquí están los comandos de instalación y luego compilación en la línea de comandos:
$ npm install -g typescript $ npm view mecanografiado versión 0.8.3 $ tsc 4-default-params.ts
El comando anterior creará un archivo JavaScript de vainilla, llamado 4-default-params.js, que luego puede ser llamado desde un archivo HTML. Aquí está el simple archivo HTML que llamará al archivo externo de JavaScript creado por el compilador de TypeScript:
Parámetros por defecto de ES6
Finalmente, abriremos el archivo HTML en Chrome / Firefox y llamaremos a la función historia() Dos veces, con y sin los parámetros de función. Tenga en cuenta que si no pasa ningún parámetro de función, volverá a los parámetros predeterminados:
Echa un vistazo a otras características de TypeScript, incluyendo clase o vaya a través de un tutorial de TypeScript para un uso más profundo.
ES6 ofrece nuevas estructuras de datos que anteriormente no estaban disponibles en JavaScript. Antes de comenzar a explorar dos estructuras de datos de este tipo (Conjuntos y mapas), veamos cómo podemos ejecutar la sintaxis ES6 con NodeJS. Instale NodeJS; De aquí en adelante, trabajaremos en la línea de comando. En primer lugar, verificaremos la versión de NodeJS instalada y luego comprobaremos qué opciones habilitarán las características de ES6 con el comando nodo --v8-opciones | grep armonía.
$ node --version v0.10.4 $ node --v8-options | grep harmony --harmony_typeof (habilitar la semántica de la armonía para typeof) --harmony_scoping (habilitar el alcance del bloque de armonía) --harmony_modules (habilitar módulos de armonía (implica el bloqueo del alcance)) --harmony_proxies (habilitar los proxies de armonía) --harmony_collections (habilitar las colecciones de armonía ( conjuntos, mapas y mapas débiles)) --harmonía (habilita todas las funciones de armonía (excepto typeof))
A continuación, inicie la respuesta de NodeJS y consulte qué propiedades están disponibles para Set y Maps. Comenzaremos la respuesta de NodeJS con nodo - armonía para habilitar todas las características de ES6.
$ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'add', 'has', 'delete']> Object.getOwnPropertyNames (Map.prototype) ['constructor', 'get', ' set ',' has ',' delete ']> .exit $
Los conjuntos son estructuras de datos simples que son similares a las matrices, pero cada valor es único. Vamos a crear un nuevo archivo, llamado 5-sets.js, e inserte un código para crear, agregar, eliminar y consultar el nuevo conjunto que crearemos. Además, tenga en cuenta que agregaremos datos de "Hipopótamo" dos veces, pero en el conjunto, se registrará solo una vez.!
motores var = set nuevo (); // crear nuevos Set engines.add ("Gecko"); // agregar a Set engines.add ("Trident"); engines.add ("Webkit"); engines.add ("Hippo"); engines.add ("Hippo"); // nota que Hippo se agrega dos veces console.log ("Los motores del navegador incluyen Gecko?" + engines.has ("Gecko")); // true console.log ("Los motores del navegador incluyen Hippo?" + engines.has ("Hippo")); // true console.log ("¿Los motores del navegador incluyen Indigo?" + engines.has ("Indigo")); // false engines.delete ("Hippo"); // eliminar item console.log ("Se eliminó Hippo. Los motores del navegador incluyen Hippo?" + engines.has ("Hippo")); // falso Ejecuta el archivo en el nodo repl con el comando. nodo --harmony 5-set.js. Tenga en cuenta que, aunque "Hippo" se agregó dos veces al conjunto, al eliminarlo, el conjunto ya no lo incluía. Esto una vez más ilustra que un conjunto es una estructura de datos que solo puede contener valores únicos.
Los mapas son bastante similares a los pares de clave-valor del objeto JavaScript. Usando una clave única, podemos recuperar el valor. En ES6, la clave puede ser cualquier tipo de datos JavaScript y no solo cadenas. Esa es la parte interesante! Vamos a crear un nuevo archivo, llamado 5-map.js, para probar las funciones de crear, obtener y eliminar:
var es6 = nuevo Mapa (); // crear nuevo Mapa es6.set ("edition", 6); // la clave es la cadena es6.set (262, "standard"); // la clave es el número es6.set (no definido, "nah"); // la clave no está definida var hello = function () console.log ("hello");; es6.set (hola, "Hola ES6!"); // la tecla es la función console.log ("¿El valor de 'edición' sale?" + es6.has ("edición")); // true console.log ("Valor de 'año' sale?" + es6.has ("años")); // false console.log ("¿Valor de 262 salidas?" + es6.has (262)); // true console.log ("¿Valor de las salidas no definidas?" + es6.has (no definido)); // true console.log ("El valor de hello () sale?" + es6.has (hello)); // true es6.delete (indefinido); // eliminar map console.log ("¿Valor de las salidas no definidas?" + es6.has (no definido)); // false console.log (es6.get (hello)); // ¡Hola ES6! console.log ("El trabajo está en curso para ES" + es6.get ("edición")); // El trabajo está en progreso para ES6 
Como se muestra con las características de las colecciones de ES6, la opción de armonía de NodeJS ya es compatible con otras características de ES6 como el alcance del bloque, proxies y módulos. Pruébalos en NodeJS también!
En los lenguajes de programación, el término "desestructuración" denota la coincidencia de patrones. En ES6, podemos hacer una coincidencia de patrones bastante ingeniosa en matrices y objetos que antes nos habrían llevado más de un paso. Exploremos algunos de ellos codificándolos en la consola web de Firefox.
Con la destrucción de matrices, podemos inicializar variables a la vez, o incluso intercambiarlas en lugar de tener la forma convencional de crear un temp temp; variable temporal.
var [inicio, final] = ["tierra", "luna"] // inicializa console.log (inicio + "llamando" + final); // earth calling moon [inicio, final] = [final, inicio] // variable swapping console.log (inicio + "llamando" + final); // luna llamando a la tierra
La destrucción también se convierte en una taquigrafía útil cuando se devuelven varios valores desde una función, ya que ya no necesitamos envolver un objeto. Además, para omitir ciertas variables, simplemente deje el elemento de matriz vacío:
función equinoccio () retorno [20, "marzo", 2013, 11, 02]; var [fecha, mes,,,] = equinoccio (); console.log ("El equinoccio de este año estaba en" + fecha + mes); // El equinoccio de este año fue el 20 de marzo. 
Debido a la desestructuración, las variables también se pueden inicializar desde un objeto que se devuelve desde una función, incluso con objetos profundamente anidados. Además, al igual que los patrones de matriz, podemos omitir los que no son necesarios. Aquí está el fragmento de código que ilustra esto:
function equinox2 () return fecha: 20, mes: "marzo", año: 2013, hora: hora: 11, // minuto anidado: 2; var fecha: d, mes: m, hora: hora: h = equinox2 (); // h tiene el valor de la propiedad anidada, mientras que "año" y "minuto" se omiten totalmente console.log ("El equinoccio de este año estaba en" + d + m + "en" + h); // El equinoccio de este año fue el 20 de marzo a las 11. 
En ES6, los parámetros de descanso nos permiten usar fácilmente algunos parámetros fijos en una función, junto con el resto de los parámetros de seguimiento y variables. Ya usamos argumentos, que es un objeto similar a una matriz que define los argumentos pasados a una función, pero claramente no podemos usar la función de matriz para manipular estos argumentos. Con una sintaxis clara en ES6, también mueve la intención del desarrollador al nivel de sintaxis con tres puntos ... para denotar un número variable de argumentos.
Intentemos utilizar los parámetros de descanso en la sintaxis de ES6 con gruntjs y su complemento para el transpiler traceur, que usamos en la sección anterior.
Instalar la utilidad de línea de comandos grunt:
$ npm desinstala -g grunt $ npm instala -g grunt-cli
Crea un archivo, llamado paquete.json, que definirá los distintos módulos necesarios para ejecutar Grunt. Tenga en cuenta que esta lista de dependencias incluye el complemento traceur:
"name": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
Crear el Gruntfile.js que contendrá una sola tarea traceur que convertirá la sintaxis de ES6 al JavaScript de hoy. Con esto, podremos probar los parámetros de descanso ES6..
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), traceur: custom: files: 'js /': ['rest-spread.js '] // dest: [archivos fuente]); grunt.loadNpmTasks ('grunt-traceur'); grunt.registerTask ('predeterminado', ['traceur']); ; Crear un simple index.html para llamar al archivo JavaScript compilado por traceur, js / rest-spread.js:
Parámetros de ES6 Rest
Lo más importante, vamos a crear el archivo. rest-spread.js, que contendrá la sintaxis del resto de parámetros:
function push (array, ... items) // definiendo los parámetros de descanso con elementos de sintaxis de 3 puntos.forEach (function (item) array.push (item); console.log (item);); // 1 fijo + 4 parámetros variables var planets = []; console.log ("Los planetas interiores de nuestro sistema solar son:"); empuje (planetas, "Mercurio", "Venus", "Tierra", "Marte"); // parámetros de descanso Por fin vamos a correr gruñido en la línea de comandos, que, de forma predeterminada, ejecutará la tarea traceur y creará el archivo, js / 5-rest-spread.js. A continuación, simplemente ver el archivo index.html en la consola del navegador:
$ npm install $ grunt ╰─ $ grunt Ejecutando "traceur: custom" (traceur) tarea js / ['rest-spread.js'] Compilando ... js / Compilación exitosa - js / Escribiendo ... js / js / rest-spread.js exitoso. Escritura exitosa - [objeto Objeto]
Un operador de propagación es lo contrario de los parámetros de descanso. Al llamar a una función, podemos pasar el argumento fijo que se necesita junto con una matriz de un tamaño variable con la sintaxis familiar de tres puntos, para indicar el número variable de argumentos.
Utilizaremos el mismo proyecto que el resto de parámetros anteriores y agregaremos el código del operador de propagación al archivo rest-spread.js. En el siguiente ejemplo, la función requiere seis argumentos separados. Al llamar a la función, los datos se pasan como una matriz con el operador de propagación. Veamos cómo se ve la sintaxis, cuando se llama a la función con argumentos fijos, así como un número variable de argumentos:
Agregue el código de operador de propagación a rest-spread.js:
// Operador de propagación "... weblink" createURL (comentario, ruta, protocolo, subdominio, dominio, tld) var shoutout = comment + ":" + protocol + ": //" + subdomain + "." + dominio + "." + tld + "/" + ruta; console.log (shoutout); var weblink = ["hipertexto / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Primer sitio web del mundo"; createURL (comentario, ... enlace web); // operador de propagación
Ejecute la compilación de traceur a través de la tarea Grunt en la línea de comandos y vea el archivo, index.html, en el navegador:
$ grunt Ejecución de "traceur: custom" (traceur) tarea js / ['rest-spread.js'] Compilación ... js / Compilación correcta - js / Writing ... js / js / rest-spread.js exitosa. Escritura exitosa - [objeto Objeto] Hecho, sin errores.
Si ya está utilizando GruntJS como herramienta de compilación en su proyecto actual, será fácil integrarlo con los complementos de ES6. Así que pruebe otros complementos relacionados con GruntJS ES6 para compilar la sintaxis ES6 al JavaScript actual.
Ofertas de JavaScript para-en Para iteración, pero tiene algunas limitaciones. Por ejemplo, en una iteración de matriz, los resultados con una para-en El bucle nos dará los índices y no los valores. Echemos un vistazo al siguiente código para ilustrar esto:
planetas var = ["Mercurio", "Venus", "Tierra", "Marte"]; para (p en planetas) console.log (p); // 0,1,2,3 var es6 = edición: 6, comité: "TC39", estándar: "ECMA-262"; para (e en es6) console.log (e); // edición, comité, norma
Probemos el mismo concepto, pero, esta vez, con para-de con una matriz, un conjunto y un mapa:
planetas var = ["Mercurio", "Venus", "Tierra", "Marte"]; para (p de planetas) console.log (p); // Mercury, Venus, Earth, Mars var engines = Set (["Gecko", "Trident", "Webkit", "Webkit"]); para (var e de motores) console.log (e); // El conjunto solo tiene valores únicos, por lo tanto, Webkit muestra solo una vez var es6 = new Map (); es6.set ("edición", 6); es6.set ("comité", "TC39"); es6.set ("estándar", "ECMA-262"); para (var [nombre, valor] de es6) console.log (nombre + ":" + valor); 
Las comprensiones de matriz nos dan una sintaxis abreviada para manipular cada uno de los contenidos de la matriz en un determinado patrón. Es muy similar a la mapa() o filtrar() Métodos disponibles en el objeto Array. Vamos a examinar cómo estamos usando mapa()
temperatura var = [0, 37, 100]; función degToKelvin (deg) return deg + 273; temperature.map (degToKelvin); // [273, 310, 373]
Analicemos la misma función en Firefox para ver la sintaxis abreviada en ES6 para crear arreglos con hasta tres bucles para crear posibles soluciones para el juego, Cluedo:
// Array creado con 1 loop var temperature = [0, 37, 100]; [t + 273 para (t de temperatura)]; // [273, 310, 373] // Arreglo creado con 3 bucles var sospechosos = ["Miss Scarlet", "Coronel Mustard"], armas = ["Candelabro", "Daga"], cuartos = ["Cocina", "Salón de baile"]; [(console.log (s + "con un" + w + "en el" + r)) para (s de sospechosos) para (w de armas) para (r de cuartos)];
En los lenguajes de programación, los módulos realizan funciones discretas aisladas y son independientes entre sí. Esto ayuda no solo a construir componentes reutilizables en los proyectos, sino que también mantiene los errores aislados en las partes relacionadas con el proyecto actual. Hemos estado creando módulos en JavaScript normalmente con AMD o CommonJS. Vamos a crear un módulo simple usando la sintaxis ES6 y el transpiler del Módulo ES6.
Primero, vamos a crear el archivo HTML, index.html, Eso llamará a los JavaScripts esenciales. Usaremos RequireJS como un cargador de AMD; por lo tanto, nos referimos a una copia CDN del último archivo RequireJS. A continuación, también añadimos el atributo., principal de datos, sobre el guión etiqueta para decirle a RequireJS que cargue el js / init.js expediente.
Módulos ES6
Ahora, vamos a crear el archivo., js / init.js, que simplemente invocará el js / main.js expediente:
require (['main'], function () );
Crear el modulo, circulo, en el archivo, en / circle.js, en la sintaxis de ES6. Este módulo exporta dos funciones:
área de función de exportación (radio) return Math.PI * radio * radio; exportar la circunferencia de la función (radio) return 2 * Math.PI * radio;
Crear el archivo, en / main.js, Eso importará el módulo. circulo para que podamos usar las funciones de ese módulo en particular. Observe la importar sintaxis:
importar área, circunferencia desde 'círculo'; console.log ("Área del círculo:" + área (4) + "metro cuadrado"); console.log ("Circunferencia del círculo:" + circunferencia (14) + "metros"); En este punto, la estructura de carpetas se muestra a continuación. Usaremos el transpiler del módulo ES6 para crear un código compatible con ES5 con dos archivos recién creados: js / circle.js y js / main.js.
$ arbol. | - en | | - circle.js | '- main.js | - index.html' - js '- init.js
Instale el Transpiler de Módulo ES6:
$ npm instale https://github.com/square/es6-module-transpiler.git $ compile-modules --help
Finalmente, transpilaremos estos dos archivos. Navega a la carpeta, en, desde la línea de comando:
$ compile-modules circle.js --type amd --to… / js $ compile-modules main.js --type amd --to… / js $ cd… $ tree. | - en | | - circle.js | '- main.js | - index.ht
