Share
Vandaag wordt ECMAScript 6 momenteel afgerond. ECMAScript is de basis van JavaScript en daarom betekent het verkennen van de voorgestelde functies vandaag ook dat we een sneak peak krijgen over hoe we in de nabije toekomst JavaScript gaan schrijven! In dit artikel zullen we tien nieuwe functies verkennen, met een belangrijke focus op tools, browsers en transpilers.
JavaScript werd oorspronkelijk ontwikkeld door Brendan Eich van Netscape en officieel vrijgegeven als onderdeel van Netscape Navigator 2.0 in 1995. Een jaar later werd JavaScript ingediend bij ECMA International, een instantie die de standaardisatie van informatie- en communicatietechnologie en consumentenelektronica faciliteert, zodat het kan in de industrie geformaliseerd worden. ECMAScript, dus, werd de naam van de scriptingtaal gestandaardiseerd in ECMA-262.
De ECMAScript-standaard vormt de ruggengraat van vele andere afgeleide talen, waaronder ActionScript en JScript. Door de jaren heen heeft ECMAScript vier versies doorlopen, met de discussies die vandaag de dag draaien rond versie zes, die ook een codenaam heeft gehad, ECMAScript Harmony.
Voordat we ingaan op deze nieuwe functies, is het belangrijk op te merken dat de ECMAScript-standaard de basis vormt voor JavaScript. Er zijn numerieke verschillen tussen elk van de JavaScript-versies en de bijbehorende ECMAScript-edities. Dit wil zeggen dat JavaScript compatibel is met de ECMAScript-standaard en meer functies biedt. De onderstaande tabel vat de relatie tussen JavaScript en ECMAScript samen:
| JavaScript-versie | ECMAScript-editie | Jaar |
| JavaScript 1.1 | ECMAScript editie 1 | 1997 |
| JavaScript 1.5 | ECMAScript editie 3 | 1999 |
| JavaScript 2.0 | ECMAScript Harmony | Lopende werkzaamheden |
JavaScript heeft een lange weg afgelegd sinds het bescheiden begin bijna twintig jaar geleden. Tegenwoordig schrijven ontwikkelaars duizenden coderegels om complexe JavaScript-applicaties te maken. Voordat we een duik nemen in de gedetailleerde functies van ES6, wilt u wellicht kijken naar de grote afbeelding die is gedefinieerd in de specificatieconcepten, in termen van vereisten, doelen, middelen en thema's. Een van de doelen voor ES6 is om een betere taal te zijn voor het maken van:
De ES6-compatibiliteitstabel is erg handig, omdat deze ons de ES6-functies vertelt die in de huidige browser worden ondersteund. Het geeft ons ook een handige link naar de specificaties voor elk van de genoemde functies. Houd er rekening mee dat het bestaan van sommige functies mogelijk niet betekent dat de specificaties volledig worden nageleefd. Zorg ervoor dat u de vlaggen 'Experimenteel JavaScript' inschakelt wanneer u met Chrome werkt.
Nu het grote geheel is gedefinieerd, laten we eens kijken hoe we ze kunnen implementeren. In de volgende paragrafen zullen we tien functies van ES6 bespreken, met behulp van verschillende hulpmiddelen, zodat we ES6 zowel in theorie als in de praktijk kunnen begrijpen. Voorkennis van JavaScript is een eerste vereiste, dus aarzel niet om veel bronnen op JavaScript te bekijken.
Hieronder staan de functies die we met een andere tool zullen doorlopen. Probeer ze één voor één uit of ga naar de specifieke functie die u wilt verkennen:
Accentsconagua
laat [met Firefox-browser]const [met behulp van de Chrome-browser]laat laat JavaScript-variabelen zijn function-scoped. Dit betekent dat, zelfs als er variabelen zijn gedeclareerd in een genest blok, ze overal in de functie beschikbaar zijn. Laten we een kort voorbeeld hieronder bespreken; we gebruiken gewoon de webconsole in Firefox of Chrome om ze uit te voeren. Wat denk je dat de waarde zal zijn van jsFuture?
var jsFuture = "es6"; (function () if (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());
In het bovenstaande voorbeeld is de waarde van jsFuture in de console.log verklaring zal "es5" zijn. Cruciaal voor uw begrip is het feit dat in JavaScript variabelegeclaraties naar de top worden gehesen, maar variabele initialisaties daarentegen niet. Daarom worden ze altijd gehesen, ongeacht waar de variabelen worden geïnitialiseerd en gedeclareerd binnen de functieomvang. Het onderstaande fragment is precies hetzelfde - met opmerkingen om deze functie van variabel hijsen te illustreren.
var jsFuture = "es6"; (functie () // var jsFuture = undefined; // variabel hijsen als (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); // "es5" ());
ES6 pakt dit probleem aan met laat, wat lijkt op var, behalve dat het blokbereik is in plaats van functiebereik. Laten we een ander voorbeeld overwegen met var hieronder. De functie aanroepen es [6] () geeft ons de waarde van i = 10. Merk op dat, hoewel var i = 0; wordt verklaard in de voor loop, de reikwijdte van var i staat standaard op globaal. Vandaar, wanneer de functie es [6] () wordt uitgevoerd, de waarde van ik is 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 
Laten we nu gebruiken laat. Om dit te coderen, gebruiken we Firefox en openen we de webconsole via het menu (Extra> Webontwikkelaar> Webconsole). Een variabele met blokafwijking maken binnen de voor lus, laat c = i; maakte het blok 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 ondersteunt al veel aankomende ES6-functies. Raadpleeg de nalevingstabel voor Firefox om bij te houden welke functies worden ondersteund en welke ook voldoen aan de huidige specificatie.
const const Constante definities zijn nu mogelijk met const. laat en const gedragen zich op dezelfde manier in de zin dat beide blokgebonden zijn, maar met const, de waarden zijn alleen-lezen en kunnen later niet opnieuw worden gedeclareerd. Laten we een eenvoudig codevoorbeeld bekijken in Chrome:
klasse In objectgeoriënteerde programmeertalen, a klasse is een afbeelding van een object. Het vormt de blauwdruk, terwijl een object een instantie van een klasse is. Wat JavaScript betreft, het is een klassenloze programmeertaal en alles is een object. Traditioneel hebben we functies en prototypen gebruikt om klassen te implementeren. Laten we een veelgebruikte manier om klasse te implementeren in ES5 verkennen.
var Language = function (config) this.name = config.name; this.founder = config.founder; this.year = config.jaar; ; Language.prototype.summary = function () return this.name + "is gemaakt door" + this.founder + "in" + this.year; ;
Laten we vervolgens eens kijken hoe ES6 klassen implementeert met een minimale klasse-declaratiesyntaxis die van groot belang kan zijn om klassen en functies te onderscheiden. Om te coderen klasse Met behulp van de ES6-syntaxis gebruiken we Traceur van Google, een transponder die ES6-code compileert in ES5. Laten we eerst de html bestandsstructuur waarin we de ES6-syntaxis voor klassen zullen invoegen. Om de Traceur-code te compileren, hebben we beide nodig traceur.js om Traceur samen met JavaScript te compileren bootstrap.js om ze allemaal te binden. Tot slot zal Traceur zoeken script type = "text / traceur" tags om de relevante code in de tags te compileren in JavaScript van vanille.
ES6-klassen
Vervolgens, binnen de script type = "text / traceur" tags, laten we de ES6-syntaxis gebruiken om dezelfde klasse te implementeren als voorheen Taal.
class Language constructor (naam, oprichter, jaar) this.name = name; this.founder = oprichter; dit.jaar = jaar; samenvatting () return this.name + "is gemaakt door" + this.founder + "in" + this.year;
We kunnen nu een instantie van de maken klas Taal door het HTML-bestand in de Chrome-browser als te openen var js = nieuwe taal. In de console zien we ook de aanwijzingen voor andere eigenschappen van de taal!
Met een dergelijke duidelijke syntaxisverklaring kunnen we ook doorgaan met het uitbreiden van de klasse om een subklasse te implementeren metataal die alle eigenschappen van de bovenliggende klasse erven Taal. Binnen de constructorfunctie hebben we de functie nodig super die de constructor van de ouderklasse zal aanroepen zodat deze alle eigenschappen ervan kan erven. Ten slotte kunnen we ook extra eigenschappen toevoegen, zoals versie, zoals geïllustreerd in de onderstaande code. Laten we de ES6-syntaxis bekijken en deze uitvoeren in de Chrome-browser:
klasse MetaLanguage breidt taal uit constructor (x, y, z, versie) super (x, y, z); this.version = versie;
Traceur is een handige transponder waarmee we kunnen coderen met behulp van de ES6-syntaxis, terwijl we het zware werk voor ons doen om het te compileren naar de huidige JavaScript-versie. Probeer ook andere ES6-functies in Traceur uit!
standaard functieparameters Met standaardfunctieparameters kunnen we altijd functieparameters als een optie hebben door een aantal standaardwaarden in te stellen. De syntaxis voor deze functie in ES6 is extreem intuïtief. De standaardparameters worden gedefinieerd wanneer de functies zijn gedefinieerd. Laten we de ES6-syntaxis hieronder bekijken in een nieuw TypeScript-bestand met een extensie van * Ts.
functiegeschiedenis (lang = "C", jaar = 1972) return lang + "is rond het jaar gemaakt" + jaar;
Vervolgens zullen we TypeScript als een npm-module installeren en het bestand uitvoeren .* ts en compileer het naar vanille JavaScript. Dit zijn de installatie- en compilatieopdrachten in de opdrachtregel:
$ npm install -g typscript $ npm bekijk typescript versie 0.8.3 $ tsc 4-default-params.ts
De bovenstaande opdracht zal een vanille JavaScript-bestand maken, genaamd 4-default-params.js, die vervolgens vanuit een HTML-bestand kan worden gebeld. Hier is het eenvoudige HTML-bestand dat het externe JavaScript-bestand zal noemen dat is gemaakt door de TypeScript-compiler:
ES6 Standaardparameters
Ten slotte openen we het HTML-bestand in Chrome / Firefox en bellen we de functie geschiedenis() twee keer, met en zonder de functieparameters. Merk op dat het niet passeren van functieparameters teruggaat naar de standaardparameters:
Bekijk ook andere TypeScript-functies, waaronder klasse of doorloop een zelfstudie TypeScript voor meer diepgaand gebruik.
ES6 biedt nieuwe datastructuren die voorheen niet beschikbaar waren in JavaScript. Voordat we ingaan op het verkennen van twee van dergelijke gegevensstructuren (Sets en kaarten), laten we zien hoe we ES6-syntaxis kunnen uitvoeren met NodeJS. Installeer NodeJS; Vanaf hier werken we in de opdrachtregel. Allereerst zullen we controleren of de geïnstalleerde NodeJS-versie is geïnstalleerd en vervolgens controleren met welke opties ES6-functies met de opdracht worden ingeschakeld knooppunt --v8-opties | grep harmonie.
$ node --version v0.10.4 $ node --v8-options | grep harmony --harmony_typeof (inschakelen van harmoniesemantiek voor typeof) --harmony_scoping (inschakelen harmonisatieblok scoping) --harmony_modules (inschakelen van harmoniemodules (impliceert block scoping)) --harmony_proxies (inschakelen van harmonieproxies) --harmony_collections (harmony-collecties inschakelen ( verzamelingen, kaarten en zwakke kaarten)) - harmonie (schakel alle harmoniekenmerken in (behalve type))
Start vervolgens de NodeJS-repl en vraag welke eigenschappen beschikbaar zijn voor Set en Kaarten. We zullen de NodeJS repl starten met knooppunt - harmonie om alle ES6-functies in te schakelen.
$ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'add', 'has', 'delete']> Object.getOwnPropertyNames (Map.prototype) ['constructor', 'get', ' set ',' has ',' delete ']> .exit $
Sets zijn eenvoudige gegevensstructuren die vergelijkbaar zijn met arrays, maar elke waarde is uniek. Laten we een nieuw bestand maken, genaamd 5-sets.js, en voeg wat code in om een nieuwe set aan te maken, toe te voegen, te verwijderen en te vragen. Merk ook op dat we "Hippo" -gegevens twee keer zullen toevoegen, maar in de set zal het slechts één keer worden geregistreerd!
var engines = new Set (); // create new Stel engines.add in ("Gecko"); // toevoegen aan Set engines.add ("Trident"); engines.add ( "Webkit"); engines.add ( "Hippo"); engines.add ( "Hippo"); // merk op dat Hippo tweemaal console.log is toegevoegd ("Browser engines include Gecko?" + engines.has ("Gecko")); // true console.log ("Browser-engines bevatten Hippo?" + engines.has ("Hippo")); // true console.log ("Browser-engines bevatten Indigo?" + engines.has ("Indigo")); // false engines.delete ("Hippo"); // delete item console.log ("Hippo is verwijderd. Browser engines zijn onder andere Hippo?" + engines.has ("Hippo")); // false Voer het bestand uit in het knooppunt repl met de opdracht node --harmony 5-set.js. Merk op dat, hoewel "Hippo" twee keer aan de set is toegevoegd, de set deze na het verwijderen niet meer heeft toegevoegd. Dit illustreert opnieuw dat een set een gegevensstructuur is die alleen unieke waarden kan bevatten.
Kaarten lijken veel op JavaScript-sleutel / waardeparen voor sleutelwoorden. Met behulp van een unieke sleutel kunnen we de waarde ophalen. In ES6 kan de sleutel elk JavaScript-gegevenstype zijn en niet alleen strings. Dat is het interessante deel! Laten we een nieuw bestand maken, genaamd 5-map.js, om de functies voor maken, ophalen en verwijderen uit te proberen:
var es6 = nieuwe kaart (); // create new Map es6.set ("edition", 6); // key is string es6.set (262, "standaard"); // key is number es6.set (undefined, "nah"); // key is undefined var hello = function () console.log ("hallo");; es6.set (hallo, "Hallo ES6!"); // key is function console.log ("Waarde van 'editie' exits?" + es6.has ("edition")); // true console.log ("Waarde van 'year' exits?" + es6.has ("years")); // false console.log ("Waarde van 262 exits?" + es6.has (262)); // true console.log ("Waarde van ongedefinieerde exits?" + es6.has (undefined)); // true console.log ("Waarde van hallo () uitgangen?" + es6.has (hallo)); // true es6.delete (undefined); // delete map console.log ("Waarde van ongedefinieerde exits?" + es6.has (undefined)); // false console.log (es6.get (hallo)); // Hallo ES6! console.log ("Werk wordt uitgevoerd voor ES" + es6.get ("editie")); // Er wordt gewerkt aan ES6 
Zoals te zien is in de ES6-verzamelfuncties ondersteunt de NodeJS-Harmony-optie al andere ES6-functies zoals block scoping, proxies en modules. Probeer ze ook uit in NodeJS!
In programmeertalen duidt de term "destructurering" patroonovereenkomst aan. In ES6 kunnen we behoorlijk handige patroonvergelijkingen uitvoeren in matrices en objecten die ons eerder meer dan één stap zouden hebben genomen. Laten we een aantal ervan verkennen door het te coderen in de webconsole van Firefox.
Met arrayvernietiging kunnen we variabelen in één keer initialiseren of zelfs verwisselen in plaats van de conventionele manier om een te maken var temp; tijdelijke variabele.
var [start, einde] = ["earth", "moon"] // initialiseer console.log (start + "calling" + end); // earth calling moon [start, einde] = [einde, start] // variabele console console.log (start + "calling" + end); // maan die aarde roept
Destructuring wordt ook een nuttige afkorting bij het retourneren van meerdere waarden uit een functie, omdat we niet meer rond een object hoeven te wikkelen. Als u bepaalde variabelen wilt overslaan, laat u het array-element leeg:
functie equinox () return [20, "March", 2013, 11, 02]; var [datum, maand,,,] = equinox (); console.log ("De equinox van dit jaar was op" + datum + maand); // De equinox van dit jaar was op 20 maart 
Vanwege destructurering kunnen variabelen ook worden geïnitialiseerd vanuit een object dat wordt geretourneerd vanuit een functie, zelfs met diep geneste objecten. Ook kunnen we, net als de array-patronen, diegene overslaan die niet nodig zijn. Hier is het codefragment dat precies dit illustreert:
functie equinox2 () return date: 20, month: "March", year: 2013, time: hour: 11, // nested minute: 2; var date: d, month: m, time: hour: h = equinox2 (); // h heeft de waarde van de geneste eigenschap, terwijl "jaar" en "minuut" helemaal console.log worden overgeslagen ("De equinox van dit jaar was op" + d + m + "op" + h); // De equinox van dit jaar was op 20 maart om 11 uur 
In ES6 stellen rustparameters ons in staat om eenvoudig een paar vaste parameters in een functie te gebruiken, samen met de rest van het volgende en variabele aantal parameters. We gebruiken het al argumenten, Dit is een array-achtig object dat de argumenten definieert die aan een functie worden doorgegeven, maar we kunnen de arrayfunctie duidelijk niet gebruiken om deze argumenten te manipuleren. Met een duidelijke syntaxis in ES6, verplaatst het ook de intentie van de ontwikkelaar naar het syntaxisniveau met drie punten ... om een variabel aantal argumenten aan te duiden.
Laten we proberen restparameters in de ES6-syntaxis te gebruiken met gruntjs en de plug-in voor de traceur-transponder, die we in de vorige sectie hebben gebruikt.
Installeer grunt command line utility:
$ npm uninstall -g grunt $ npm install -g grunt-cli
Maak een bestand, genaamd package.json, die de verschillende modules definiëren die nodig zijn om Grunt uit te voeren. Merk op dat deze lijst met afhankelijkheden de traceur-plug-in bevat:
"name": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
Maak het Gruntfile.js die slechts één taak zal bevatten traceur die de ES6-syntaxis zal converteren naar het JavaScript van vandaag. Hiermee kunnen we ES6-rustparameters uitproberen.
module.exports = functie (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), traceur: custom: files: 'js /': ['rest-spread.js '] // dest: [bronbestanden]); grunt.loadNpmTasks ( 'grunt-traceur); grunt.registerTask ('standaard', ['traceur']); ; Maak een eenvoudig index.html om het met traceur gecompileerde JavaScript-bestand te bellen, js / rust-spread.js:
ES6 Rustparameters
Het belangrijkste is dat we het bestand maken rest-spread.js, die de syntaxis van de restparameter zal bevatten:
functie push (array, ... items) // restparameters definiëren met items met 3 puntsyntaxis. ForEach (functie (item) array.push (item); console.log (item);); // 1 vaste + 4 variabele parameters var-planeten = []; console.log ("Binnenplaneten van ons zonnestelsel zijn:"); push (planeten, "Mercury", "Venus", "Earth", "Mars"); // rust parameters Eindelijk zullen we rennen knorren in de opdrachtregel, die standaard de traceurtaak uitvoert en het bestand maakt, js / 5-rest-spread.js. Bekijk vervolgens het bestand index.html in de browser console:
$ npm install $ grunt ╰─ $ grunt Running "traceur: custom" (traceur) taak js / ['rest-spread.js'] Compileren ... js / Compilation successful - js / Writing ... js / js / rest-spread.js succesvol. Succesvol schrijven - [object Object]
Een gespreide operator is het tegenovergestelde van rustparameters. Wanneer we een functie aanroepen, kunnen we het vaste argument dat nodig is, samen met een array met een variabele grootte doorgeven met de vertrouwde syntaxis van drie punten, om het variabele aantal argumenten aan te geven.
We zullen hetzelfde project gebruiken als de restparameters hierboven en toevoegen in de spreidoperatorcode aan het bestand rest-spread.js. In het onderstaande voorbeeld heeft de functie zes afzonderlijke argumenten nodig. Bij het aanroepen van de functie worden de gegevens doorgegeven als een array met de spreidingsoperator. Laten we eens kijken hoe de syntaxis er uit ziet, wanneer de functie met vaste argumenten wordt aangeroepen, evenals een variabel aantal argumenten:
Voeg de spreidoperatorcode toe aan rest-spread.js:
// Spread-operator "... weblink" -functie createURL (opmerking, pad, protocol, subdomein, domein, tld) var shoutout = comment + ":" + protocol + ": //" + subdomain + "." + domein + "." + tld + "/" + pad; console.log (shoutout); var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Wereld's eerste website"; createURL (commentaar, ... weblink); // spreidingsoperator
Voer het traceur-compileer uit via de Grunt-taak op de opdrachtregel en bekijk het bestand, index.html, in de browser:
$ grunt Running "traceur: custom" (traceur) taak js / ['rest-spread.js'] Compileren ... js / Compilatie succesvol - js / Schrijven ... js / js / rest-spread.js succesvol. Succesvol schrijven - [Object Object] Gedaan, zonder fouten.
Als je GruntJS al gebruikt als een bouwtool in je huidige project, zal het eenvoudig zijn om het te integreren met ES6-plug-ins. Dus probeer andere GruntJS ES6-gerelateerde plug-ins uit om de ES6-syntaxis te compileren met het huidige JavaScript.
JavaScript-aanbiedingen voor in voor iteratie, maar het heeft enkele beperkingen. Bijvoorbeeld, in een array-iteratie, de resultaten met een voor in loop geeft ons de indexen en niet de waarden. Laten we de onderstaande code eens bekijken om dit te illustreren:
var planeten = ["Mercurius", "Venus", "Aarde", "Mars"]; voor (p in planeten) console.log (p); // 0,1,2,3 var es6 = editie: 6, commissie: "TC39", standaard: "ECMA-262"; for (e in es6) console.log (e); // editie, commissie, standaard
Laten we hetzelfde concept proberen, maar deze keer met voor van met een array, een set en een kaart:
var planeten = ["Mercurius", "Venus", "Aarde", "Mars"]; voor (p van planeten) console.log (p); // Mercurius, Venus, Aarde, Mars var engines = Set (["Gecko", "Trident", "Webkit", "Webkit"]); voor (var e van motoren) console.log (e); // Set heeft alleen unieke waarden, daarom wordt Webkit maar één keer weergegeven var es6 = nieuwe kaart (); es6.set ("editie", 6); es6.set ("commissie", "TC39"); es6.set ("standaard", "ECMA-262"); for (var [naam, waarde] van es6) console.log (naam + ":" + waarde); 
Arraycomprehensions geven ons een korte syntaxis om elk van de array-inhoud in een bepaald patroon te manipuleren. Het lijkt erg op de kaart() of filter() methoden beschikbaar in het object Array. Laten we eens kijken hoe we gebruiken kaart()
var temperatuur = [0, 37, 100]; functie degToKelvin (deg) return deg + 273; temperature.map (degToKelvin); // [273, 310, 373]
Laten we dezelfde functie in Firefox doorlopen om de syntaxis van steno te zien in ES6 om arrays te maken met maar liefst drie loops om mogelijke oplossingen voor het spel te creëren, Cluedo:
// Array gemaakt met 1 lus var-temperatuur = [0, 37, 100]; [t + 273 voor (t van temperatuur)]; // [273, 310, 373] // Array gemaakt met 3 lussen var suspects = ["Miss Scarlet", "Kolonel Mustard"], wapens = ["Candlestick", "Dagger"], rooms = ["Kitchen", "Ballroom"]; [(console.log (s + "met een" + w + "in de" + r)) voor (s van verdachten) voor (w van wapens) voor (r van kamers)];
In programmeertalen voeren modules geïsoleerde discrete functies uit en zijn ze onafhankelijk van elkaar. Dit helpt niet alleen om herbruikbare componenten in verschillende projecten te bouwen, maar houdt ook fouten bij de onderdelen die betrekking hebben op het huidige project. We hebben modules in JavaScript gemaakt, meestal met AMD of CommonJS. Laten we een eenvoudige module maken met behulp van de ES6-syntaxis en de ES6-module-transponder.
Laten we eerst het HTML-bestand maken, index.html, dat zal de essentiële JavaScripts noemen. We zullen RequireJS gebruiken als AMD-lader; daarom verwijzen we naar een CDN-kopie van het nieuwste RequireJS-bestand. Vervolgens voegen we ook het kenmerk toe, data-main, op de script label om RequireJS te laten laden js / init.js het dossier.
ES6-modules
Nu gaan we het bestand maken, js / init.js, die gewoon het js / main.js het dossier:
vereisen (['main'], functie () );
Maak de module, cirkel, in het bestand, In / circle.js, in de ES6-syntaxis. Deze module exporteert twee functies:
exportfunctie gebied (radius) return Math.PI * radius * radius; export functieomtrek (radius) return 2 * Math.PI * straal;
Maak het bestand aan, In / main.js, die de module zal importeren cirkel zodat we de functies van die specifieke module kunnen gebruiken. Let op de importeren syntaxis:
import area, circumference uit 'circle'; console.log ("Gebied van de cirkel:" + gebied (4) + "vierkante meter"); console.log ("Omtrek van de cirkel:" + omtrek (14) + "meters"); Op dit punt wordt de mappenstructuur hieronder weergegeven. We gebruiken de ES6-module-transponder om ES5-compatibele code te maken met twee nieuw gemaakte bestanden: js / circle.js en js / main.js.
$ boom. | - in | | - circle.js | '- main.js | - index.html' - js '- init.js
Installeer de ES6-module Transpiler:
$ npm installeer https://github.com/square/es6-module-transpiler.git $ compile-modules --help
Ten slotte zullen we deze twee bestanden overnemen. Navigeer naar de map, in, vanaf de opdrachtregel:
$ compile-modules circle.js --type amd --to ... / js $ compileer-modules main.js --type amd --to ... / js $ cd ... $ tree. | - in | | - circle.js | '- main.js | - index.html' - js | - circle.js | - init.js '- main.js
Bekijk de gecodeerde code in de bestanden js / circle.js en js / main.js. We zullen nu het bestand openen, index.html, in de browser om modules in actie te zien! We zullen een webserver moeten gebruiken om dit bestand uit te voeren. Ik gebruik de Python SimpleHTTPServer. Navigeer naar de opdrachtregel in de hoofdmap van het bestand, index.html:
$ python -m SimpleHTTPServer 8000
Veel van onze leden van de community voor webontwikkeling hebben openlijk gedeeld over ES6 en wat er aan de hand is. Ik raad ten zeerste aan om door hun blogcategorieën te gaan die gerelateerd zijn aan ES6:
