Share
J'aimerais partager avec vous une série d'articles sur ECMAScript 6, en vous faisant partager ma passion et en expliquant comment cela peut vous être utile. J'espère que vous apprécierez de les lire autant que je les ai écrites.
Premièrement, je travaille chez Microsoft sur le moteur de rendu de navigateur pour Microsoft Edge, ce qui représente une nette amélioration par rapport au moteur Internet Explorer que nous avons connu (et aimé?) Au fil des ans. Ma caractéristique préférée est qu’il prend en charge beaucoup d’ECMAScript 6. Pour moi, c’est un avantage énorme lors de l’écriture d’applications volumineuses pour le Web..
À ce jour, près de 70% des fonctionnalités ECMAScript 6 de Microsoft Edge sont disponibles, selon http://kangax.github.io/compat-table/es6/ et ES6 sur dev.modern.ie/platform/status..
J'aime JavaScript, mais lorsqu'il s'agit de travailler sur de grands projets comme Babylon.js, je préfère TypeScript, qui est désormais propulsé par Angular 2. La raison en est que JavaScript (autrement appelé ECMAScript 5) ne possède pas toutes les fonctionnalités de syntaxe auxquelles je suis habitué des autres langages dans lesquels j'écris des projets volumineux. Par exemple, les classes et l'héritage me manquent.
Alors sans plus tarder, entrons dans cela:
JavaScript est un langage orienté prototype et il est possible de simuler des classes et un héritage avec ECMAScript 5..
La flexibilité des fonctions en JavaScript nous permet de simuler l’encapsulation à laquelle nous sommes habitués lorsque nous traitons avec des classes. L'astuce que nous pouvons utiliser pour cela est d'étendre le prototype d'un objet:
Accentsconagua
var Animal = (function () function Animal (nom) this.name = name; // méthodes Animal.prototype.doSomething = function () console.log ("Je suis" + this.name); ; animal de retour;) (); var lion = nouvel animal ("Lion"); lion.doquelquechose ();Nous pouvons voir ici que nous avons défini un «classe" avec "Propriétés" et "les méthodes”.
Le constructeur est défini par la fonction elle-même (fonction Animal) où nous pouvons instancier des propriétés. En utilisant le prototype, nous pouvons définir des fonctions qui seront considérées comme des méthodes d'instance..
Cela fonctionne, mais cela suppose que vous connaissiez l'héritage prototype, et que pour quelqu'un venant d'un langage de classe, cela semble très déroutant. Bizarrement, JavaScript a un mot-clé de classe, mais il ne fait rien. ECMAScript 6 fonctionne maintenant et permet un code plus court:
classe AnimalES6 constructeur (nom) this.name = nom; doSomething () console.log ("Je suis" + this.name); var lionES6 = new AnimalES6 ("Lion"); lionES6.doQuelque chose ();Le résultat est identique, mais il est plus facile d'écrire et de lire pour les développeurs habitués à écrire des classes. Le prototype n’est pas nécessaire et vous pouvez utiliser le Nouveau mot clé pour définir le constructeur.
De plus, les classes introduisent un certain nombre de nouvelles sémantiques qui ne sont pas présentes dans l'équivalent ECMAScript 5. Par exemple, vous ne pouvez pas appeler un constructeur sans Nouveau, et vous ne pouvez pas essayer de construire des méthodes avec Nouveau. Un autre changement est que les méthodes ne sont pas énumérables.
Point intéressant ici: les deux versions peuvent vivre côte à côte.
À la fin de la journée, même avec les nouveaux mots-clés, vous vous retrouvez avec une fonction avec un prototype où une fonction a été ajoutée. Une "méthode" est simplement une propriété de fonction sur votre objet.
ES6 prend également en charge deux autres fonctions principales du développement basé sur les classes, les accesseurs et les ajusteurs. Cela rend beaucoup plus évident ce qu'une méthode est supposée faire:
classe AnimalES6 constructeur (nom) this.name = nom; this._age = 0; get age () return this._age; définir l'âge (valeur) if (valeur < 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;Assez pratique, droite?
Mais nous pouvons voir ici une mise en garde commune de JavaScript: le membre privé «pas vraiment privé» (_âge). J'ai écrit un article il y a quelque temps sur ce sujet.
Heureusement, nous avons maintenant un meilleur moyen de le faire avec une nouvelle fonctionnalité de ECMAScript 6: symboles.
var ageSymbol = Symbole (); classe AnimalES6 constructeur (nom) this.name = nom; this [ageSymbol] = 0; get age () return this [ageSymbol]; définir l'âge (valeur) if (valeur < 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;Alors qu'est-ce qu'un symbole? Il s'agit d'un type de données unique et immuable qui pourrait être utilisé comme identifiant pour les propriétés de l'objet. Si vous n'avez pas le symbole, vous ne pouvez pas accéder à la propriété.
Cela conduit à un accès plus «privé» aux membres.
Ou du moins, moins facilement accessible. Les symboles sont utiles pour l’unicité du nom, mais l’unicité n’implique pas la confidentialité. L'unicité signifie simplement que si vous avez besoin d'une clé qui ne doit pas entrer en conflit avec une autre clé, créez un nouveau symbole..
Mais ce n’est pas encore vraiment privé car, grâce à Object.getOwnPropertySymbols, les consommateurs en aval peuvent accéder à vos propriétés de symbole.
Une fois que nous avons des classes, nous voulons aussi avoir un héritage. Il est encore une fois possible de simuler l'héritage dans ES5, mais c'est assez complexe à faire.
Par exemple, voici ce que TypeScript produit pour simuler l’héritage:
var __extends = this .__ extend || fonction (d, b) for (var p dans b) if (b.hasOwnProperty (p)) d [p] = b [p]; fonction __ () this.constructor = d; __. prototype = b.prototype; d.prototype = new __ (); ; var SwitchBooleanAction = (function (_super) __extends (SwitchBooleanAction, _super); fonction SwitchBooleanAction (triggerOptions, target, propertyPath, condition) _super.call (this, triggerOptions, condition); this.propertyPath = propertyPath; this._target = this._target = ; SwitchBooleanAction.prototype.execute = function () this._target [this._property] =! This._target [this._property];; return SwitchBooleanAction;) (BABYLON.Action);
Pas vraiment facile à lire.
Mais l'alternative ECMAScript 6 est meilleure:
var legsCountSymbol = Symbole (); classe InsectES6 étend AnimalES6 constructeur (nom) super (nom); this [legsCountSymbol] = 0; get legsCount () return this [legsCountSymbol]; set legsCount (valeur) if (valeur < 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(); Grace à s'étend mot-clé, vous pouvez spécialiser une classe dans une classe enfant tout en conservant la référence à la classe racine avec super mot-clé.
Avec tous ces ajouts, il est maintenant possible de créer des classes et de travailler avec l'héritage sans avoir à utiliser le prototype de la magie vaudou..
Avec toutes ces nouvelles fonctionnalités disponibles sur nos navigateurs, je pense qu'il est encore plus pertinent d'utiliser TypeScript pour générer du code JavaScript..
Tout d’abord, la dernière version de TypeScript (1.4) a commencé à ajouter le support du code ECMAScript 6 (avec le laisser et const mots-clés), il vous suffit donc de conserver votre code TypeScript existant et d'activer cette nouvelle option pour commencer à générer du code ECMAScript 6.
Mais si vous regardez de près certains typesScript, vous verrez que cela ressemble à ECMAScript 6 sans les types. Donc, apprendre TypeScript aujourd'hui est un excellent moyen de comprendre ECMAScript 6 demain!
À l'aide de TypeScript, tout cela est maintenant possible dans tous les navigateurs au fur et à mesure que votre code est converti en ECMAScript 5. Si vous souhaitez utiliser ECMAScript 6 directement dans le navigateur, vous pouvez effectuer une mise à niveau vers Windows 10 et y tester le moteur de rendu de Microsoft Edge..
Si vous ne voulez pas faire cela uniquement pour essayer de nouvelles fonctionnalités de navigateur, vous pouvez également accéder à un ordinateur Windows 10 avec Microsoft Edge à remote.modern.ie. Cela fonctionne aussi sur votre Mac OS ou Linux.
Bien entendu, Microsoft Edge n'est pas le seul navigateur prenant en charge le standard ouvert ES6. D'autres navigateurs sont également intégrés et vous pouvez suivre le niveau de support sur: http://kangax.github.io/compat-table/es6/.
L’avenir de JavaScript avec ECMAScript 6 est prometteur et, honnêtement, j’ai hâte de le voir largement pris en charge par tous les navigateurs modernes.!
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
