GEBRUIK MET­EEN ES2015

HOE DE LAAT­STE FEA­TU­RES JE TIJD EN MOEI­TE BIJ PROJECTEN KUN­NEN BESPAREN

Web Designer Magazine - - Programmeer Eersteklas Javascript -

Het is al­tijd goed om de laat­ste ont­wik­ke­lin­gen op het ge­bied van Javascript bij te hou­den. Er wor­den con­ti­nu be­lang­rij­ke, tijd­be­spa­ren­de fea­tu­res aan de spe­ci­fi­ca­tie toe­ge­voegd. Met co­de­transpi­lers zo­als Ba­bel kun je die fea­tu­res met­een ge­brui­ken, je hoeft dus niet na te den­ken over browserondersteuning.

Ar­row-func­ties zijn een mooie ma­nier om ou­de­re co­de te stroom­lij­nen. Ze zijn zeer ge­schikt voor klei­ne, ano­nie­me func­ties en flexibel ge­noeg om in al­le si­tu­a­ties te wer­ken. Er kun­nen as­sump­ties ge­daan wor­den over het aan­tal pa­ra­me­ters en re­turn­waar­den om boi­ler­pla­te-co­de te re­du­ce­ren. Ook be­staat ‘this’, waar­mee je de waar­de van ‘this’ uit de om­rin­gen­de con­text haalt in plaats van er een te cre­ë­ren, dus bin­ding is dan niet no­dig.

var num­bers = [1,2,3]; var dou­b­led = num­bers.map(num­ber => num­ber * 2); con­so­le.log(dou­b­led); //[2, 4, 6]

ES2015 heeft het con­cept van pro­mi­ses, een re­vo­lu­tie voor de ma­nier waar­op asyn­chro­ne Javascript wordt ge­schre­ven. Func­tie-call­backs kun­nen uit de pas gaan lo­pen als er meer­de­re func­ties te­ge­lijk wor­den af­ge­werkt. Met pro­mi­ses wor­den die meer li­ne­air en mak­ke­lij­ker te le­zen. Ze re­pre­sen­te­ren een ‘pen­ding’ waar­de die op een la­ter mo­ment kan aan­ko­men (‘re­sol­ven’). Ze kun­nen als re­gu­lie­re waar­den van func­ties ko­men, waar­door an­de­re co­de de­ze kan op­pik­ken en er­op re­a­ge­ren. Een he­le­boel nieu­we brow­ser-api’s ge­brui­ken pro­mi­ses, dus die kun je maar be­ter le­ren ken­nen.

var pro­mi­se = new Pro­mi­se(func­ti­on(re­sol­ve, re­ject) { set­ti­me­out(() => re­sol­ve(true), 1000); }); pro­mi­se.then(va­lue => con­so­le.log(va­lue)); //true, af­ter 1s

Tem­pla­te-li­te­rals zijn strings waar­bin­nen je be­re­ke­nin­gen mag doen. In plaats van strings te moe­ten com­bi­ne­ren met Ja­vascripts-va­lu­es, ge­brui­ken tem­pla­te-li­te­rals een back­tick-no­ta­tie (ac­cent gra­ve). Die kun­nen pla­ce­hol­ders be­vat­ten met klei­ne ex­pres­sies die ge­ë­va­lu­eerd moe­ten wor­den als de string wordt ge­le­zen. Als je een bi­bli­o­theek zo­als Hand­le­bars voor

tem­pla­ting ge­bruikt, dan kan die als ge­schik­te ver­van­ging die­nen en de groot­te en af­han­ke­lijk­he­den van je pro­ject re­du­ce­ren.

var per­son = { na­me: “Matt”, role: “front-end developer” } con­so­le.log(`this is ${per­son.na­me}. He is a ${per­son.role}`); // ”This is Matt. He is a front-end developer” De Es2015-spe­ci­fi­ca­tie heeft ge­zorgd voor een eigen im­ple­men­ta­tie van mo­du­les bin­nen Javascript. Ex­ter­ne par­tij­en heb­ben hun eigen mo­du­le­sys­te­men al een tijd lang be­heerd, maar voor de voor­uit­gang is het een goed idee het plat­form daar waar mo­ge­lijk te ge­brui­ken. Die mo­du­les wer­ken op een­zelf­de ma­nier als van de be­staan­de sys­te­men. Het ‘ex­port’-key­word kan de func­ties en va­lu­es de­fi­ni­ë­ren die je wilt dat je mo­du­le on­der­steunt, en ‘im­port’ kan an­de­re mo­du­les spe­ci­fi­ce­ren waar­mee je die wilt ge­brui­ken.

// dou­bler.js ex­port func­ti­on dou­ble(va­lue) { re­turn va­lue * 2; } // fi­le.js im­port dou­ble from “dou­bler”; con­so­le. log(dou­ble(3)); // 6

Es2015-mo­du­les zul­len uit­ein­de­lijk stan­daard on­der­steund gaan wor­den door brow­sers, maar zo ver is het nog niet. Op dit mo­ment moe­ten ze eerst ge­com­pi­leerd wor­den bin­nen be­staan­de mo­du­le­for­ma­ten, maar met de adop­tie van HTTP/2 is het voor­uit­zicht voor na­ti­ve mo­du­le im­por­ting roos­kleu­rig.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.