AMD EN COM­MONJS

MODULESTANDAARDEN DIE JE KUNT GE­BRUI­KEN

Web Designer Magazine - - Programmeer Eersteklas Javascript -

Als je al eens ge­pro­beerd hebt om modulair met Javascript te wer­ken, dan heb je vast wel eens van AMD of Com­monjs ge­hoord. Dat zijn al een tijd­je de te ge­brui­ken for­ma­ten voor mo­du­lai­re co­de en het im­por­te­ren van de­pen­den­cies.

AMD en Com­monjs heb­ben wel grotendeels het­zelf­de doel, maar ver­schil­len in benadering. De ver­schil­len zor­gen er­voor dat ze be­ter ge­schikt zijn voor be­paal­de sce­na­rio’s.

AMD staat voor Asyn­chro­nous Mo­du­le De­fi­ni­ti­on, waar­mee de­vel­o­pers, zo­als de naam al doet ver­moe­den, mo­du­les kun­nen de­fi­ni­ë­ren en ge­brui­ken op het mo­ment dat ze no­dig zijn. Dat is een groot voordeel voor de front-end, want dan wor­den klei­ne­re be­stan­den ge­down­load, die al­leen be­vat­ten wat er op dat mo­ment no­dig is.

Een mo­du­le wordt ge­maakt met de­fi­ne(). De aan­roep be­vat een lijst van an­de­re mo­du­les om de af­han­ke­lijk­he­den op te los­sen en een func­tie die aan­ge­roe­pen wordt als die de­pen­den­cies ge­la­den wor­den. Om an­de­re mo­du­les die zelf niet ge­ëx­por­teerd hoe­ven te wor­den voor­waar­de­lijk te im­por­te­ren, kun je ook re­qui­re() ge­brui­ken.

de­fi­ne( ‘my­mo­du­le’, [‘mo­du­lea’, ‘mo­du­leb’], func­ti­on(mo­du­lea, mo­du­leb) { var my­mo­du­le = { ge­tall­na­mes: func­ti­on() { re­turn mo­du­lea.get­na­mes().con­cat(mo­du­leb. get­na­mes()); } }; re­turn my­mo­du­le; } );

Com­monjs is een for­maat dat meer ge­schikt is om ser­ver­si­de te ge­brui­ken. In te­gen­stel­ling tot bij AMD wor­den de mo­du­les syn­chroon ge­la­den. Dat maakt het mak­ke­lij­ker te le­zen, maar gaat wel ten kos­te van de snel­heid en is niet zo ge­schikt voor client­si­de. Mo­du­les wor­den ge­deeld door het mo­du­le.ex­ports ob­ject. Al­les wat in dat ob­ject zit, is dan toe­gan­ke­lijk als een an­de­re mo­du­le re­qui­re() aan­roept en het aan een interne va­ri­a­be­le toe­kent. Om­dat al­les syn­chroon ge­hou­den wordt, wor­den mo­du­les al­leen ge­la­den als ze no­dig zijn.

var mo­du­lea = re­qui­re(“./mo­du­lea”); var mo­du­leb = re­qui­re(“./mo­du­leb”); mo­du­le.ex­ports.ge­tall­na­mes = func­ti­on() { re­turn mo­du­lea.get­na­mes().con­cat(mo­du­leb. get­na­mes()); }

Om­dat Es2015-mo­du­les ze in de toe­komst kun­nen ver­van­gen, is het be­lang­rijk te we­ten hoe die sys­te­men wer­ken om­dat een aan­tal be­staan­de mo­du­les die for­mats nog steeds zul­len ge­brui­ken. Met tools zo­als Web­pack en Brow­se­ri­fy kun je die tools blij­ven ge­brui­ken als de voor­keu­ren ver­an­de­ren.

AMD EN COM­MONJS HEB­BEN WEL GROTENDEELS HET­ZELF­DE DOEL, MAAR VER­SCHIL­LEN IN BENADERING

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.