Share
Aș dori să vă împărtășesc o serie de articole despre ECMAScript 6, împărtășind pasiunea pentru acest lucru și explicând cum poate funcționa pentru dvs. Sper că vă place să le citiți cât de mult le-am scris.
În primul rând, lucrez în Microsoft pe motorul de redare a browserului pentru Microsoft Edge, care este o îmbunătățire majoră față de motorul Internet Explorer pe care l-am cunoscut (și ne-a plăcut?) De-a lungul anilor. Caracteristica mea preferată personală este că suportă o mulțime de ECMAScript 6. Pentru mine, acesta este un beneficiu masiv când se scriu aplicații mari pentru web.
Acum avem aproape 70% din caracteristicile ECMAScript 6 din Microsoft Edge până în prezent, conform http://kangax.github.io/compat-table/es6/ și ES6 pe dev.modern.ie/platform/status.
Îmi place JavaScript, dar când vine vorba de lucru pe proiecte mari precum Babylon.js, prefer tipul TypeScript, care acum propulsează Angular 2. Motivul este că JavaScript (altfel cunoscut sub numele de ECMAScript 5) nu are toate caracteristicile sintaxei cu care sunt obișnuit din alte limbi pe care le scriu proiecte mari. Mi-e dor de clase și moștenire, de exemplu.
Așadar, fără să mai vorbim, să intrăm în asta:
JavaScript este un limbaj orientat pe prototipuri și este posibil să se simuleze clasele și moștenirea cu ECMAScript 5.
Flexibilitatea funcțiilor din JavaScript ne permite să simulăm încapsularea la care suntem obișnuiți atunci când ne ocupăm de clase. Trucul pe care îl putem folosi pentru acest lucru este extinderea prototipului unui obiect:
Accentsconagua
var Animal = (functie () function Animal (nume) this.name = nume; // Metode Animal.prototype.doSomething = function () console.log ("Sunt" + this.name); ; returnați animalul;) (); var lion = animal nou ("leu"); lion.doSomething ();Putem vedea aici că am definit un "clasă" cu "proprietăţi" și "metode“.
Constructorul este definit de funcția însăși (funcție Animal) unde putem instanția proprietățile. Prin utilizarea prototipului putem defini funcții care vor fi considerate ca metode de instanță.
Aceasta funcționează, dar presupune că știi despre moștenirea prototypală, iar pentru cineva care vine dintr-un limbaj clasic, pare foarte confuz. Este destul de ciudat că JavaScript are un cuvânt cheie din clasă, dar nu face nimic. ECMAScript 6 face acum acest lucru, și permite codul mai scurt:
clasa AnimalES6 constructor (nume) this.name = nume; doSomething () console.log ("Sunt" + this.name); var lionES6 = nou AnimalES6 ("leu"); lionES6.doSomething ();Rezultatul este același, dar acest lucru este mai ușor de scris și citit pentru dezvoltatorii care sunt obișnuiți să scrie clase. Nu este nevoie de prototip și puteți folosi nou cuvânt cheie pentru a defini constructorul.
Mai mult, clasele introduc o serie de noi semantici care nu sunt prezente în echivalentul ECMAScript 5. De exemplu, nu puteți apela un constructor fără nou, și nu puteți încerca să construiți metode nou. O altă schimbare este că metodele nu sunt enumerabile.
Un punct interesant aici: ambele versiuni pot trăi unul lângă celălalt.
La sfârșitul zilei, chiar și cu noile cuvinte cheie, veți termina cu o funcție cu un prototip în care a fost adăugată o funcție. O "metodă" aici este pur și simplu o funcție de proprietate asupra obiectului tău.
Două alte caracteristici principale ale dezvoltării bazate pe clasă, getters și setters sunt, de asemenea, suportate în ES6. Acest lucru face mult mai evidentă ce ar trebui să facă o metodă:
clasa AnimalES6 constructor (nume) this.name = nume; this._age = 0; vârsta () return this._age; set vârstă (valoare) if (valoare < 0) console.log("We do not support undead animals"); this._age = value; doSomething() console.log("I'm a " + this.name); var lionES6 = new AnimalES6("Lion"); lionES6.doSomething(); lionES6.age = 5;Destul de la îndemână, corect?
Dar putem vedea aici o avertizare comună a JavaScript: un membru privat "nu foarte privat" (_vârstă). Am scris un articol cu ceva timp în urmă pe această temă.
Din fericire, acum avem o modalitate mai bună de a face acest lucru cu o nouă caracteristică a ECMAScript 6: simboluri.
Var varSymbol = Simbol (); clasa AnimalES6 constructor (nume) this.name = nume; acest [ageSymbol] = 0; vârsta () returnați această [ageSymbol]; set vârstă (valoare) if (valoare < 0) console.log("We do not support undead animals"); this[ageSymbol] = value; doSomething() console.log("I'm a " + this.name); var lionES6 = new AnimalES6("Lion"); lionES6.doSomething(); lionES6.age = 5;Deci, ce este un simbol? Acesta este un tip de date unic și imuabil care ar putea fi folosit ca un identificator pentru proprietățile obiectului. Dacă nu aveți simbolul, nu puteți accesa proprietatea.
Acest lucru conduce la accesul unui membru mai "privat".
Sau, cel puțin, mai puțin accesibil. Simbolurile sunt utile pentru unicitatea numelui, dar unicitatea nu implică intimitatea. Unicitatea înseamnă că, dacă aveți nevoie de o cheie care nu trebuie să fie în conflict cu nici o altă cheie, creați un nou simbol.
Dar acest lucru nu este încă privat, deoarece, datorită Object.getOwnPropertySymbols, consumatorii din aval pot accesa proprietățile simbolurilor.
Odată ce avem cursuri, dorim să avem și moștenire. Este încă o dată posibilă simularea moștenirii în ES5, dar este destul de complexă de făcut.
De exemplu, aici, ce este produs de către TypeScript pentru a simula moștenirea:
var __extends = acest .__ extinde || funcția (d, b) pentru (var p în b) dacă (b.hasOwnProperty (p)) d [p] = b [p]; funcția __ () this.constructor = d; __. prototip = b.prototip; d.prototype = new __ (); ; var SwitchBooleanAction = (funcția (_super) __extends (SwitchBooleanAction, _super); funcția SwitchBooleanAction (triggerOptions, target, propertyPath, condiție) _super.call (this, triggerOptions, condition); this.propertyPath = propertyPath; this._target = target ; SwitchBooleanAction.prototype.execute = funcția () this._target [this._property] =! This._target [this._property]; return SwitchBooleanAction;) (BABYLON.Action);
Nu este foarte ușor de citit.
Dar alternativa ECMAScript 6 este mai bună:
var legsCountSymbol = Simbol (); clasa InsectES6 extinde AnimalES6 constructor (nume) super (nume); acest [legsCountSymbol] = 0; get legsCount () returnați acest [legsCountSymbol]; set legsCount (valoare) if (valoare < 0) console.log("We do not support nether or interstellar insects"); this[legsCountSymbol] = value; doSomething() super.doSomething(); console.log("And I have " + this[legsCountSymbol] + " legs!"); var spiderES6 = new InsectES6("Spider"); spiderES6.legsCount = 8; spiderES6.doSomething(); Mulțumită extinde Cuvinte cheie puteți specializa o clasă într - o clasă de copil, păstrând în același timp referință la clasa rădăcină cu super cuvinte cheie.
Cu toate aceste adăugiri extraordinare, acum este posibil să se creeze clase și să se lucreze cu moștenirea fără a se ocupa de prototipul voodoo magic.
Cu toate aceste funcții noi fiind disponibile pe browserele noastre, cred că este mai relevant să folosiți TypeScript pentru a genera cod JavaScript.
În primul rând, cea mai recentă versiune de TypeScript (1.4) a început să adauge suport pentru codul ECMAScript 6 (cu lăsa și const cuvinte cheie), astfel încât trebuie doar să păstrați codul TypeScript existent și să activați această nouă opțiune pentru a începe să generați codul ECMAScript 6.
Dar, dacă vă uitați atent la un tip de tipScript, veți găsi că acesta arată ca ECMAScript 6 fără tipurile. Deci, de a învăța astăzi TypeScript este o modalitate foarte bună de a înțelege ECMAScript 6 mâine!
Folosind TypeScript, puteți avea toate aceste lucruri acum în browsere, deoarece codul dvs. devine convertit în ECMAScript 5. Dacă doriți să utilizați ECMAScript 6 direct în browser, puteți face upgrade la Windows 10 și testați cu ajutorul motorului de redare Microsoft Edge acolo.
Dacă nu doriți să faceți acest lucru doar pentru a încerca câteva caracteristici noi ale browserului, puteți, de asemenea, să accesați un computer Windows 10 cu Microsoft Edge la remote.modern.ie. Acest lucru funcționează și pe caseta dvs. Mac OS sau Linux.
Desigur, Microsoft Edge nu este singurul browser care acceptă standardul deschis ES6. Sunt disponibile și alte browsere și puteți urmări nivelul de asistență la: http://kangax.github.io/compat-table/es6/.
Viitorul JavaScript cu ECMAScript 6 este luminos și, sincer, nu pot să aștept să-l văd larg acceptat pe toate browserele moderne!
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
