diff options
author | Petru Dimitriu <dimitriupetru@gmail.com> | 2016-02-15 20:32:50 +0200 |
---|---|---|
committer | Petru Dimitriu <dimitriupetru@gmail.com> | 2016-02-15 20:32:50 +0200 |
commit | 3bfea3740c865d07879d56b698b075dc43342184 (patch) | |
tree | ebc3c861b23bbe62a859a33ee81ec54eaf7febaa /nl-nl/amd-nl.html.markdown | |
parent | 528a761ca68b5d30fac6aed9686104a483467be6 (diff) | |
parent | 712c9f342ff054039bd8e93a43be6ea0846ebc83 (diff) |
Merge remote-tracking branch 'upstream/master'
Diffstat (limited to 'nl-nl/amd-nl.html.markdown')
-rw-r--r-- | nl-nl/amd-nl.html.markdown | 235 |
1 files changed, 0 insertions, 235 deletions
diff --git a/nl-nl/amd-nl.html.markdown b/nl-nl/amd-nl.html.markdown deleted file mode 100644 index d5e0022a..00000000 --- a/nl-nl/amd-nl.html.markdown +++ /dev/null @@ -1,235 +0,0 @@ ---- -category: tool -tool: amd -contributors: - - ["Frederik Ring", "https://github.com/m90"] -translators: - - ["Reinoud Kruithof", "https://github.com/reinoudk"] -filename: learnamd-nl.js -lang: nl-nl ---- - -## Aan de slag met AMD - -De **Asynchronous Module Definition** API specificeert een mechanisme om JavaScript - modules the definiëren zodat de module en dependencies (afhankelijkheden) asynchroon - geladen kunnen worden. Dit is vooral erg geschikt voor de browseromgeving, waar het - synchroon laden van modules zorgt voor problemen qua prestatie, gebruiksvriendelijkheid, - debugging en cross-domain toegangsproblemen. - -### Basis concept -```javascript -// De basis AMD API bestaat uit niks meer dan twee methodes: `define` en `require` -// and gaat vooral over de definitie en gebruik van modules: -// `define(id?, dependencies?, factory)` definieert een module -// `require(dependencies, callback)` importeert een set van dependencies en -// gebruikt ze in de gegeven callback - -// Laten we starten met het gebruiken van define om een nieuwe module (met naam) -// te creëeren, welke geen dependencies heeft. Dit doen we door een naam -// en een zogeheten factory functie door te geven aan define: -define('awesomeAMD', function(){ - var isAMDAwesome = function(){ - return true; - }; - // De return waarde van een module's factory functie is - // wat andere modules of require calls ontvangen wanneer - // ze onze `awesomeAMD` module requiren. - // De geëxporteerde waarde kan van alles zijn: (constructor) functies, - // objecten, primitives, zelfs undefined (hoewel dat niet veel nut heeft). - return isAMDAwesome; -}); - - -// We gaan nu een andere module defineren die afhankelijk is van onze -// `awesomeAMD` module. Merk hierbij op dat er nu een extra functieargument -// is die de dependencies van onze module defineert: -define('schreewlelijk', ['awesomeAMD'], function(awesomeAMD){ - // dependencies worden naar de factory's functieargumenten - // gestuurd in de volgorde waarin ze gespecificeert zijn - var vertelIedereen = function(){ - if (awesomeAMD()){ - alert('Dit is zOoOo cool!'); - } else { - alert('Vrij saai, niet?'); - } - }; - return vertelIedereen; -}); - -// Nu we weten hoe we define moeten gebruiken, kunnen we require gebruiken -// om ons programma mee te starten. De vorm van `require` is -// `(arrayVanDependencies, callback)`. -require(['schreeuwlelijk'], function(schreewlelijk){ - schreeuwlelijk(); -}); - -// Om deze tutorial code uit te laten voeren, gaan we hier een vrij basic -// (niet-asynchrone) versie van AMD implementeren: -function define(naam, deps, factory){ - // merk op hoe modules zonder dependencies worden afgehandeld - define[naam] = require(factory ? deps : [], factory || deps); -} - -function require(deps, callback){ - var args = []; - // we halen eerst alle dependecies op die nodig zijn - // om require aan te roepen - for (var i = 0; i < deps.length; i++){ - args[i] = define[deps[i]]; - } - // voldoe aan alle dependencies van de callback - return callback.apply(null, args); -} -// je kan deze code hier in actie zien (Engels): http://jsfiddle.net/qap949pd/ -``` - -### require.js in de echte wereld - -In contrast met het voorbeeld uit de introductie, implementeert `require.js` - (de meest populaire AMD library) de **A** in **AMD**. Dit maakt het mogelijk - om je modules en hun dependencies asynchroon in the laden via XHR: - -```javascript -/* file: app/main.js */ -require(['modules/someClass'], function(SomeClass){ - // de callback word uitgesteld tot de dependency geladen is - var things = new SomeClass(); -}); -console.log('Dus, hier wachten we!'); // dit wordt als eerste uitgevoerd -``` - -De afspraak is dat je over het algemeen één module in één bestand opslaat. -`require.js` kan module-namen achterhalen gebaseerd op de bestandslocatie, -dus je hoeft je module geen naam te geven. Je kan simpelweg aan ze referen - door hun locatie te gebruiken. -In het voorbeeld nemen we aan dat `someClass` aanwezig is in de `modules` map, - relatief ten opzichte van de `baseUrl` uit je configuratie. - -* app/ - * main.js - * modules/ - * someClass.js - * someHelpers.js - * ... - * daos/ - * things.js - * ... - -Dit betekent dat we `someClass` kunnen defineren zonder een module-id te specificeren: - -```javascript -/* file: app/modules/someClass.js */ -define(['daos/things', 'modules/someHelpers'], function(thingsDao, helpers){ - // definitie van de module gebeurt, natuurlijk, ook asynchroon - function SomeClass(){ - this.method = function(){/**/}; - // ... - } - return SomeClass; -}); -``` -Gebruik `requirejs.config(configObj)` om het gedrag van de standaard mapping - aan te passen in je `main.js`: - -```javascript -/* file: main.js */ -requirejs.config({ - baseUrl : 'app', - paths : { - // je kan ook modules uit andere locatie inladen - jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min', - coolLibUitBower : '../bower_components/cool-lib/coollib' - } -}); -require(['jquery', 'coolLibUitBower', 'modules/someHelpers'], function($, coolLib, helpers){ - // een `main` bestand moet require minstens eenmaal aanroepen, - // anders zal er geen code uitgevoerd worden - coolLib.doFancyDingenMet(helpers.transform($('#foo'))); -}); -``` -Op `require.js` gebaseerde apps hebben vaak een enkel beginpunt (`main.js`) - welke toegevoegd wordt aan de `require.js` script tag als een data-attribuut. -Deze zal automisch geladen en uitgevoerd worden als de pagina laadt: - -```html -<!DOCTYPE html> -<html> -<head> - <title>Honder script tags? Nooi meer!</title> -</head> -<body> - <script src="require.js" data-main="app/main"></script> -</body> -</html> -``` - -### Een heel project optimaliseren met r.js - -Veel mensen geven er de voorkeur aan om AMD te gebruiken tijdens de - ontwikkelfase om code op een gezonde manier te organiseren maar - willen nog steeds een enkel scriptbestand gebruiken in productie in - plaats van honderderen XHR verzoeken uit te voeren als de pagina laadt. - -`require.js` wordt geleverd met een script genaamd `r.js` (die je waarschijnlijk -uitvoert in node.js, hoewel Rhino ook ondersteund wordt) welke de -dependency book van je project analyseert en een enkel bestand bouwt met daarin -al je module (juist genaamd), geminificeerd en klaar voor productie. - -Instaleren met `npm`: -```shell -$ npm install requirejs -g -``` - -Nu kun je het een configuratiebestand voeden: -```shell -$ r.js -o app.build.js -``` - -Voor ons bovenstaande voorbeeld zou de configuratie er zo uit kunnen zien: -```javascript -/* file : app.build.js */ -({ - name : 'main', // naam van het beginpunt - out : 'main-built.js', // naam van het bestand waar de output naar geschreven wordt - baseUrl : 'app', - paths : { - // `empty:` verteld r.js dat dee nog steeds geladen moet worden van de CDN, - // gebruik makend van de locatie gespecificeert in `main.js` - jquery : 'empty:', - coolLibUitBower : '../bower_components/cool-lib/coollib' - } -}) -``` -Verwissel simpelweg `data-main` om het gebouwde bestand te gebruiken in productie: -```html -<script src="require.js" data-main="app/main-built"></script> -``` - -Een erg gedetaileerd [overzicht van bouwopties](https://github.com/jrburke/r.js/blob/master/build/example.build.js) is -beschikbar in de GitHub repo (Engels). - -Hieronder vind je nog meer informatie over AMD (Engels). - -### Onderwerpen die niet aan bod zijn gekomen -* [Loader plugins / transforms](http://requirejs.org/docs/plugins.html) -* [CommonJS style loading and exporting](http://requirejs.org/docs/commonjs.html) -* [Advanced configuration](http://requirejs.org/docs/api.html#config) -* [Shim configuration (loading non-AMD modules)](http://requirejs.org/docs/api.html#config-shim) -* [CSS loading and optimizing with require.js](http://requirejs.org/docs/optimization.html#onecss) -* [Using almond.js for builds](https://github.com/jrburke/almond) - -### Verder lezen: - -* [Official Spec](https://github.com/amdjs/amdjs-api/wiki/AMD) -* [Why AMD?](http://requirejs.org/docs/whyamd.html) -* [Universal Module Definition](https://github.com/umdjs/umd) - -### Implementaties: - -* [require.js](http://requirejs.org) -* [dojo toolkit](http://dojotoolkit.org/documentation/tutorials/1.9/modules/) -* [cujo.js](http://cujojs.com/) -* [curl.js](https://github.com/cujojs/curl) -* [lsjs](https://github.com/zazl/lsjs) -* [mmd](https://github.com/alexlawrence/mmd) |