summaryrefslogtreecommitdiffhomepage
path: root/nl-nl/amd-nl.html.markdown
diff options
context:
space:
mode:
Diffstat (limited to 'nl-nl/amd-nl.html.markdown')
-rw-r--r--nl-nl/amd-nl.html.markdown235
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)