Använd ECMAScript 6 idag

Idag är ECMAScript 6 i färd med att slutföras. ECMAScript är grunden för JavaScript och därför innebär det att vi utforskar de föreslagna funktionerna idag också att vi får en snyggt topp på hur vi ska skriva JavaScript inom en snar framtid! I den här artikeln utforskar vi tio nya funktioner, med ett betydande fokus på verktyg, webbläsare och transporters.


En kort historia: ECMA, ECMAScript och JavaScript

JavaScript ursprungligen utvecklades av Brendan Eich of Netscape och officiellt släpptes som en del av Netscape Navigator 2.0 1995. Ett år senare skickades JavaScript till ECMA International, en organisation som underlättar standardiseringen av informations- och kommunikationsteknik och konsumentelektronik, så att den kan formaliseras industriellt. ECMAScript, sålunda blev namnet på skriptspråket standardiserat i ECMA-262.

ECMAScript-standarden utgör ryggraden i många andra härledda språk, inklusive ActionScript och JScript. Under årens lopp har ECMAScript gått igenom fyra versioner, med diskussionerna idag mycket roterande kring version sex, som också har kodats, ECMAScript Harmony.

Versionskorrespondens

Innan vi dyker in i dessa nya funktioner är det viktigt att notera att ECMAScript-standarden utgör grunden för JavaScript. Det finns numeriska skillnader mellan var och en av JavaScript-versionerna och motsvarande ECMAScript-utgåvor. Det vill säga att JavaScript är kompatibelt med ECMAScript-standarden, samtidigt som det ger fler funktioner. Tabellen nedan sammanfattar förhållandet mellan JavaScript och ECMAScript:

JavaScript-versionen ECMAScript Edition År
JavaScript 1.1 ECMAScript utgåva 1 1997
JavaScript 1.5 ECMAScript utgåva 3 1999
JavaScript 2.0 ECMAScript Harmony Pågående arbete

ES6 Översikt

mål

JavaScript har kommit långt sedan dess ödmjuka början för nästan tjugo år sedan. Idag skriver utvecklare tusentals linjer kod som skapar komplexa JavaScript-applikationer. Innan vi dyker in i detaljerade funktioner i ES6 kanske du vill titta på den stora bilden som definieras i specifikationerna, vad gäller krav, mål, medel och teman. Ett av målen för ES6 är att vara ett bättre språk för att skapa:

  • komplexa applikationer
  • bibliotek
  • kodgeneratorer

Kompatibilitet

ES6-kompatibilitetstabellen är mycket användbar, eftersom den berättar för ES6-funktionerna som stöds i den aktuella webbläsaren. Det ger oss också en praktisk länk till specifikationerna för var och en av de angivna funktionerna. Observera att vissa av funktionerna inte kan innebära fullständig överensstämmelse med specifikationerna. När du arbetar med Chrome måste du aktivera flaggor med "Experimentell JavaScript".

Funktioner

Nu när den stora bilden är definierad, låt oss undersöka hur vi kan implementera dem. I följande avsnitt kommer vi att diskutera tio funktioner i ES6, med hjälp av olika verktyg så att vi kan förstå ES6 både i teori och praktik. Förkunskaper om JavaScript är en förutsättning, så gärna checka ut många resurser på JavaScript.

Nedan listas de funktioner som vi ska gå igenom med ett annat verktyg. Prova dem en efter en, eller hoppa till den specifika funktionen som du vill utforska:

  1. Blockera scoping med låta [använder Firefox-webbläsare]
  2. Blockera scoping med const [använder Chrome-webbläsare]
  3. Klasser [använder Traceur]
  4. Standardfunktionsparametrar [using TypeScript]
  5. Samlingar [använder NodeJS]
  6. Destructuring [använder Firefox-webbläsare]
  7. Vila parametrar & Sprid operatör [med Grunt plugin Traceur]
  8. Iteratorer [använder Firefox-webbläsare]
  9. Array förståelse [använder Firefox-webbläsare]
  10. Moduler (med ES6 Modul Transpiler)

Feature 1 - Block Scoping med låta

  • Dokumentation: låta
  • Verktyg: Firefox-webbläsare 20.0: Meny> Verktyg> Webutvecklare> Webbkonsol

JavaScript-variabler är funktion-scoped. Det betyder att även om det finns variabler deklarerade i ett kapslat block, är de tillgängliga i hela funktionen. Låt oss granska ett kort exempel nedan; vi använder helt enkelt webbkonsolen i Firefox eller Chrome för att köra dem. Vad tror du kommer att vara värdet av jsFuture?

 var jsFuture = "es6"; (funktion () om (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());

I ovanstående exempel, värdet av jsFuture i console.log uttalandet kommer att vara "es5". Avgörande för din förståelse är det faktum att variabla deklarationer hissas i toppen i Java, men variabla initialiseringar är däremot inte. Därför, oavsett var variablerna initialiseras och deklareras, inom ramen för funktionen, kommer de alltid att hissas. Klippet nedan är exakt detsamma - med kommentarer för att illustrera denna funktion av variabel lyftning.

 var jsFuture = "es6"; (funktion () // var jsFuture = odefinierad; // variabelhissning om (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); // "es5" ());

ES6 tar itu med den här frågan med låta, vilket är som var, förutom det faktum att det är block scoped istället för funktion scoped. Låt oss överväga ett annat exempel med var Nedan. Ringer upp funktionen es [6] () kommer att ge oss värdet av i = 10. Observera att även om var i = 0; förklaras i för loop, omfattningen av var jag som standard till global. Därför när funktionen es [6] () exekveras, värdet av jag är 10.

 var es = []; för (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

Låt oss nu använda låta. För att koda detta ut använder vi Firefox och öppnar webbkonsolen via menyn (Verktyg> Webbutvecklare> Webbkonsol). Skapa en block-scoped variabel inom för slinga, låt c = i; gjorde det blockera scoped.

 var es = []; för (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öder redan många kommande ES6-funktioner. Se överensstämmelsetabellen för Firefox för att hålla dig uppdaterad om vilka funktioner som stöds och vilka som också överensstämmer med den aktuella specifikationen.


Funktion 2 - Blockering med const

  • Dokumentation: const
  • Verktyg: Chrome Browser> Visa> Utvecklare> JavaScript Console

Konstanta definitioner är nu möjliga med const. låta och const uppför sig på samma sätt i den meningen att båda är blockerade, men med const, värdena är skrivskyddade och kan inte omdeklareras senare. Låt oss granska ett enkelt kodexempel i Chrome:


Funktion 3 - Klasser

I objektorienterade programmeringsspråk, a klass är en representation av ett objekt. Det bildar ritningen, medan ett objekt är en förekomst av en klass. När det gäller JavaScript är det ett klasslöst programmeringsspråk och allt är ett objekt. Traditionellt har vi använt funktioner och prototyper för att genomföra klasser. Låt oss undersöka ett vanligt sätt att genomföra klassen i ES5.

 var Språk = funktion (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "skapades av" + this.founder + "i" + this.year; ;

Låt oss sedan se hur ES6 implementerar klasser med minimal klassdeklarationssyntax som kan vara extremt viktigt för att skilja klasser och funktioner. Att koda ut klass Med hjälp av ES6-syntaxen använder vi Googles Traceur, som är en transpiler som sammanställer ES6-kod till ES5. Först låt oss skapa html filstruktur där vi ska infoga ES6-syntaxen för klasser. För att kompilera Traceur-koden behöver vi båda traceur.js att kompilera Traceur till JavaScript, såväl som bootstrap.js att binda dem alla. Slutligen letar Traceur efter script type = "text / traceur" taggar för att kompilera den relevanta koden inuti taggarna i vanilj JavaScript.

    ES6-klasser       

Därefter inom script type = "text / traceur" taggar, låt oss använda ES6-syntaxen för att genomföra samma klass som vi tidigare gjorde för Språk.

 klass Språk konstruktör (namn, grundare, år) this.name = name; this.founder = grundare; this.year = year;  sammanfattning () return this.name + "skapades av" + this.founder + "i" + this.year; 

Vi kan nu skapa en instans av klass språk genom att öppna HTML-filen i Chrome-webbläsaren som var js = nytt språk. I konsolen kommer vi också att få information om andra egenskaper hos språket!

Med en sådan tydlig syntaxdeklaration kan vi också gå vidare för att utöka klassen för att genomföra en underklass meta som kommer att ärva alla egenskaper från moderklassen Språk. Inom konstruktörfunktionen kommer vi att kräva funktionen super som kommer att kalla konstruktören för förälderklassen så att den kan erva alla sina egenskaper. Slutligen kan vi också lägga till extra egenskaper, till exempel version, som illustreras i koden nedan. Låt oss se över ES6-syntaxen och köra den i Chrome-webbläsaren:

 klass MetaLanguage utökar språk konstruktör (x, y, z, version) super (x, y, z); this.version = version; 

Traceur är en användbar transpiler som tillåter oss att koda med ES6-syntaxen, samtidigt som vi gör det tungt för oss att kompilera det tillbaka till den aktuella JavaScript-versionen. Testa även andra ES6-funktioner i Traceur!


Funktion 4 - Standardfunktionsparametrar

  • Dokumentation: standardfunktionsparametrar
  • Verktyg: TypeScript 0.8.3

Med standardfunktionsparametrar kan vi alltid ha funktionsparametrar som ett alternativ genom att ställa in några standardinställningar. Syntaxen för den här funktionen i ES6 är extremt intuitiv. Standardparametrarna definieras när funktionerna definieras. Låt oss ta en titt på ES6-syntaxen nedan i en ny TypeScript-fil med en förlängning av * ts.

 funktionshistorik (lang = "C", år = 1972) return lang + "skapades runt året" + år; 

Därefter installerar vi TypeScript som en npm-modul och kör filen .* ts och kompilera det för vanilj JavaScript. Här är installationen och sedan kompileringskommandon i kommandoraden:

 $ npm installera -g typskrivning $ npm visa typskriptversion 0.8.3 $ tsc 4-default-params.ts

Kommandot ovan kommer att skapa en vanilj JavaScript-fil, kallad 4-default-params.js, som då kan ringas från en HTML-fil. Här är den enkla HTML-filen som kommer att ringa den externa JavaScript-filen som skapades av typenScript-kompilatorn:

     ES6 Standardparametrar     

Slutligen öppnar vi HTML-filen i Chrome / Firefox och ringer funktionen historia() två gånger, med och utan funktionsparametrarna. Observera att det inte går att gå in i några parametrar för parametrar kommer att gå tillbaka till standardparametrarna:

Kolla in andra typScript-funktioner, inklusive klass eller gå igenom en typScript-handledning för mer djupgående användning.


Funktion 5 - Samlingar

  • Dokumentation: Uppsättningar och kartor
  • Verktyg: NodeJS v0.10.4

ES6 erbjuder nya datastrukturer som tidigare inte är tillgängliga i JavaScript. Innan vi hoppar in på att utforska två sådana datastrukturer (Sets och Maps), låt oss se hur vi kan köra ES6-syntax med NodeJS. Installera NodeJS; Härifrån kommer vi att arbeta i kommandoraden. För det första kommer vi att kontrollera NodeJS-versionen installerad, och sedan kontrollera vilka alternativ som aktiverar ES6-funktioner med kommandot nod - v8-alternativ | grep harmoni.

 $ node - version v0.10.4 $ node --v8-options | grepp harmoni --harmony_typeof (aktivera harmonisemantik för typof) --harmony_scoping (aktivera harmoni-blockering) --harmony_modules (aktivera harmoniemoduler (innebär blockavkänning)) --harmony_proxies (aktivera harmoni-proxyer) --harmony_collections (aktivera harmonisamlingar uppsättningar, kartor och svaga kartor)) --harmony (aktivera alla harmoniska funktioner (förutom typof))

Nästa, starta NodeJS-repliken och fråga vilka egenskaper som finns tillgängliga för Set och Maps. Vi startar NodeJS repl with nod - harmoni för att aktivera alla ES6-funktioner.

 $ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'add', 'har', 'delete']> Object.getOwnPropertyNames (Map.prototype) ['konstruktör', 'få' set ',' har ',' delete ']> .exit $

Ställer

Inställningar är enkla datastrukturer som liknar arrays, men varje värde är unikt. Låt oss skapa en ny fil, kallad 5-sets.js, och sätt in någon kod för att skapa, lägga till, radera och fråga den nya uppsättningen som vi ska skapa. Observera också att vi kommer att lägga till "Hippo" -data två gånger, men i uppsättningen kommer den bara att registreras en gång!

 var motorer = ny Set (); // skapa nya Set engines.add ("Gecko"); // lägg till Set engines.add ("Trident"); engines.add ( "Webkit"); engines.add ( "Hippo"); engines.add ( "Hippo"); // notera att Hippo läggs till två gånger console.log ("Browsermotorer inkluderar Gecko?" + engines.has ("Gecko")); // true console.log ("Browsermotorer inkluderar Hippo?" + engines.has ("Hippo")); // true console.log ("Browsermotorer inkluderar Indigo?" + engines.has ("Indigo")); // falska engines.delete ("Hippo"); // radera objekt console.log ("Hippo är raderad. Browsermotorer inkluderar Hippo?" + engines.has ("Hippo")); // false

Kör filen i nod repliken med kommandot nod - Harmony 5-set.js. Observera att även om "Hippo" tillsattes två gånger till uppsättningen, när den togs bort, omfattade inte uppsättningen det längre. Detta illustrerar återigen att en uppsättning är en datastruktur som bara kan innehålla unika värden.

Kartor

Kartor motsvarar ganska JavaScript-nyckelparametrar. Med hjälp av en unik nyckel kan vi hämta värdet. I ES6 kan nyckeln vara någon JavaScript-datatyp och inte bara strängar. Det är den intressanta delen! Låt oss skapa en ny fil, kallad 5-map.js, för att prova skapa, hämta och ta bort funktioner:

 var es6 = ny karta (); // skapa ny karta es6.set ("edition", 6); // nyckel är sträng es6.set (262, "standard"); // nyckeln är numret es6.set (odefinierat, "nah"); // nyckel är odefinierad var hej = funktion () console.log ("hej");; es6.set (hej, "Hej ES6!"); // nyckel är funktionskonsol.log ("Värde av" utgåva "utgångar?" + es6.has ("utgåva")); // true console.log ("Value of 'year' exits?" + es6.has ("år")); // false console.log ("Värde av 262 utgångar?" + es6.has (262)); // true console.log ("Value of undefined exits?" + es6.has (odefinierad)); // true console.log ("Värdet av hej () utgångar?" + es6.has (hej)); // true es6.delete (odefinierad); // radera map console.log ("Value of undefined exits?" + es6.has (odefinierad)); // false console.log (es6.get (hej)); // Hej ES6! console.log ("Arbetet pågår för ES" + es6.get ("edition")); // Arbetet pågår för ES6

Som visas med ES6-samlingsfunktionerna, stödjer NodeJS-harmoni-alternativet redan andra ES6-funktioner, såsom block-scoping, proxies och moduler. Försök dem också i NodeJS!


Funktion 6 - Destrukturering

  • Dokumentation: destrukturering
  • Verktyg: Firefox-webbläsare 20.0: Meny> Verktyg> Webutvecklare> Webbkonsol

I programmeringsspråk betecknar termen "destruktion" mönstermatchning. I ES6 kan vi göra några ganska snygga mönstermatchning i arrays och objekt som tidigare skulle ha tagit oss mer än ett steg. Låt oss utforska några av dem genom att koda den i Firefox webbkonsol.

Array destructuring

Med array destructing kan vi initiera variabler på en gång, eller till och med byta dem istället för att ha det vanliga sättet att skapa en var temp; temporär variabel.

 var [start, slutet] = ["jord", "måne"] // initiera console.log (start + "calling" + end); // earth calling moon [start, end] = [avsluta, starta] // variabel byta console.log (start + "calling" + end); // moon calling earth

Destrukturering blir också en användbar stenografi när du returnerar flera värden från en funktion, eftersom vi inte behöver vikla runt ett objekt längre. För att hoppa över vissa variabler, lämna bara matriselementet tomt:

 funktion equinox () returnera [20, "mars", 2013, 11, 02];  var [datum, månad,,,] = equinox (); console.log ("Årets equinox var på" + datum + månad); // Årets equinox var 20March

Objektdestrukturering

På grund av destruktion kan variabler också initieras från ett objekt som returneras från en funktion även med djupt inbästa objekt. Också, precis som matrismönstren, kan vi hoppa över de som inte behövs. Här är kodens kod som illustrerar just detta:

 funktion equinox2 () retur datum: 20, månad: "mars", år: 2013, tid: timme: 11, // nested minut: 2;  var datum: d, månad: m, tid: timme: h = equinox2 (); // h har värdet på den kapslade egenskapen medan "år" och "minut" hoppas över helt console.log ("Årets equinox var på" + d + m + "vid" + h); // Årets equinox var klockan 20 mars kl 11

Funktion 7 - Vila Parametrar och Spridningsoperatörer

  • Dokumentation: Vila parametrar & Sprid operatör
  • Verktyg: Grunt plugin Traceur

Vila parametrar

I ES6 tillåter viloparametrar oss att enkelt använda några fasta parametrar i en funktion, tillsammans med resten av det efterföljande och variabla antalet parametrar. Vi använder redan argument, vilket är ett array-liknande objekt som definierar argumenten som överförs till en funktion, men vi kan tydligt inte använda array-funktionen för att manipulera dessa argument. Med en tydlig syntax i ES6 flyttar den också utvecklarens avsikt till syntaxnivå med tre prickar ... för att ange ett variabelt antal argument.

Låt oss försöka använda viloparametrar i ES6-syntaxen med gruntjs och dess plugin för spårtransportören, som vi använde i föregående avsnitt.

  1. Installera grunt kommandoradsverktyg:

     $ npm avinstallera -g grunt $ npm installera -g grunt-cli
  2. Skapa en fil som heter package.json, som kommer att definiera de olika modulerna som behövs för att köra Grunt. Observera att denna lista med beroenden inkluderar spårningsinställningen:

     "namn": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
  3. Skapa Gruntfile.js som bara innehåller en uppgift traceur som kommer att konvertera ES6 syntax till dagens JavaScript. Med detta kommer vi att kunna prova ES6 viloparametrar.

     module.xports '] // dest: [källfiler])); grunt.loadNpmTasks ( 'grunt-traceur'); grunt.registerTask ('default', ['traceur']); ;
  4. Skapa en enkel index.html att ringa den spårningskompilerade JavaScript-filen, js / vila-spread.js:

        ES6 viloparametrar     
  5. Viktigast av allt kommer vi att skapa filen vila-spread.js, som kommer att innehålla resten parameter syntax:

     funktionstryck (array, ... objekt) // definierar viloparametrar med 3 punkts syntaxobjekt.forEach (funktion (item) array.push (item); console.log (item););  // 1 fast + 4 variabla parametrar var planets = []; console.log ("Innerplaneterna i vårt solsystem är:"); push (planeter, "Mercury", "Venus", "Earth", "Mars"); // resten parametrar
  6. Slutligen kommer vi att springa grymta i kommandoraden, som som standard kör spårningsuppgiften och skapar filen, js / 5-vila-spread.js. Därefter ser du bara filen index.html i webbläsarkonsolen:

     $ npm installera $ grunt ╰─ $ grunt Running "traceur: anpassad" (traceur) uppgift js / ['rest-spread.js'] Kompilering ... js / Kompilering lyckad - js / Skrivning ... js / js / rest-spread.js framgångsrik. Skriva framgångsrikt - [objekt objekt]

Sprid operatören

En spridningsoperatör är motsatsen till viloparametrarna. När vi ringer en funktion kan vi passera i det fasta argumentet som behövs tillsammans med en uppsättning av en variabelstorlek med den bekanta tre punktsyntaxen, för att ange det variabla antalet argument.

Vi använder samma projekt som övriga parametrar ovan och lägger till i spridningsoperatörskoden till filen vila-spread.js. I exemplet nedan kräver funktionen sex separata argument. När man ringer funktionen överförs data som en grupp med spridningsoperatören. Låt oss se hur syntaxen ser ut, när vi ringer funktionen med fasta argument samt ett varierande antal argument:

  1. Lägg till spridningsoperatörskoden till vila-spread.js:

     // Sprid operatör "... webblink" funktion createURL (kommentar, sökväg, protokoll, underdomän, domän, tld) var shoutout = comment + ":" + protokoll + ": //" + underdomän + ". + domän + "." + tld + "/" + sökväg; console.log (shoutout);  var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Världens första hemsida"; createURL (kommentar, ... webblänk); // spridningsoperatör
  2. Kör spårkompileringen genom Grunt-uppgiften i kommandoraden och visa filen, index.html, i webbläsaren:

     $ grunt Running "traceur: anpassad" (traceur) uppgift js / ['rest-spread.js'] Kompilering ... js / Kompilering lyckad - js / Writing ... js / js / rest-spread.js lyckad. Skriva framgångsrikt - [objekt objekt] Klar, utan fel.

Om du redan använder GruntJS som ett byggverktyg i ditt nuvarande projekt, blir det enkelt att integrera det med ES6-plugins. Så prova andra GruntJS ES6-relaterade plugins för att kompilera ES6-syntaxen till aktuell JavaScript.


Funktion 8 - Iteratorer

  • Dokumentation: iterator
  • Verktyg: Firefox-webbläsare 20.0: Meny> Verktyg> Webutvecklare> Webbkonsol

JavaScript-erbjudanden för-in för iteration, men det har vissa begränsningar. Till exempel, i en array-iteration, resulterar resultaten med a för-in loop kommer att ge oss indexerna och inte värdena. Låt oss ta en titt på koden nedan för att illustrera detta:

 var planeter = ["Mercury", "Venus", "Earth", "Mars"]; för (p i planeter) console.log (p); // 0,1,2,3 var es6 = utgåva: 6, utskott: "TC39", standard: "ECMA-262"; för (e i es6) console.log (e); // utgåva, utskott, standard

Låt oss försöka samma koncept, men den här gången med för av med en matris, en uppsättning och en karta:

 var planeter = ["Mercury", "Venus", "Earth", "Mars"]; för (p av planeter) console.log (p); // Mercury, Venus, Earth, Mars var motorer = Set (["Gecko", "Trident", "Webkit", "Webkit"]); för (var e av motorer) console.log (e); // Ange bara har unika värden, och därmed visar Webkit bara en gång var es6 = ny karta (); es6.set ("edition", 6); es6.set ("kommitté", "TC39"); es6.set ("standard", "ECMA-262"); för (var [namn, värde] av es6) console.log (namn + ":" + värde); 

Funktion 9 - Array-förståelse

  • Dokumentation: Array förståelse
  • Verktyg: Firefox-webbläsare 20.0: Meny> Verktyg> Webutvecklare> Webbkonsol

Array förståelser ger oss en stenografi syntax för att manipulera varje av innehållet i ett visst mönster. Det ligner mycket på Karta() eller filtrera() metoder som finns i Array-objektet. Låt oss undersöka hur vi använder Karta()

 var temperatur = [0, 37, 100]; funktion degToKelvin (deg) return deg + 273;  temperature.map (degToKelvin); // [273, 310, 373]

Låt oss springa igenom samma funktion i Firefox för att se shorthandsyntaxen i ES6 för att skapa arrays med så många som tre loopar för att skapa möjliga lösningar för spelet, Cluedo:

 // Array skapad med 1 slinga var temperatur = [0, 37, 100]; [t + 273 för (t av temperatur)]; // [273, 310, 373] // Array skapad med 3 loopar var misstänkta = ["Miss Scarlet", "Colonel Mustard"], vapen = ["Candlestick", "Dagger"], rum = ["Kök" "Balsal"]; [(console.log (s + "med" + w + "i" + r ") för (s av misstänkta) för (w av vapen) för (r av rum)];

Funktion 10 - Moduler

  • Dokumentation: Moduler, Modul exempel, Moduler lastare
  • Verktyg: ES6-modulstranspiler

På programmeringsspråk utför moduler separata diskreta funktioner och är oberoende av varandra. Detta bidrar till att inte bara bygga återanvändbara komponenter över projekt, utan också håller felen isolerade till de delar som är relaterade till det aktuella projektet. Vi har skapat moduler i JavaScript, typiskt med AMD eller CommonJS. Låt oss skapa en enkel modul med ES6-syntaxen och ES6-modulens transpiler.

  1. Låt oss först skapa HTML-filen, index.html, som kommer att kalla de grundläggande JavaScriptsna. Vi använder RequireJS som en AMD-laddare; Därför hänvisar vi till en CDN-kopia av den senaste RequireJS-filen. Därefter lägger vi också till attributet, datahuvud, på manus tagg för att berätta KravJS för att ladda js / init.js fil.

          ES6-moduler     
  2. Nu ska vi skapa filen, js / init.js, som bara kommer att anropa js / main.js fil:

     kräver (['main'], funktion () );
  3. Skapa modulen, cirkel, i filen, in / circle.js, i ES6-syntaxen. Denna modul exporterar två funktioner:

     exportfunktionsområde (radie) returnera Math.PI * radie * radie;  exportfunktionsomkrets (radie) return 2 * Math.PI * radie; 
  4. Skapa filen, in / main.js, som kommer att importera modulen cirkel så att vi kan använda funktionerna för den specifika modulen. Lägg märke till importera syntax:

     importera område, omkrets från "cirkel"; console.log ("Area of ​​the circle:" + area (4) + "meter squared"); console.log ("Omkretsen av cirkeln:" + omkrets (14) + "mätare");
  5. Vid denna tidpunkt visas mappstrukturen nedan. Vi använder ES6-modulens transpiler för att skapa ES5-kompatibel kod med två nyskapade filer: js / circle.js och js / main.js.

     $ träd. | - in | | - circle.js | '- main.js | - index.html' - js '- init.js
  6. Installera ES6-modulen Transpiler:

     $ npm installera https://github.com/square/es6-module-transpiler.git $ compile-moduler - hjälp
  7. Slutligen ska vi transpilera dessa två filer. Navigera till mappen, i, från kommandoraden:

     $ compile-modules circle.js - typ amd - to ... / js $ compile-modules main.js - typ amd - till ... / js $ cd ... $ tree. | - in | | - circle.js | '- main.js | - index.html' - js | - circle.js | - init.js '- main.js
  8. Titta på den transpirerade koden i filerna js / circle.js och js / main.js. Vi öppnar nu filen, index.html, i webbläsaren för att se moduler i aktion! Vi måste använda en webbserver för att köra den här filen. Jag använder Python SimpleHTTPServer. Navigera till kommandoraden i filens rot, index.html:

     $ python -m SimpleHTTPServer 8000

Medel

Många av våra webbutvecklingsmedlemmar har öppet delat om ES6 och vad som händer. Jag rekommenderar starkt att gå igenom deras bloggkategorier relaterade till ES6:

  • Brendan Eich
  • Addy Osmani
  • Ariya Hidayat
  • Nicholas Zakas
  • Axel Rauschmayer
  • Brandon Benvie

Och för ytterligare läsning:

  • ECMAScript 6-stöd i Mozilla
  • Utkast specifikation för ES.next
  • Framtiden för JavaScript, en video av Dave Herman
  • ECMAScript 6 - De raffinerade delarna (video och diabilder) av Kit Cambridge
  • Senaste Tweets på ES-postlista
  • es6 - min fav delar
  • ES6 har rätt svansanrop
  • Getters kraft
  • ECMAScript 6
  • ES6 Deep Dive av Dave Herman

Spela med ES6 idag

Där har du det: tio funktioner i ES6 med verktyg som låter oss koda med den nya syntaxen idag. Jag hoppas att det här har gjort dig mer upphetsad över vad som ska komma! Observera att eftersom standardiseringsarbetet pågår kan syntaxen, funktionerna och överensstämmelserna ändras. Ändå är det definitivt värt ansträngningen att gräva i förr än senare.