|
| 1 | +<a name="14_ESModulesAndStructuringLargerApps"></a> |
| 2 | + |
| 3 | +# **Module #14 - ES Modules and structuring Larger Apps** |
| 4 | + |
| 5 | +<br> |
| 6 | +<a name="Modules"></a> |
| 7 | + |
| 8 | +## **Modules** |
| 9 | + |
| 10 | +Modules are a way to structure and organize Javascript to share functionality and data across multiple files and/or projects. |
| 11 | + |
| 12 | +Characteristics: |
| 13 | + |
| 14 | +- Modules have their own scope, we don't need to worry about global variables. |
| 15 | + > NOTE: variables that you create inside a module it will be available only in that file, nowhere else |
| 16 | +- Modules can hold anything (functionality, data, config, etc). |
| 17 | + |
| 18 | +Supposing that we have the following structure: |
| 19 | + |
| 20 | + |
| 21 | + |
| 22 | +we can load each javascript file in the body like: |
| 23 | + |
| 24 | +```HTML |
| 25 | +<body> |
| 26 | + <script src="./utils.js"></script> |
| 27 | + <script src="./handlers.js"></script> |
| 28 | + <script src="./script.js"></script> |
| 29 | +</body> |
| 30 | +``` |
| 31 | + |
| 32 | +but instead of doing that, we can use modules and use the script.js as our entry point and share data, functionality etc with modules by adding the attribute type and set to module: |
| 33 | + |
| 34 | +```HTML |
| 35 | +<body> |
| 36 | + <script src="./script.js" type="module"></script> |
| 37 | +</body> |
| 38 | +``` |
| 39 | + |
| 40 | +if we need to use a function that is our `utils.js` we can imported into our `script.js` |
| 41 | + |
| 42 | +there are two types to export files |
| 43 | + |
| 44 | +- **named exports:** they have the `export` word in front of the variable declaration/function definition or when they exported there will be curly brackets. |
| 45 | + You can have as many named exports as you want. |
| 46 | + |
| 47 | +  |
| 48 | + |
| 49 | +- **default exports:** you can have only one per module, you can exports default as follow |
| 50 | + |
| 51 | +  |
| 52 | + |
| 53 | +there are two types to export files |
| 54 | + |
| 55 | +- **named imports:** you need to use the word `import` then in curly brackets the named exports and the path when you want to import, in this case `util.js` |
| 56 | + |
| 57 | +  |
| 58 | + |
| 59 | +- **default imports:** |
| 60 | + |
| 61 | +  |
| 62 | + |
| 63 | +you can rename the import as you wanted, for example the `returnHi` function to `sayHi` |
| 64 | + |
| 65 | + |
| 66 | + |
| 67 | +### **Documentation:** |
| 68 | + |
| 69 | +[modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) |
| 70 | +[imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) |
| 71 | +[exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) |
| 72 | + |
| 73 | +<br> |
| 74 | + |
| 75 | +--- |
| 76 | + |
| 77 | +back to [Table of Content](tableOfContent.md) |
| 78 | +previous [Ajax and fetching data](13_AjaxAndFetchingData) |
| 79 | +next [Final round exercises](15_FinalRoundExercises.md) |
0 commit comments