Share
I dag er ECMAScript 6 i ferd med å bli avsluttet. ECMAScript er grunnlaget for JavaScript, og derfor utforsker de foreslåtte funksjonene i dag også at vi får en sneak peak på hvordan vi skal skrive JavaScript i nær fremtid! I denne artikkelen vil vi utforske ti nye funksjoner, med et betydelig fokus på verktøy, nettlesere og transpilarere.
Javascript ble opprinnelig utviklet av Brendan Eich of Netscape, og ble offisielt utgitt som en del av Netscape Navigator 2.0 i 1995. Et år senere ble JavaScript sendt til ECMA International, et organ som letter standardiseringen av informasjons- og kommunikasjonsteknologi og forbrukerelektronikk, slik at den kan formaliseres industrielt. ECMAScript, dermed ble navnet på skriptspråket standardisert i ECMA-262.
ECMAScript-standarden danner ryggraden i mange andre avledede språk, inkludert ActionScript og JScript. Gjennom årene har ECMAScript gått gjennom fire versjoner, med diskusjonene i dag veldig roterende rundt versjon seks, som også har blitt kodenavnet, ECMAScript Harmony.
Før vi dykker inn i disse nye funksjonene, er det viktig å merke seg at ECMAScript-standarden danner grunnlaget for JavaScript. Det er numeriske forskjeller mellom hver av JavaScript-versjonene og de tilsvarende ECMAScript-utgavene. Dette betyr at JavaScript er kompatibelt med ECMAScript-standarden, samtidig som det gir flere funksjoner. Tabellen nedenfor oppsummerer forholdet mellom JavaScript og ECMAScript:
| JavaScript versjon | ECMAScript Edition | År |
| JavaScript 1.1 | ECMAScript utgave 1 | 1997 |
| JavaScript 1.5 | ECMAScript utgave 3 | 1999 |
| JavaScript 2.0 | ECMAScript Harmony | Arbeid pågår |
JavaScript har kommet langt siden den ydmyke begynnelsen for nesten tjue år siden. I dag skriver utviklere tusenvis av kodelinjer som lager komplekse JavaScript-applikasjoner. Før vi dykker inn i detaljene i ES6, vil du kanskje se på det store bildet som er definert i spesifikasjonsutkastene, når det gjelder krav, mål, midler og temaer. Et av målene for ES6 er å være et bedre språk for å skape:
ES6-kompatibilitetstabellen er veldig nyttig, da den forteller oss ES6-funksjonene som støttes i den nåværende nettleseren. Det gir oss også en praktisk kobling til spesifikasjonene for hver av funksjonene som er oppført. Vær oppmerksom på at noen av funksjonenees eksistens kanskje ikke betyr full overensstemmelse med spesifikasjonene. Når du arbeider med Chrome, må du sørge for å aktivere flaggene "Eksperimentell JavaScript".
Nå som det store bildet er definert, la oss utforske hvordan vi kan implementere dem. I de følgende avsnittene vil vi diskutere ti funksjoner i ES6, ved hjelp av ulike verktøy, slik at vi kan forstå ES6 både i teori og praksis. Forkunnskaper om JavaScript er en forutsetning, så vær så snill å sjekke ut mange ressurser på JavaScript.
Oppført nedenfor er funksjonene som vi skal gjennomgå med et annet verktøy. Prøv dem en etter en, eller hopp til den spesifikke funksjonen du vil utforske:
Accentsconagua
la [bruker Firefox nettleser]konst [bruker Chrome-nettleser]la la JavaScript-variabler er funksjon-scoped. Dette betyr at selv om det er variabler deklarert i en nestet blokk, er de tilgjengelige i hele funksjonen. La oss se på et kort eksempel nedenfor; Vi bruker ganske enkelt webkonsollen i Firefox eller Chrome for å kjøre dem. Hva tror du vil være verdien av jsFuture?
var jsFuture = "es6"; (funksjon () hvis (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());
I eksemplet ovenfor er verdien av jsFuture i console.log uttalelsen vil være "es5". Avgjørende for forståelsen er det faktum at variabler i deklarasjonene er heiset til toppen i JavaScript, men variable initialiseringer er derimot ikke. Derfor, uavhengig av hvor variablene initialiseres og deklareres, innenfor funksjonens omfang, vil de alltid heises. Utdraget nedenfor er nøyaktig det samme - med kommentarer for å illustrere denne funksjonen med variabel heising.
var jsFuture = "es6"; (funksjon () // var jsFuture = undefined; // variabel heising hvis (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); // "es5" ());
ES6 takler dette problemet med la, som er som Var, bortsett fra det faktum at det er blokkerte i stedet for funksjon scoped. La oss vurdere et annet eksempel med Var under. Ringer funksjonen es [6] () vil gi oss verdien av i = 10. Legg merke til det, selv om var i = 0; er erklært i til loop, omfanget av var jeg standard til global. Derfor, når funksjonen es [6] () utføres, verdien av Jeg er 10.
var es = []; for (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 
La oss nå bruke la. For å kode dette ut, bruker vi Firefox og åpner webkonsollen via menyen (Verktøy> Webutvikler> Nettkonsoll). Opprette en blokk-scoped variabel i til sløyfe, la c = i; gjorde det blokkert scoped.
var es = []; for (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 støtter allerede mange kommende ES6-funksjoner. Se overholdelsestabellen for Firefox for å holde deg oppdatert om hvilke funksjoner som støttes, og hvilke som også er i samsvar med gjeldende spesifikasjon.
konst konst Konstante definisjoner er nå mulige med konst. la og konst oppfører seg på samme måte i den forstand at begge er blokkerte, men med konst, Verdiene er skrivebeskyttet og kan ikke omdeklareres senere. La oss se gjennom et enkelt kodeeksempel i Chrome:
klasse I objektorienterte programmeringsspråk, a klasse er en representasjon av et objekt. Det danner tegningen, mens et objekt er en forekomst av en klasse. Når det gjelder JavaScript, er det et klasse-mindre programmeringsspråk og alt er et objekt. Tradisjonelt har vi brukt funksjoner og prototyper for å gjennomføre klasser. La oss utforske en vanlig måte å gjennomføre klassen på i ES5.
var Språk = funksjon (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "ble opprettet av" + this.founder + "i" + this.year; ;
Neste, la oss se hvordan ES6 implementerer klasser med minimal klassedeklarasjonssyntax som kan være svært viktig for å skille mellom klasser og funksjoner. Å kodes ut klasse Ved hjelp av ES6-syntaksen bruker vi Googles Traceur, som er en transpiler som samler ES6-kode til ES5. Først, la oss lage html filstruktur der vi vil sette inn ES6-syntaksen for klasser. For å kompilere Traceur-koden krever vi begge traceur.js å kompilere Traceur til JavaScript, så vel som bootstrap.js å binde dem alle. Endelig vil Traceur se etter script type = "text / traceur" koder for å kompilere den aktuelle koden inne i kodene i vanilje JavaScript.
ES6-klasser
Deretter, innenfor script type = "text / traceur" koder, la oss bruke ES6-syntaksen til å implementere samme klasse som vi tidligere gjorde for Språk.
klassespråk konstruktør (navn, grunnlegger, år) this.name = name; this.founder = grunnleggeren; this.year = år; sammendrag () return this.name + "ble opprettet av" + this.founder + "i" + this.year;
Vi kan nå lage en forekomst av klassespråk ved å åpne HTML-filen i Chrome-nettleseren som var js = nytt språk. I konsollen ser vi også instruksjonene for andre egenskaper av språket!
Med en så klar syntakserklæring kan vi også gå videre for å utvide klassen for å implementere en underklasse meta som vil arve alle egenskapene fra foreldreklassen Språk. Inne i konstruktørfunksjonen vil vi kreve funksjonen super som vil ringe konstruktøren til foreldreklassen slik at den er i stand til å arve alle sine egenskaper. Til slutt kan vi også legge til på ekstra egenskaper, for eksempel versjon, som illustrert i koden nedenfor. La oss se på ES6-syntaksen og kjøre den i Chrome-nettleseren:
klasse MetaLanguage utvider språk constructor (x, y, z, versjon) super (x, y, z); this.version = versjon;
Traceur er en nyttig transpiler som gjør at vi kan kode ved hjelp av ES6-syntaksen, mens du gjør det tungt å løfte for oss å kompilere det tilbake til gjeldende JavaScript-versjon. Prøv også andre ES6-funksjoner i Traceur!
standardfunksjonsparametere Med standardfunksjonsparametere kan vi alltid ha funksjonsparametere som et alternativ ved å angi noen standardverdier. Syntaxen for denne funksjonen i ES6 er ekstremt intuitiv. Standardparametrene defineres når funksjonene er definert. La oss se på ES6-syntaksen nedenfor i en ny TypeScript-fil med en utvidelse av * ts.
funksjonshistorie (lang = "C", år = 1972) return lang + "ble opprettet rundt året" + år;
Deretter installerer vi TypeScript som en npm-modul og kjører filen .* ts og kompilere det til vanilje JavaScript. Her er installasjonen og deretter kompileringskommandoer i kommandolinjen:
$ npm installer -g typeskript $ npm se typeskriptversjon 0.8.3 $ tsc 4-default-params.ts
Kommandoen ovenfor vil opprette en vanilje JavaScript-fil, kalt 4-default-params.js, som deretter kan hentes fra en HTML-fil. Her er den enkle HTML-filen som vil kalle den eksterne JavaScript-filen som er opprettet av TypeScript-kompilatoren:
ES6 Standardparametre
Til slutt vil vi åpne HTML-filen i Chrome / Firefox og ringe funksjonen historie() to ganger, med og uten funksjonsparametrene. Legg merke til at ikke passere i noen funksjonsparametere vil falle tilbake til standardparametrene:
Sjekk ut andre TypeScript-funksjoner, inkludert klasse eller gå gjennom en TypeScript-veiledning for mer grundig bruk.
ES6 tilbyr nye datastrukturer som tidligere ikke er tilgjengelige i JavaScript. Før vi hopper inn i å utforske to slike datastrukturer (sett og kart), la oss se hvordan vi kan kjøre ES6 syntaks med NodeJS. Installer NodeJS; fra nå av vil vi jobbe i kommandolinjen. For det første vil vi sjekke NodeJS-versjonen installert, og deretter sjekke hvilke alternativer som vil aktivere ES6-funksjoner med kommandoen nod - v8-alternativer | grep harmoni.
$ node - versjon v0.10.4 $ node --v8-alternativer | grep harmoni --harmony_typeof (aktivere harmonisemantikk for typeof) --harmony_scoping (aktiver harmonisblokkscoping) --harmony_modules (aktiver harmonimoduler (impliserer blokksprengning)) --harmony_proxies (aktiver harmoni-proxyer) --harmony_collections (aktiver harmonisamlinger sett, kart og svake kart)) --harmony (aktiver alle harmoniske funksjoner (unntatt typeof))
Deretter starter du NodeJS-replikken og spørre hvilke egenskaper som er tilgjengelige for Set og Maps. Vi starter NodeJS replikken med node - harmoni for å aktivere alle ES6-funksjoner.
$ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'add', 'har', 'delete']> Object.getOwnPropertyNames (Map.prototype) ['constructor', 'get' sett ',' har ',' delete ']> .exit $
Sett er enkle datastrukturer som ligner på arrayer, men hver verdi er unik. La oss lage en ny fil, kalt 5-sets.js, og sett inn noen kode for å lage, legge til, slette og spørre det nye settet som vi vil opprette. Vær også oppmerksom på at vi vil legge til "Hippo" data to ganger, men i settet vil det bli registrert bare en gang!
var motorer = ny sett (); // lage nye sett engines.add ("Gecko"); // legg til Set engines.add ("Trident"); engines.add ( "Webkit"); engines.add ( "Hippo"); engines.add ( "Hippo"); // merk at Hippo er lagt til to ganger console.log ("Browser motorer inkluderer Gecko?" + engines.has ("Gecko")); // true console.log ("Browser engines include Hippo?" + engines.has ("Hippo")); // true console.log ("Browser motorer inkluderer Indigo?" + engines.has ("Indigo")); // falske engines.delete ("Hippo"); / / slett element console.log ("Hippo er slettet. Browser motorer inkluderer Hippo?" + engines.has ("Hippo")); // falsk Kjør filen i node-replikken med kommandoen node --harmony 5-set.js. Vær oppmerksom på at selv om "Hippo" ble lagt til to ganger på settet, da den ble slettet, inkluderte ikke settet det lenger. Dette illustrerer igjen at et sett er en datastruktur som bare kan inneholde unike verdier.
Kartene er ganske lik JavaScript-objekt nøkkelverdier par. Ved å bruke en unik nøkkel kan vi hente verdien. I ES6 kan nøkkelen være hvilken som helst JavaScript-datatype og ikke bare strenger. Det er den interessante delen! La oss lage en ny fil, kalt 5-map.js, for å prøve å lage, få og slette funksjoner:
var es6 = nytt kart (); // opprett ny kart es6.set ("utgave", 6); // nøkkelen er strengen es6.set (262, "standard"); // nøkkelen er nummer es6.set (undefined, "nah"); // nøkkelen er udefinert var hei = funksjon () console.log ("hei");; es6.set (hei, "Hei ES6!"); // nøkkelen er funksjonskonsoll.log ("Verdi av" utgave "-utganger?" + es6.has ("utgave")); // true console.log ("Value of 'year' exits?" + es6.has ("år")); // false console.log ("Verdi av 262 utganger?" + es6.has (262)); // true console.log ("Verdi av udefinerte utganger?" + es6.has (undefined)); // true console.log ("Verdi av hei () utganger?" + es6.has (hei)); // true es6.delete (undefined); // slette kartkonsollen.logg ("Verdi av udefinerte utganger?" + es6.has (undefined)); // false console.log (es6.get (hei)); // Hei ES6! console.log ("Arbeid pågår for ES" + es6.get ("edition")); // Arbeid pågår for ES6 
Som vist med ES6-samlingsfunksjonene, støtter NodeJS-harmoni-opsjonen allerede andre ES6-funksjoner som blokk-scoping, proxyer og moduler. Prøv dem også i NodeJS!
I programmeringsspråk betyr begrepet "destrukturering" mønstermatching. I ES6 kan vi gjøre noen ganske stilig mønstermatching i arrays og objekter som tidligere ville ha tatt oss mer enn ett trinn. La oss utforske noen av dem ved å kodes det ut i Firefox webkonsoll.
Med array destructing, kan vi initialisere variabler samtidig, eller til og med bytte dem i stedet for å ha den konvensjonelle måten å lage en var temp; midlertidig variabel.
var [start, end] = ["earth", "moon"] // initialiser console.log (start + "calling" + end); // earth calling moon [start, end] = [slutt, start] // variabel bytte console.log (start + "calling" + end); // moon calling earth
Destruktivering blir også en nyttig stenografi når du returnerer flere verdier fra en funksjon, da vi ikke trenger å vikle rundt en gjenstand lenger. For å hoppe over visse variabler, bare la elementelementet være tomt:
funksjon equinox () return [20, "mars", 2013, 11, 02]; var [dato, måned,,,] = equinox (); console.log ("Årets equinox var på" + dato + måned); // Årets equinox var på 20March 
På grunn av destrukturering kan variabler også initialiseres fra en gjenstand som returneres fra en funksjon, selv med dype nestede gjenstander. Også, akkurat som matrise mønstre, kan vi hoppe over de som ikke trengs. Her er kodebiten som illustrerer nettopp dette:
funksjon equinox2 () retur dato: 20, måned: "mars", år: 2013, tid: time: 11, // nestet minutt: 2; var dato: d, måned: m, tid: time: h = equinox2 (); // h har verdien av den nestede eiendommen mens "år" og "minutt" hoppes over helt console.log ("Årets equinox var på" + d + m + "ved" + h); // Årets equinox var på 20March klokka 11 
I ES6 lar hvileparametere oss enkelt å bruke noen faste parametere i en funksjon, sammen med resten av det etterfølgende og variable antall parametere. Vi bruker allerede argumenter, som er et array-lignende objekt som definerer argumentene som er overført til en funksjon, men det er klart at vi ikke kan bruke array-funksjonen til å manipulere disse argumentene. Med en klar syntaks i ES6, beveger den også utviklerens hensikt inn på syntaksnivået med tre prikker ... å angi et variabelt antall argumenter.
La oss prøve å bruke hvileparametere i ES6-syntaksen med gruntjs og dens plugin for traceur transpiler, som vi brukte i forrige avsnitt.
Installer grunt kommandolinjeverktøy:
$ npm avinstallere -g grunt $ npm installere -g grunt-cli
Opprett en fil, kalt package.json, som vil definere de ulike modulene som trengs for å kjøre Grunt. Vær oppmerksom på at denne listen over avhengigheter inkluderer sporingspluggen:
"navn": "rest-params", "versjon": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
Opprett Gruntfile.js som vil inneholde bare en oppgave traceur som vil konvertere ES6 syntaks til dagens JavaScript. Med dette vil vi kunne prøve ut ES6 hvileparametere.
module.exports = funksjon (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), spor: tilpasset: files: 'js /': ['rest-spread.js '] // dest: [kildefiler])); grunt.loadNpmTasks ( 'grov-traceur'); grunt.registerTask ('standard', ['traceur']); ; Lag en enkel index.html å ringe spor-kompilert JavaScript-fil, JS / hvile-spread.js:
ES6 hvileparametere
Viktigst, vi lager filen hvile-spread.js, som vil inneholde resten parameter syntaks:
funksjonstrykk (array, ... elementer) // definere hvileparametre med 3 punkts syntakselementer.forEach (funksjon (element) array.push (item); console.log (item);); // 1 fast + 4 variable parametere var planeter = []; console.log ("Innerplaneter av vårt solsystem er:"); trykk (planeter, "Merkur", "Venus", "Jord", "Mars"); // resten parametere Til slutt vil vi løpe grynte i kommandolinjen, som som standard vil kjøre sporingsoppgaven og opprette filen, JS / 5-Rest-spread.js. Neste, bare se filen index.html i nettleserkonsollen:
$ npm installere $ grunt ╰─ $ grunt Running "traceur: tilpasset" (traceur) oppgave js / ['rest-spread.js'] Kompilering ... js / Kompilering vellykket - js / Writing ... js / js / rest-spread.js vellykket. Skrive vellykket - [objektobjekt]
En spredningsoperatør er motsatt av hvileparametere. Når vi ringer en funksjon, kan vi passere i det faste argumentet som trengs, sammen med et utvalg av en variabel størrelse med den kjente trepunkts-syntaksen, for å angi det variable antall argumenter.
Vi vil bruke det samme prosjektet som resten parametere ovenfor og legge til i spredningsoperatørkoden til filen hvile-spread.js. I eksemplet nedenfor krever funksjonen seks separate argumenter. Når du ringer til funksjonen, blir dataene sendt som en matrise med spredningsoperatøren. La oss se hvordan syntaksen ser ut, når du ringer funksjonen med faste argumenter, samt et variabelt antall argumenter:
Legg til spredningsoperatorkoden til hvile-spread.js:
// Spread operator "... weblink" funksjon createURL (kommentar, bane, protokoll, underdomene, domene, tld) var shoutout = comment + ":" + protocol + ": //" + subdomain + ". + domene + "." + tld + "/" + bane; console.log (shoutout); var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], kommentar = "Verdens første nettsted"; createURL (kommentar, ... weblink); // spredningsoperatør
Kjør sporet kompilere gjennom Grunt-oppgaven i kommandolinjen, og se filen, index.html, i nettleseren:
$ grunt Running "traceur: tilpasset" (traceur) oppgave js / ['rest-spread.js'] Kompilering ... js / Kompilering vellykket - js / Writing ... js / js / rest-spread.js vellykket. Skrive vellykket - [objektobjekt] Ferdig, uten feil.
Hvis du allerede bruker GruntJS som et byggverktøy i ditt nåværende prosjekt, blir det enkelt å integrere det med ES6 plugins. Så prøv andre GruntJS ES6-relaterte plugins for å kompilere ES6 syntaks til gjeldende JavaScript.
JavaScript-tilbud for i for iterasjon, men det har noen begrensninger. For eksempel, i en array-iterasjon, blir resultatene med a for i loop vil gi oss indeksene og ikke verdiene. La oss se koden nedenfor for å illustrere dette:
var planeter = ["Merkur", "Venus", "Jord", "Mars"]; for (p i planeter) console.log (p); // 0,1,2,3 var es6 = utgave: 6, utvalg: "TC39", standard: "ECMA-262"; for (e i es6) console.log (e); // utgave, utvalg, standard
La oss prøve det samme konseptet, men denne gangen med for-of med en matrise, et sett og et kart:
var planeter = ["Merkur", "Venus", "Jord", "Mars"]; for (p av planeter) console.log (p); // Mercury, Venus, Earth, Mars var engines = Set (["Gecko", "Trident", "Webkit", "Webkit"]); for (var e av motorer) console.log (e); // Set kun har unike verdier, derfor viser Webkit bare en gang var es6 = nytt kart (); es6.set ("utgave", 6); es6.set ("committee", "TC39"); es6.set ("standard", "ECMA-262"); for (var [navn, verdi] av es6) console.log (navn + ":" + verdi); 
Arrayforståelser gir oss en kortfattet syntaks for å manipulere hvert av innholdet i et bestemt mønster. Det ligner veldig på kart() eller filter() metoder tilgjengelige i Array-objektet. La oss undersøke hvordan vi bruker kart()
var temperatur = [0, 37, 100]; funksjon degToKelvin (deg) return deg + 273; temperature.map (degToKelvin); // [273, 310, 373]
La oss kjøre gjennom samme funksjon i Firefox for å se stenografiens syntaks i ES6 for å lage arrays med så mange som tre sløyfer for å skape mulige løsninger for spillet, Cluedo:
// Array opprettet med 1 loop var temperatur = [0, 37, 100]; [t + 273 for (t av temperatur)]; // [273, 310, 373] // Array opprettet med 3 looper var mistenkte = ["Scarlet", "Oberstensord"], våpen = ["Lysestake", "Dagger"], rom = ["Kjøkken" "Ball"]; [(console.log (s + "med" + w + "i" + r ") for (s av mistenkte) for (w of weapons) for (r av rom)];
I programmeringsspråk utfører moduler isolerte diskrete funksjoner og er uavhengige av hverandre. Dette bidrar til ikke bare å bygge gjenbrukbare komponenter på tvers av prosjekter, men holder også feilene isolert til de delene som er relatert til det nåværende prosjektet. Vi har opprettet moduler i JavaScript, vanligvis med AMD eller CommonJS. La oss lage en enkel modul ved hjelp av ES6 syntaks og ES6 modul transpiler.
Først la oss lage HTML-filen, index.html, som vil kalle de essensielle JavaScripts. Vi bruker KravJS som en AMD-laster; Derfor refererer vi til en CDN-kopi av den nyeste RequireJS-filen. Deretter legger vi også til attributtet, data-hoved, på manus tag for å fortelle KravJS å laste inn JS / init.js fil.
ES6-moduler
Nå skal vi opprette filen, JS / init.js, som bare vil påberope seg JS / main.js fil:
krever (['main'], funksjon () );
Opprett modulen, sirkel, i filen, i / circle.js, i ES6-syntaksen. Denne modulen eksporterer to funksjoner:
eksporteringsfunksjonsområde (radius) retur Math.PI * radius * radius; eksportfunksjonen omkrets (radius) return 2 * Math.PI * radius;
Opprett filen, i / main.js, som vil importere modulen sirkel slik at vi kan bruke funksjonene til den aktuelle modulen. Legg merke til importere syntaks:
importer område, omkrets fra 'sirkel'; console.log ("Sirkelområde:" + område (4) + "meter kvadrert"); console.log ("Sirkelens omkrets:" + omkrets (14) + "meter"); På dette tidspunktet er mappestrukturen vist nedenfor. Vi bruker ES6-modulen transpiler til å lage ES5-kompatibel kode med to nyopprettede filer: JS / circle.js og JS / main.js.
$ treet. | - i | | - circle.js | '- main.js | - index.html' - js '- init.js
Installer ES6 Modul Transpiler:
$ npm installer https://github.com/square/es6-module-transpiler.git $ compile-moduler --hjelp
Endelig vil vi transpille disse to filene. Naviger til mappen, i, fra kommandolinjen:
$ compile-moduler circle.js - type amd - to ... / js $ compile-moduler main.js --type amd --to ... / js $ cd ... $ tree. | - i | | - circle.js | '- main.js | - index.html' - js | - circle.js | - init.js '- main.js
Se på den transpirerte koden i filene JS / circle.js og JS / main.js. Vi åpner nå filen, index.html, i nettleseren for å se moduler i aksjon! Vi må bruke en webserver til å kjøre denne filen. Jeg bruker Python SimpleHTTPServer. Naviger til kommandolinjen i roten av filen, index.html:
$ python -m SimpleHTTPServer 8000
Mange av våre webutviklingsmedlemmer har åpent delt om ES6 og hva som kommer opp. Jeg anbefaler på det sterkeste å gå gjennom sine bloggkategorier relatert til ES6:
Og for litt videre lesing:
Der har du det: Ti funksjoner i ES6 med verktøy som lar oss kode med den nye syntaksen i dag. Jeg håper dette har gjort deg mer spent på hva som skal komme! Vær oppmerksom på at siden syntetiseringsarbeidet pågår, kan syntaxen, funksjonene og samsvarene endres. Likevel er det definitivt verdt innsatsen for å grave i før enn senere.
