Please enable JavaScript.

Coggle requires JavaScript to display documents.

11: ECMAScript Native Modules - Coggle Diagram

- - - - is private to that module
        
        by default
      - doesn't contaminate the global namespace
  - - - makes something publicly available
      - forms of export declarations
        
        named export
        
        export features declared elsewhere
        
        usually at end of file
        
        export { yellName, formatName };
        
        export individual features
        
        can export var, let, const, function, class
        
        as they are created
        
        export const yellName = function (name) { return upperCaseName(name) +'!'; };
        
        default export
        
        export features declared elsewhere as default
        
        export { yellName as default };
        
        eqiuvalent to
        
        export default yellName;
        
        export individual feature as default
        
        export default const yellName = function (name) { return upperCaseName(name) +'!'; };
    - - to use something from another module
      - forms of import declarations
        
        named import
        
        import { yellName, formatName } from "./utilities.js";
        
        default import
        
        import myVariableName from "./utilities.js";
        
        you can call it what you like
    - - the containing files must be interpreted by the runtime
        
        as a module
      - in HTML
        
        this is done by
        
        adding type="module"
        
        to the <script> tag
        
        <script src="utilities.js" type="module"></script>
- - - - when html file is loaded
        
        and a <script> tag is encountered
        
        the javascript is
        
        loaded
        
        and run
        
        if necessary
    - - the loading is done when the import is hit
      - eg
        
        import myVariableName from "./utilities.js";
        
        this is when utilities.js would be loaded (and run)
    - - for a file
      - it will only be loaded
        
        for the first import
  - - - this represents the Window object
  - - - is an attribute on the script tag
      - the script will be executed
        
        after the document has been parsed
        
        but before the DOM is populated
      - it will start loading the script
        
        but will continue parsing the HTML
- - - - import and export
    - - into a single file
    - - during deployment :warning:
      - you still have separate files in your codebase
  - - - to your html
    - - <head> ... <script type="module" src="js/stringUtils.js"></script> <script type="module" src="js/domUtils.js"></script> <script type="module" src="js/generalUtils.js"></script> <script type="module" src="js/main.js"></script> </head>
      - with
        
        <head> ... <script src="js/bundle.js"></script> </head>