require

8 years ago · 381de0c51c
parent 8316758818
commit 381de0c51c
1 changed files with 56 additions and 0 deletions
--- a/modular_js/require.md
+++ b/modular_js/require.md
@ -0,0 +1,56 @@
+# RequireJS
+
+## Installation
+
+Download from [the download page](http://requirejs.org/docs/download.html).
+
+## Set up
+
+`index.html:`
+
+```html
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <script data-main="js/main.js" src="js/require.js"></script>
+    </head>
+    <body>
+
+    </body>
+</html>
+```
+
+This loads require.js and tells it to load `js/main.js`:
+
+```javascript
+requirejs(['js/footer.js'], function(footer) {
+    console.log(footer);
+});
+```
+
+This says to run the code inside the function, once `js/footer.js` has loaded.  The exported value of `js/footer.js` will be passed into the function as the variable `footer`.  Let's create `js/footer.js`:
+
+```javascript
+define(['js/sizes.js'], function(sizes){
+    return {
+        height:sizes.small,
+        width:sizes.medium
+    }
+});
+```
+
+The first parameter defines any dependencies that must load before this file runs.  Whatever gets returned in the function that is passed into `define()` as the second param, will be what that file "exports" to files that include it.  In this case, that object becomes `footer` in `js/main.js`.
+
+Finally, let's define `js/sizes.js`:
+
+```javascript
+define(function(){
+    return {
+        small: 100,
+        medium: 200,
+        large: 300
+    }
+})
+```
+
+This file has no dependencies