Share
Astăzi, ECMAScript 6 este în curs de finalizare. ECMAScript este fundamentul JavaScript și, prin urmare, explorarea caracteristicilor propuse astăzi înseamnă, de asemenea, că vom obține un vârf de sneak la modul în care vom fi scris JavaScript în viitorul apropiat! În acest articol, vom explora zece noi caracteristici, cu un accent deosebit pe instrumente, browsere și transpilatoare.
JavaScript a fost inițial dezvoltată de Brendan Eich de la Netscape și a fost lansată oficial ca parte a programului Netscape Navigator 2.0 în 1995. Un an mai târziu, JavaScript a fost trimis la ECMA International, un organism care facilitează standardizarea tehnologiei informației și comunicațiilor și a electronicii de consum. pot fi formalizate din punct de vedere industrial. ECMAScript, astfel, a devenit numele limbii de scripting standardizate în ECMA-262.
Standardul ECMAScript formează coloana vertebrală a multor alte limbi derivate, inclusiv ActionScript și JScript. De-a lungul anilor, ECMAScript a trecut prin patru versiuni, discuțiile de astăzi foarte revolving în jurul versiunii șase, care a fost denumită și cod, ECMAScript Harmony.
Înainte de a ne arunca cu capul în aceste noi caracteristici, este important să rețineți că standardul ECMAScript formează baza JavaScript-ului. Există diferențe numerice între fiecare dintre versiunile JavaScript și edițiile ECMAScript corespunzătoare. Aceasta înseamnă că JavaScript este compatibil cu standardul ECMAScript, oferind în același timp mai multe funcții. Tabelul de mai jos rezumă relația dintre JavaScript și ECMAScript:
| Versiunea JavaScript | ECMAScript Edition | An |
| JavaScript 1.1 | ECMAScript ediția 1 | 1997 |
| JavaScript 1.5 | ECMAScript ediția 3 | 1999 |
| JavaScript 2.0 | ECMAScript Harmony | Lucrați în desfășurare |
JavaScript a parcurs un drum lung de la începuturile sale umile cu aproape douăzeci de ani în urmă. Astăzi, dezvoltatorii scriu mii de linii de cod care creează aplicații JavaScript complexe. Înainte de a se arunca cu capul în detaliile caracteristice ale ES6, vă recomandăm să vă uitați la imaginea de ansamblu definită în versiunile de specificații, în ceea ce privește cerințele, obiectivele, mijloacele și temele. Unul dintre obiectivele ES6 este acela de a fi o limbă mai bună pentru crearea:
Tabelul de compatibilitate ES6 este foarte util, deoarece ne spune caracteristicile ES6 care sunt acceptate în browserul curent. De asemenea, ne oferă o legătură la îndemână cu specificațiile pentru fiecare dintre caracteristicile enumerate. Rețineți că unele dintre caracteristicile existenței nu ar putea însemna conformitatea completă cu specificațiile. Când lucrați cu Chrome, asigurați-vă că ați activat steguletele "Experimental JavaScript".
Acum, că imaginea de ansamblu este definită, să explorăm modul în care putem să le implementăm. În următoarele secțiuni, vom discuta despre zece trăsături ale ES6, folosind diferite instrumente, astfel încât să putem înțelege ES6 atât în teorie, cât și în practică. Cunoașterea prealabilă a JavaScript-ului este o condiție prealabilă, deci nu ezitați să verificați multe resurse despre JavaScript.
Mai jos sunt prezentate caracteristicile pe care le vom trece printr-un instrument diferit. Încercați-le una câte una sau să treceți la funcția specifică pe care doriți să o explorați:
Accentsconagua
lăsa [folosind browser-ul Firefox]const [folosind browserul Chrome]lăsa lăsa Variabilele JavaScript sunt funcționale. Aceasta înseamnă că, chiar dacă există variabile declarate într-un bloc imbricat, ele sunt disponibile pe toată durata funcției. Să examinăm un scurt exemplu de mai jos; pur și simplu vom folosi consola Web din Firefox sau Chrome pentru a le rula. Ce credeți că va fi valoarea lui jsFuture?
var jsFuture = "es6"; (funcția () if (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());
În exemplul de mai sus, valoarea lui jsFuture în console.log declarația va fi "es5". Este important pentru înțelegerea dvs. faptul că, în JavaScript, declarațiile de variabile sunt ridicate în partea de sus, dar inițialele variabile, pe de altă parte, nu sunt. Prin urmare, indiferent de locul unde variabilele sunt inițializate și declarate, în cadrul domeniului funcțional, ele vor fi întotdeauna ridicate. Fragmentul de mai jos este exact același - cu comentarii pentru a ilustra această caracteristică a ridicării variabile.
var jsFuture = "es6"; (funcția () // var jsFuture = undefined; // variabila ridicare dacă (! jsFuture) var jsFuture = "es5"; console.log (jsFuture);
ES6 abordează această problemă lăsa, care este ca var, cu excepția faptului că este blocată în funcție de domeniul de activitate. Să luăm în considerare un alt exemplu var de mai jos. Apelarea funcției es [6] () ne va da valoarea i = 10. Observați că, chiar dacă var i = 0; este declarat în pentru buclă, domeniul de aplicare al var i implicit la nivel global. Prin urmare, atunci când funcția es [6] () este executat, valoarea lui eu este 10.
var es = []; pentru (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 
Să folosim acum lăsa. Pentru a codifica acest lucru, vom folosi Firefox și vom deschide consola web prin meniul (Instrumente> Web developer> Web Console). Crearea unei variabile în bloc în cadrul pentru buclă, permiteți c = i; a blocat scopul.
var es = []; pentru (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 acceptă deja multe funcții ES6 viitoare. Consultați tabelul de conformitate pentru Firefox pentru a păstra actualizarea cu privire la caracteristicile care sunt acceptate și care sunt, de asemenea, conforme cu specificația curentă.
const const Sunt posibile definiții constante cu const. lăsa și const se comportă în mod similar în sensul că ambele sunt blocate, dar cu const, valorile sunt doar pentru citire și nu pot fi re-declarate mai târziu. Să examinăm un exemplu de cod simplu în Chrome:
clasă În limbile de programare orientate pe obiect, a clasă este o reprezentare a unui obiect. Ea formează planul, în timp ce un obiect este un exemplu al unei clase. În ceea ce privește JavaScript, este un limbaj de programare fără limbaj și totul este un obiect. În mod tradițional, am folosit funcții și prototipuri pentru a implementa clasele. Să explorăm o modalitate comună de a implementa clasa în ES5.
var Limba = funcția (config) this.name = nume_conf.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = funcția () return this.name + "a fost creată de" + this.founder + "în" + this.year; ;
Apoi, să vedem cum ES6 implementează clase cu sintaxă de declarație de clasă minimă care poate fi extrem de importantă pentru a distinge clasele și funcțiile. Pentru a codifica clasă utilizând sintaxa ES6, vom folosi Traceur-ul Google, care este un transpilator care compilează codul ES6 în ES5. Mai întâi, să creăm html structura fișierului în care vom introduce sintaxa ES6 pentru clase. Pentru a compila codul Traceur, avem nevoie de ambele traceur.js pentru a compila Traceur în JavaScript, precum și bootstrap.js pentru a le lega pe toate. În cele din urmă, Traceur va căuta script type = "text / traceur" tag-uri pentru a compila codul în interiorul tag-uri în JavaScript vanilla.
Clasele ES6
Apoi, în cadrul script type = "text / traceur" tag-uri, să folosim sintaxa ES6 pentru a implementa aceeași clasă pe care am făcut-o anterior Limba.
clasa Limba constructor (nume, fondator, an) this.name = nume; this.founder = fondator; anul acesta = an; summary () return this.name + "a fost creat de" + this.founder + "în" + this.year;
Acum putem crea o instanță a clasa Limba prin deschiderea fișierului HTML în browserul Chrome ca var js = limbă nouă. În consola, vom vedea instrucțiunile pentru alte proprietăți ale limbii!
Cu o astfel de declarație de sintaxă clară, putem trece și la extinderea clasei pentru a implementa o subclasă Metalimbaj care vor moșteni toate proprietățile din clasa părinte Limba. În interiorul funcției constructorului, vom cere funcția super care va numi constructorul clasei părinte astfel încât să poată moșteni toate proprietățile sale. În final, putem adăuga și proprietăți suplimentare, cum ar fi versiune, așa cum este ilustrat în codul de mai jos. Să examinăm sintaxa ES6 și să o executăm în browserul Chrome:
clasa MetaLanguage extinde limba constructor (x, y, z, versiune) super (x, y, z); this.version = versiune;
Traceur este un transpilator util care ne permite să codificăm folosind sintaxa ES6, în timp ce facem ridicarea grele pentru al compila înapoi la versiunea JavaScript actuală. Încercați alte caracteristici ES6 și în Traceur!
parametrii funcției implicite Cu parametrii funcției implicite, putem avea întotdeauna parametri funcționali ca o opțiune prin setarea unor setări implicite. Sintaxa pentru această caracteristică în ES6 este extrem de intuitivă. Parametrii impliciți sunt definiți când funcțiile sunt definite. Să aruncăm o privire la sintaxa ES6 de mai jos într-un nou fișier TypeScript cu o extensie de * TS.
istoricul funcțiilor (lang = "C", anul = 1972) return lang + "a fost creat în jurul anului" + an;
Apoi, vom instala TypeScript ca modul npm și vom rula fișierul .* ts și compilați-o la vanilla JavaScript. Iată comenzile de instalare și apoi compilație din linia de comandă:
$ npm instalare -g tipărire $ npm vizualizare versiune tipcript 0.8.3 $ tsc 4-default-params.ts
Comanda de mai sus va crea un fișier JavaScript de vanilie, numit 4-default-params.js, care poate fi apoi apelat dintr-un fișier HTML. Iată fișierul HTML simplu care va apela fișierul JavaScript extern creat de compilatorul TypeScript:
ES6 Parametrii impliciți
În cele din urmă, vom deschide fișierul HTML în Chrome / Firefox și vom apela funcția istorie() de două ori, cu și fără parametrii funcției. Observați că trecerea în parametrii funcției nu va reveni la parametrii impliciți:
Verificați și alte caracteristici tip text, inclusiv clasă sau treceți printr-un tutorial tip pentru o utilizare mai aprofundată.
ES6 oferă noi structuri de date care anterior nu erau disponibile în JavaScript. Înainte de a sari în explorarea a două astfel de structuri de date (Seturi și Hărți), să vedem cum putem rula sintaxa ES6 cu NodeJS. Instalați NodeJS; de aici, vom lucra în linia de comandă. În primul rând, vom verifica versiunea NodeJS instalată și apoi verificați ce opțiuni vor permite caracteristicile ES6 cu comanda nod - v8-opțiuni | grep armonie.
$ node --versiune v0.10.4 $ nod --v8-opțiuni | grep armonie --harmony_typeof (permite semantica armoniei pentru typeof) --harmony_scoping (permite armonie bloc scoping) --harmony_modules (permite module de armonie (implică bloc scoping)) --harmony_proxies (permite proxies armonie) --harmony_collections seturi, hărți și hărți slabe)) --armonia (permite toate caracteristicile armoniei (cu excepția tipului))
Apoi, porniți NodeJS repl și interogați ce proprietăți sunt disponibile pentru Set și Maps. Vom porni replica NodeJS cu nod - armonia pentru a activa toate caracteristicile ES6.
$ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'adaugă', 'are', 'șterge']> set "," are "," șterge "]> .exit $
Seturile sunt simple structuri de date care sunt similare cu matricea, dar fiecare valoare este unică. Să creăm un fișier nou, numit 5-sets.js, și introduceți un anumit cod pentru a crea, adăuga, șterge și interoga noul set pe care îl vom crea. De asemenea, rețineți că vom adăuga date "Hippo" de două ori, dar în set, acesta va fi înregistrat o singură dată!
var motoare = set nou (); // creați un nou set de motoare.add ("Gecko"); // adăugați la Set engines.add ("Trident"); engines.add ( "Webkit"); engines.add ( "Hippo"); engines.add ( "Hippo"); // rețineți că Hippo este adăugat de două ori console.log ("motoarele de navigare includ Gecko?" + motoare.has ("Gecko")); // true console.log ("Motoarele de browser includ Hippo?" + engines.has ("Hippo")); // true console.log ("Motoarele de căutare includ Indigo?" + motoare.has ("Indigo")); // false engines.delete ("Hippo"); // ștergeți elementul console.log ("Hippo este șters. Motoarele de navigare includ Hippo?" + engines.has ("Hippo")); // fals Rulați fișierul în nodul repl cu comanda nod - armonia 5-set.js. Rețineți că, deși "Hippo" a fost adăugat de două ori la set, după ce a fost șters, setul nu a mai fost inclus. Acest lucru demonstrează încă o dată că un set este o structură de date care poate conține numai valori unice.
Hărțile sunt destul de asemănătoare perechilor cheie cheie-valoare JavaScript. Utilizând o cheie unică, putem recupera valoarea. În ES6, cheia poate fi orice tip de date JavaScript și nu doar șiruri de caractere. Aceasta este partea interesantă! Să creăm un fișier nou, numit 5-map.js, pentru a încerca funcțiile de creare, obținere și ștergere:
var es6 = harta nouă (); // creați noua hartă es6.set ("ediție", 6); // cheia este șir es6.set (262, "standard"); // cheia este numărul es6.set (undefined, "nah"); // cheie este undefined var hello = function () console.log ("hello"); es6.set (salut, "Hello ES6!"); // cheie este funcția console.log ("Valoarea" ieșirilor "ediție?" + es6.has ("ediție")); // true console.log ("Valoare de ieșiri" an "? + es6.has (" ani ")); // false console.log ("Valoarea 262 de ieșiri?" + es6.has (262)); // true console.log ("Valoarea ieșirilor nedefinite?" + es6.has (undefined)); // true console.log ("Valoarea salutului () ieși?" + es6.has (salut)); // true es6.delete (undefined); // șterge harta console.log ("Valoarea ieșirilor nedefinite?" + es6.has (undefined)); // false console.log (es6.get (salut)); // Bună ziua ES6! console.log ("Lucrul este în desfășurare pentru ES" + es6.get ("ediție")); // Lucrările sunt în desfășurare pentru ES6 
Așa cum este arătat cu caracteristicile colecțiilor ES6, opțiunea de armonie NodeJS acceptă deja alte caracteristici ale ES6, cum ar fi blocarea domeniului, proxy-urile și modulele. Încercați-le și în NodeJS!
În limbile de programare, termenul "destructurare" denotă potrivirea modelului. În ES6, putem face o potrivire destul de drăguță cu modelele și obiectele care ar fi avut anterior mai mult de un pas. Să explorăm unele dintre ele prin codarea în consola Web Firefox.
Cu distrugerea matricei, putem inițializa variabilele dintr-o dată sau chiar le putem schimba în loc să avem calea convențională de a crea o var temp; variabilă temporară.
var [start, end] = ["pământ", "luna"] // inițializa console.log (start + "apela" + sfârșit); // earth calling moon [start, end] = [end, start] // conversie variabila console.log (start + "apela" + sfarsit); // luna cerând pământul
Distrugerea devine, de asemenea, o stenogramă utilă atunci când se întoarce mai multe valori dintr-o funcție, deoarece nu mai avem nevoie să înfășurăm în prealabil un obiect. De asemenea, pentru a sări peste anumite variabile, lăsați doar elementul matrice gol:
funcția equinox () return [20, "martie", 2013, 11, 02]; var [data, luna,,] = echinoctiul (); console.log ("Echinocul din acest an a fost la" + data + luna "); // Echinocul din acest an a avut loc pe 20 martie 
Din cauza distrugerii, variabilele pot fi de asemenea inițializate dintr-un obiect care este returnat de la o funcție chiar și cu obiecte adânc imbricate. De asemenea, la fel ca modelele matricei, putem să le ignorăm pe cele care nu sunt necesare. Iată fragmentul de cod care ilustrează doar acest lucru:
funcția equinox2 () retur data: 20, lună: "martie", anul: 2013, ora: oră: 11, // minute imbricate: 2; var data: d, luna: m, ora: ora: h = echinox2 (); // h are valoarea proprietății imbricate, în timp ce "an" și "minute" sunt depășite în întregime console.log ("Echinoxul din acest an a fost pe" + d + m + "la" + h); // Echinoxul din acest an a avut loc pe data de 20 martie la ora 11 
În parametrii ES6, parametrii de odihnă ne permit să folosim cu ușurință câțiva parametri stabili într-o funcție, împreună cu restul numărului de parametri care se situează și variază. Noi deja folosim argumente, care este un obiect de tip array care definește argumentele transmise unei funcții, dar în mod clar nu putem folosi funcția matrice pentru a manipula aceste argumente. Cu o sintaxă clară în ES6, aceasta mișcă și intenția dezvoltatorului în sintaxa cu trei puncte ... pentru a indica un număr variabil de argumente.
Să încercăm să folosim parametrii de odihnă în sintaxa ES6 cu gruntjs și plugin-ul pentru transpellerul traceur, pe care l-am folosit în secțiunea anterioară.
Instalați utilitatea liniei de comandă grunt:
$ npm dezinstalați -g grunt $ npm install -g grunt-cli
Creați un fișier, numit package.json, care va defini diferitele module necesare pentru a rula Grunt. Rețineți că această listă de dependențe include pluginul traceur:
"nume": "rest-paramuri", "versiune": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
Creați Gruntfile.js care va conține doar o singură sarcină traceur care va converti sintaxa ES6 la JavaScript de astăzi. Cu aceasta, vom putea încerca parametrii ES6 de odihnă.
modul.exports = funcția (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), traceur: personalizat: fișiere: 'js /': ['rest-spread.js '] // dest: [fișiere sursă]); grunt.loadNpmTasks ( 'groh-traceur'); grunt.registerTask ("implicit", ['traceur']); ; Creați un simplu index.html pentru a apela fișierul JavaScript traceur-compilat, js / odihnă-spread.js:
ES6 Restul parametrilor
Cel mai important, vom crea fișierul odihnă-spread.js, care va conține restul parametrilor de sintaxă:
funcția push (array, ... items) // definirea parametrilor de repaus cu elemente de sintaxă 3 puncte. pentru fiecare (funcția (element) array.push (element); console.log (item);); // 1 fix + 4 parametri variabili var planets = []; console.log ("planetele interioare ale sistemului nostru solar sunt:"); împingere (planete, "Mercur", "Venus", "Pământ", "Marte"); // restul parametrilor În cele din urmă, vom alerga mormăit în linia de comandă, care va executa, în mod implicit, sarcina traceur și va crea fișierul, js / 5-rest-spread.js. Apoi, vizualizați doar fișierul index.html în consola browserului:
$ npm instalare $ grunt ╰─ $ grunt Executarea "traceur: custom" (traceur) sarcină js / ['rest-spread.js'] Compilarea ... js / js / js / rest-spread.js de succes. Scrierea reușită - [object Object]
Operatorul de împrăștiere este opusul parametrilor de odihnă. Atunci când apelați o funcție, putem trece în argumentul fix care este necesar împreună cu o matrice cu o dimensiune variabilă cu sintaxa familiară cu trei puncte, pentru a indica numărul variabil de argumente.
Vom folosi același proiect ca și ceilalți parametri de mai sus și vom adăuga în codul operatorului răspândit în fișier odihnă-spread.js. În exemplul de mai jos, funcția necesită șase argumente separate. La apelarea funcției, datele sunt transmise ca o matrice cu operatorul de răspândire. Să vedem cum arată sintaxa, atunci când apelați funcția cu argumente fixe, precum și un număr variabil de argumente:
Adăugați codul operatorului de distribuire la odihnă-spread.js:
// Spread operatorul "... weblink" function createURL (comentariu, calea, protocolul, subdomeniul, domeniul, tld) var shoutout = comment + ":" + protocol + ": // + + subdomeniu + + domeniu + "." + tld + "/" + cale; console.log (shoutout); var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Primul site din lume"; createURL (comentariu, ... weblink); // operator de răspândire
Rulați traceorul compilat prin sarcina Grunt în linia de comandă și vizualizați fișierul, index.html, în browser:
$ grunt Executarea sarcinii "traceur: custom" (traceur) js / ['rest-spread.js'] Compilarea ... js / js / rest-spread.js de succes. Scrierea reușită - [obiect obiect] Efectuat, fără erori.
Dacă utilizați deja GruntJS ca instrument de construcție în proiectul dvs. curent, va fi ușor să îl integrați cu pluginurile ES6. Deci, încercați alte pluginuri GruntJS ES6 pentru a compila sintaxa ES6 cu JavaScript curent.
Ofertele JavaScript pentru-in pentru iterație, dar are unele limitări. De exemplu, într-o iterație de matrice, rezultatele cu a pentru-in buclă ne va da indicii și nu valorile. Să aruncăm o privire la codul de mai jos pentru a ilustra acest lucru:
var plante = ["Mercur", "Venus", "Pământ", "Marte"]; pentru (p în planete) console.log (p); // 0,1,2,3 var es6 = ediția: 6, comitetul: "TC39", standard: "ECMA-262"; pentru (e în es6) console.log (e); // ediție, comitet, standard
Să încercăm același concept, dar, de data aceasta, cu pentru a cu o matrice, un set și o hartă:
var plante = ["Mercur", "Venus", "Pământ", "Marte"]; pentru (p de planete) console.log (p); // Mercur, Venus, Earth, Mars var motoare = Set (["Gecko", "Trident", "Webkit", "Webkit"]); pentru (var e de motoare) console.log (e); // Set numai are valori unice, prin urmare, Webkit se afișează o singură dată var es6 = new Map (); es6.set ("ediție", 6); es6.set ("comitet", "TC39"); es6.set ("standard", "ECMA-262"); pentru (var [nume, valoare] din es6) console.log (nume + ":" + valoare); 
Arhitectura computerizată ne dă o sintaxă de stenografie pentru a manipula fiecare conținutul matricei într-un anumit tipar. Este foarte asemănător cu Hartă() sau filtru() metode disponibile în obiectul Array. Să examinăm modul în care folosim Hartă()
var temperatura = [0,37, 100]; funcția degToKelvin (deg) return grad + 273; temperature.map (degToKelvin); // [273, 310, 373]
Să trecem prin aceeași caracteristică în Firefox pentru a vedea sintaxa stenografică din ES6 pentru a crea tablouri cu câte trei bucle pentru a crea soluții posibile pentru joc, Cluedo:
// Array creat cu o buclă var temperature = [0, 37, 100]; [t + 273 pentru (t de temperatură)]; // [273, 310, 373] // Array creat cu 3 bucle var suspecte = ["Miss Scarlet", "Colonel Mustard"], arme = ["Candlestick", "Dagger" "bal"]; [(console.log (s + "cu un" + w + "în" + r)) pentru (s suspecți) pentru (w de arme) pentru (r de camere);
În limbile de programare, modulele îndeplinesc funcții discrete separate și sunt independente una de cealaltă. Acest lucru contribuie nu numai la construirea de componente reutilizabile în cadrul proiectelor, ci și la erorile izolate la părțile legate de proiectul actual. Am creat module în JavaScript, de obicei, cu AMD sau CommonJS. Să creăm un modul simplu utilizând sintaxa ES6 și transpilatorul Module ES6.
Mai întâi, să creăm fișierul HTML, index.html, care va apela JavaScripts esențiale. Vom folosi RequireJS ca încărcător AMD; prin urmare, ne referim la o copie CDN a ultimului fișier RequireJS. Apoi, adăugăm și atributul, date principale, pe scenariu eticheta pentru a spune RequireJS pentru a încărca js / init.js fişier.
Module ES6
Acum, vom crea fișierul, js / init.js, care va invoca doar js / main.js fişier:
cer (['principal'], functie () );
Creați modulul, cerc, în fișier, în / circle.js, în sintaxa ES6. Acest modul exportă două funcții:
zona funcției de export (rază) retur Math.PI * raza * raza; circumferința funcției de export (rază) return 2 * Math.PI * radius;
Creați fișierul, în / main.js, care va importa modulul cerc astfel încât să putem folosi funcțiile acestui modul particular. Observați import sintaxă:
import zona, circumferinta din "cerc"; console.log ("Zona cercului:" + zona (4) + "metru pătrat"); console.log ("Circumferința cercului:" + circumferința (14) + "metri"); În acest moment, structura folderului este prezentată mai jos. Vom folosi transpilatorul Module ES6 pentru a crea codul ES5 compatibil cu două fișiere nou create: js / circle.js și js / main.js.
$ copac. | - in | - cercuri.js | '- main.js | - index.html' - js '- init.js
Instalați Transpilatorul Modulei ES6:
$ npm install https://github.com/square/es6-module-transpiler.git $ compile-modules -help
În cele din urmă, vom transpune aceste două fișiere. Navigați la dosar, în, din linia de comandă:
$ compile-modules circle.js - tip amd - pentru ... / js $ compile-modules main.js - tip amd - pentru ... / js $ cd ... $ tree. | - in | - cercuri.js | '- main.js | - index.html' - js | - cerc.js | - init.js '- main.js
Uitați-vă la codul transpalezat în fișiere js / circle.js și js / main.js. Acum vom deschide dosarul, index.html, în browser pentru a vedea modulele în acțiune! Va trebui să folosim un server web pentru a rula acest fișier. Folosesc Python SimpleHTTPServer. Navigați la linia de comandă din rădăcina fișierului, index.html:
$ python -m SimpleHTTPServer 8000
Mulți dintre membrii comunității noastre de dezvoltare web au împărtășit deschis despre ES6 și despre ce se întâmplă. Vă recomandăm foarte mult să treceți prin categoriile de bloguri legate de ES6:
Și, pentru o lectură suplimentară:
