Good Mood

Dit is een grote verbetering voor goede oude object literals omdat ontwikkelaars meer logica kunnen inpakken en meer dingen kunnen doen dan met ES5 objecten!,

Pijlfuncties in ES6

Dit is waarschijnlijk de functie waar ik het meest op wachtte. Ik hield van CoffeeScript vanwege zijn dikke pijlen. Nu hebben we ze in ES6.

De fat pijlen zijn verbazingwekkend omdat ze ervoor zouden zorgen dat je dit goed zou gedragen, dat wil zeggen, Dit zal dezelfde waarde hebben als in de context van de functie — het zal niet muteren zoals gewoonlijk gebeurt elke keer dat je een afsluiting maakt. Dit gedrag was een van de ergste delen van JavaScript en vaak veroorzaakt veel verwarring met ontwikkelaars nieuw voor de taal., Met behulp van arrows functies in ES6 kunnen we stoppen met het gebruik van that = this of self = this of _this = this or .bind(dit).

bijvoorbeeld, deze code in ES5 is lelijk omdat je kunt vergeten om de context over te zetten naar de afsluiting met _this:

var _this = this
$('.btn').click(function(event){
_this.sendData()
})

de bind() of call() benaderingen zijn niet veel beter vanwege hun verbositeit. Maar kijk eens naar deze mooie ES6 code:

$('.btn').click((event) =>{
this.sendData()
})

helaas besloot de ES6 Commissie dat het lenen van skinny arrows van CoffeeScript te veel van een goede zaak was en liet ons in plaats daarvan een lange oude functie achter., (Skinny arrow in CoffeeScript werkt als reguliere functie in ES5 en ES6).

Hier is een ander voorbeeld waarin we de aanroep gebruiken om de context door te geven aan de logUpperCase() functie in ES5:

terwijl we in ES6 niet hoeven te rommelen met _this:

merk op dat je oude functie kunt mixen en matchen met => in ES6 zoals je wilt. En wanneer een pijl functie wordt gebruikt met een één lijn statement, wordt het een uitdrukking; dat wil zeggen,. het zal impliciet het resultaat van die ene verklaring teruggeven. Als je meer dan één regel hebt, moet je return expliciet gebruiken.,

deze ES5-code maakt een array aan van de messages array:

wordt dit in ES6:

var ids = 
var messages = ids.map(value => `ID is ${value}`) // implicit return

merk op dat ik de string templates heb gebruikt? Een andere functie van CoffeeScript… ik hou van hen!

de haakjes () zijn optioneel voor enkele params in een pijl functie handtekening. Echter, je hebt ze nodig bij het gebruik van meer dan één param. In ES5 heeft de code een functie met expliciete return:

nu is hier een meer welsprekende versie van de code in ES6 met haakjes rond params en impliciete return:

zijn fat pijlen niet geweldig? Gebruik ze.,

Beloften in ES6

Beloften zijn een controversieel ontwikkelingsthema geweest, vooral in grotere organisaties waar het moeilijker kan zijn om het eens te worden over een gemeenschappelijke aanpak. Een reden hiervoor is het aantal promise-implementaties met iets andere syntaxes-Q, bluebird, deferated.js, gelofte, avow, en jquery uitgesteld om slechts een paar te noemen. Een andere reden is dat sommige software-ingenieurs zeggen, ” we hebben geen beloften nodig en kunnen gewoon gebruik maken van async, generatoren, callbacks, enz.”

gelukkig is er een kans dat de debatten zullen kalmeren met de standaard Promise implementatie toegevoegd aan ES6!,

een triviaal voorbeeld van een uitgestelde asynchrone uitvoering met setTimeout():

setTimeout(function(){ console.log('Yay!') }, 1000)

We kunnen deze code in ES6 herschrijven met Promise:

var wait1000 = new Promise(function(resolve, reject) {
setTimeout(resolve, 1000)
}).then(function() {
console.log('Yay!')
})

of met ES6 arrow functies:

var wait1000 = new Promise((resolve, reject)=> {
setTimeout(resolve, 1000)
}).then(()=> {
console.log('Yay!')
})

tot nu toe hebben we het aantal regels code verhoogd van drie naar vijf zonder duidelijk voordeel. Dat klopt, het lijkt contra-intuïtief. Het voordeel zal komen als we meer geneste logica in de setTimeout() callback hebben., Bijvoorbeeld, deze ES5 code heeft twee geneste callbacks:

setTimeout(function(){
console.log('Yay!')
setTimeout(function(){
console.log('Wheeyee!')
}, 1000)
}, 1000)

Het kan opnieuw worden geschreven met ES6 Beloften als zo:

zoals u kunt zien, veranderde de code organisatie toen we refactored callbacks-only code in code met Beloften.

een ander voordeel dat niet wordt behandeld in dit essay — Beloften hebben ook een fail-and-catch-all callback, wat een leuke functie is. Neem een kijkje op deze post voor meer informatie over promises: Inleiding tot ES6 Promises.

Block-Scoped constructies: Let en Const

u hebt misschien al de vreemd klinkende let in ES6-code gezien., Dit is niet alleen een suikercoating functie. Het is ingewikkelder en voegt meer logica toe aan uw variabele declaraties.

let is een nieuwe var die ontwikkelaars toestaat om de variabele naar de blokken te scrollen. We definiëren blokken door de krullende beugels. In ES5 deden de blokken niets met de VAR ‘ s zoals hier te zien is:

in de code hierboven zal het resultaat 1000 zijn. Wow! Dat is een heel slecht insect. In ES6 gebruiken we let om de scope te beperken tot de blokken. VAR ‘ s zijn dan functie scoped.

in deze code is de waarde 0 omdat het if-blok ook de let-declaratie heeft., Als het niets had (bedrag = 1), dan zou de uitdrukking 1 zijn geweest.

als het gaat om const, zijn dingen makkelijker; het voorkomt gewoon opnieuw toewijzen, en het is ook Block-scoped zoals let. Om aan te tonen, hier zijn meerdere constanten en de code werkt prima omdat de const statements tot verschillende blokken behoren:

naar mijn bescheiden mening, laten en const de taal overcompliceren. Zonder hen hadden we slechts één gedrag, nu zijn er meerdere scenario ‘ s te overwegen., ;- (Voor mensen die nieuw zijn in JavaScript, die afkomstig zijn uit talen als Java, const en let bieden een nieuwe laag van ingebouwde bescherming tegen sommige onvoorspelbaar gedrag.

klassen in ES6

als je van objectgeoriënteerd programmeren (OOP) houdt, dan zul je van deze functie houden. Het maakt het schrijven van klassen in ES6, en erven van hen, net zo gemakkelijk als het houden van een reactie op Facebook.

in ES5 was het aanmaken en gebruiken van klassen op zijn zachtst gezegd moeilijk. Er was geen trefwoord klasse (het was gereserveerd, maar deed niets)., Naast dat, veel erfenis patronen zoals pseudo klassiek, klassiek, functioneel toegevoegd aan de verwarring, gieten benzine op de vurige divisies tussen JavaScript-ontwikkelaars.

Ik zal je niet laten zien hoe je een klasse in ES5 schrijft, omdat er veel patronen zijn. Laten we eens een kijkje nemen op de ES6 voorbeeld meteen. Ik kan u vertellen dat de ES6 klasse prototypes zal gebruiken, niet de function factory aanpak. We hebben een classbaseModel waarin we een constructor en een getName() methode kunnen definiëren:

merk op dat ik standaard parameterwaarden voor opties en gegevens gebruik., Ook hoeven methodenamen niet meer de woordfunctie of de dubbele punt (:) te hebben. Het andere grote verschil is dat je geen eigenschappen kunt toewijzen this.NAME op dezelfde manier als methoden, dat wil zeggen, Je kunt Naam niet zeggen op hetzelfde inspringniveau als een methode. Om de waarde van een eigenschap in te stellen, kunt u eenvoudig een waarde in de constructor toewijzen.,

Het AccountModel zal erven van basismodel met class NAME breidt PARENT_NAME uit:

class AccountModel extends baseModel {
constructor(options, data) {

om de bovenliggende constructor aan te roepen, kunt u moeiteloos super() aanroepen met params:

super({private: true}, ) // Call the parent method with super
this.name = 'Account Model'
this.url +='/accounts/'
}

Als u echt fancy wilt zijn, kunt u ook een getter als deze instellen met accountsData als een eigenschap:

get accountsData() { // Calculated attribute getter
// ... make XHR
return this.data
}
}

dus na al dit werk, hoe gebruik je eigenlijk deze klasse Abracadabra? Het is net zo makkelijk als een driejarige laten geloven in de Kerstman., Gebruik nieuwe operand:

let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)

in het geval u zich afvraagt, de uitvoer is:

Class name: Account Model
Data is %s 32113123123,524214691

natuurlijk bestonden er klassen in CoffeeScript en oudere JavaScript standaarden, dus ze zijn niet volledig nieuw. Echter, in ES6 is het gebruik van klassen gemakkelijker gemaakt, wat vooral belangrijk is voor enterprise-ontwikkelaars omdat ze meestal werken aan grotere projecten verspreid over meerdere teams (dus de code vereist modularisatie).

Modules in ES6

zoals u wellicht weet, was er geen native modules ondersteuning in JavaScript voor ES6., Mensen kwamen met AMD, RequireJS, CommonJS en andere oplossingen, maar ze waren gewoon dat — oplossing en hacks. Met ES6 zijn er nu ingebouwde modules met import en export operanden.

in ES5 gebruikt u <script> tags met IIFE, of een bibliotheek zoals AMD, terwijl u in ES6 uw Klasse kunt exposeren met export. Omdat ik een knooppunt ben.js guy dus Ik zal CommonJS gebruiken, dat is ook een knoop.js syntaxis, om dit probleem op te lossen. Het is vrij eenvoudig om CommonJS gebruiken op de browser met de browserify bundler., Laten we zeggen dat we poort variabele en getAccounts methode in ES5 module.js:

module.exports = {
port: 3000,
getAccounts: function() {
...
}
}

in ES5 main.js, zouden we vereisen (‘module’) dat afhankelijkheid:

var service = require('module.js')
console.log(service.port) // 3000

in ES6 zouden we exporteren en importeren. Dit is bijvoorbeeld onze bibliotheek in de ES6 module.js-bestand:

export var port = 3000
export function getAccounts(url) {
...
}

In het hoofdbestand van het importeerbestand ES6.js, we gebruiken import {name} uit’ mijn-module ‘ syntaxis., Bijvoorbeeld, we kunnen objecten/methoden poort importeren, en krijgen accounts van de module genaamd module:

import {port, getAccounts} from 'module'
console.log(port) // 3000

of we kunnen alles importeren als een variabele service in main.js:

import * as service from 'module'
console.log(service.port) // 3000

merk op dat native ondersteuning voor ES6-modules in browsers niet snel komt (vanaf dit schrijven tenminste), dus je hebt iets als jspm nodig om ES6-modules te gebruiken.

bekijk deze tekst voor meer informatie en voorbeelden over ES6-modules. En vergeet niet, – Maakt niet uit wat, schrijf modulaire JavaScript!,

voor … van begrip in ES6

Hier is een probleem met ES5: als we willen herhalen over objecten met behulp van zijn sleutels, moeten we die sleutels eerst extraheren met Object.toets(). Bijvoorbeeld:

een ander probleem met forEach is dat je de word-functie moet schrijven. Maar er is een betere verklaring in ES6! De for … van statement vervangt standaard voor en forEach, en is vergelijkbaar met for…in behalve dat dat for…in itereert over sleutels en voor … over waarden.,

met Behulp van de vorige codefragment gegevens (boeken), kunnen we iterate, met voor…in en de toetsen of met behulp van de…van:

for (let key in books){
console.log(books)
}

Uitgangen van de toetsen:

Pro Express.js
React Quickly
Full Stack JavaScript
Azat

Terwijl het voor…van werken met waarden:

for (let book of books){
console.log(book)
}

De uitvoer van voor…van:

Pro Express.js
React Quickly
Full Stack JavaScript

Merk op dat de output van de…van de negeert de waarde met de toets auteur als zou forEach op een array:

Mijn persoonlijke ervaring in het werken met comprehensions is dat ze verhogen de code leesbaarheid. Dit is van het grootste belang voor code-onderhoud in zakelijke toepassingen.