Szybki trening JavaScript

Moduły w JavaScript

Moduły JavaScript: Przygotowanie

                
                    <!DOCTYPE html>
                    <head>
                        <meta charset="utf-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <title>Szybki trening</title>
                        <meta name="viewport" content="width=device-width, initial-scale=1">
                        <script type="module" src="/module-first.js"   ></script>
                        <script type="module" src="/main.js" ></script>
                    </head>
                    <body>
                
                    </body>
                
            

                
                    // Plik module-first.js
                    export let followme = "On Twitter";
                
            
                
                    // Plik main.js
                    import {followme} from '/module-first.js';
                    console.log(followme);
                
            

Moduły 1

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let followme = "On Twitter";
                
            
                
                    // Plik main.js
                    import {followme} from '/module-first.js';
                    console.log(followme);
                
            

Moduły 1

💡 Co pojawi się w konsoli ?

                
                    On Twitter
                
            
                
                    // Plik module-first.js
                    export let followme = "On Twitter";
                    export let worstGameEver = "Last of us 2";
                    export let bestGameEver = "Silent Hill 2";
                
            
                
                    // Plik main.js
                    import {worstGameEver,bestGameEver} 
                    from '/module-first.js';

                    console.log(`Najgorsza gra ${worstGameEver}
                    , Najlepsza gra ${bestGameEver}`);
                
            

Moduły 2

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let followme = "On Twitter";
                    export let worstGameEver = "Last of us 2";
                    export let bestGameEver = "Silent Hill 2";
                
            
                
                    // Plik main.js
                    import {worstGameEver,bestGameEver} 
                    from '/module-first.js';

                    console.log(`Najgorsza gra ${worstGameEver}
                    , Najlepsza gra ${bestGameEver}`);
                
            

Moduły 2

💡 Co pojawi się w konsoli ?

                
            Najgorsza gra Last of us 2, 
            Najlepsza gra Silent Hill 2
            
            
                
                    // Plik module-first.js
                    export let followme = "On Twitter";
                    export let worstGameEver = "Last of us 2";
                    export let bestGameEver = "Silent Hill 2";
                
            
                
                    // Plik main.js
                    import {worstGameEver as bad, bestGameEver as good} 
                    from '/module-first.js';

                    console.log(`Najgorsza gra ${bad},
                     Najlepsza gra ${good}`);
                
            

Moduły 3

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let followme = "On Twitter";
                    export let worstGameEver = "Last of us 2";
                    export let bestGameEver = "Silent Hill 2";
                
            
                
                    // Plik main.js
                    import {worstGameEver as bad, bestGameEver as good} 
                    from '/module-first.js';

                    console.log(`Najgorsza gra ${bad},
                     Najlepsza gra ${good}`);
                
            

Moduły 3

💡 Co pojawi się w konsoli ?

                
            Najgorsza gra Last of us 2, 
            Najlepsza gra Silent Hill 2
            
            
                
                    // Plik module-first.js
                    export let worstGameEver = "Last of US 2";
                    console.log('jesteśmy w module-first.js');
                
            
                
                    // Plik main.js
                    console.log('zaczynamy w main.js');
                    import {worstGameEver} from '/module-first.js';
                    console.log('koniec w main.js');
                
            

Moduły 4

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let worstGameEver = "Last of US 2";
                    console.log('jesteśmy w module-first.js');
                
            
                
                    // Plik main.js
                    console.log('zaczynamy w main.js');
                    import {worstGameEver} from '/module-first.js';
                    console.log('koniec w main.js');
                
            

Moduły 4

💡 Co pojawi się w konsoli ?

                
                    jesteśmy w module-first.js
                    zaczynamy w main.js
                    koniec w main.js
            
            
                
                    // Plik module-first.js
                    export let worstGameEver = "Last of us 2";
                    let game = "Settlers";
                    export default game;
                
            
                
                    // Plik main.js
                    import value from '/module-first.js';
                    console.log(value);
                
            

Moduły 5

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let worstGameEver = "Last of us 2";
                    let game = "Settlers";
                    export default game;
                
            
                
                    // Plik main.js
                    import value from '/module-first.js';
                    console.log(value);
                
            

Moduły 5

💡 Co pojawi się w konsoli ?

                
                    Settlers
            
            
                
                    // Plik module-first.js
                    export let worstGameEver = "Last of us 2";
                    let game = "Settlers";
                    export default game;
                
            
                
                    // Plik main.js
                    import {default as game} from '/module-first.js';
                    console.log(game);
                
            

Moduły 6

💡 Co pojawi się w konsoli ?

                
                    Settlers
            
            
                
                    // Plik module-first.js
                    let worstGameEver = "Last of US 2";
                    let game = "Settlers";
                    export {worstGameEver,game}
                
            
                
                    // Plik main.js
                    import value from '/module-first.js';
                    console.log(value);
                
            

Moduły 6

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    let worstGameEver = "Last of US 2";
                    let game = "Settlers";
                    export {worstGameEver,game}
                
            
                
                    // Plik main.js
                    import value from '/module-first.js';
                    console.log(value);
                
            

Moduły 6

💡 Co pojawi się w konsoli ?

                
                    undefined
            
            
                
                    // Plik module-first.js
                    let worstGameEver = "Last of US 2";
                    let game = "Settlers";
                    export {worstGameEver,game}
                
            
                
                    // Plik main.js
                    import * as values from '/module-first.js';
                    console.log(values);
                
            

Moduły 7

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    let worstGameEver = "Last of US 2";
                    let game = "Settlers";
                    export {worstGameEver,game}
                
            
                
                    // Plik main.js
                    import * as values from '/module-first.js';
                    console.log(values);
                
            

Moduły 7

💡 Co pojawi się w konsoli ?

                
                    Module {Symbol(Symbol.toStringTag): "Module"}
                    game: "Settlers"
                    worstGameEver: "Last of US 2"
            
            

Export

                
                    // Plik module-first.js
                    export let worstGameEver = "Last of US 2";
                
            
                
                    // Plik main.js
                    import {worstGameEver} from '/module-first.js';
                    
                    worstGameEver = "E.T";
                    console.log(worstGameEver);
                
            

Export 1

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let worstGameEver = "Last of US 2";
                
            
                
                    // Plik main.js
                    import {worstGameEver} from '/module-first.js';
                    
                    worstGameEver = "E.T";
                    console.log(worstGameEver);
                
            

Export 1

💡 Co pojawi się w konsoli ?

                
                    Runtime Error
            
            
                
                    // Plik module-first.js
                    export let worstGameEver = {
                        name : 'Last of US 2'
                    };
                    
                    export function showGame() {
                        console.log(worstGameEver.name);
                    }
                
            
                
                    // Plik main.js
                    import {worstGameEver, showGame} from '/module-first.js';
                    
                    worstGameEver.name = "E.T";
                    showGame();
                    console.log(worstGameEver.name);
                
            

Export 3

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export let worstGameEver = {
                        name : 'Last of US 2'
                    };
                    
                    export function showGame() {
                        console.log(worstGameEver.name);
                    }
                
            
                
                    // Plik main.js
                    import {worstGameEver, showGame} from '/module-first.js';
                    
                    worstGameEver.name = "E.T";
                    showGame();
                    console.log(worstGameEver.name);
                
            

Export 3

💡 Co pojawi się w konsoli ?

                
                    E.T
                    E.T
            
            
                
                    // Plik module-first.js
                    export function showGame() {
                        console.log('orginał');
                    }
                    export function updateShowGame() {
                        showGame = function(){
                            console.log('coś nowego');
                        };
                    }
                
            
                
                    // Plik main.js
                    import {updateShowGame, showGame} from '/module-first.js';
                    
                    showGame();
                    updateShowGame();
                    showGame();;
                
            

Export 3

💡 Co pojawi się w konsoli ?

                
                    // Plik module-first.js
                    export function showGame() {
                        console.log('orginał');
                    }
                    export function updateShowGame() {
                        showGame = function(){
                            console.log('coś nowego');
                        };
                    }
                
            
                
                    // Plik main.js
                    import {updateShowGame, showGame} from '/module-first.js';
                    
                    showGame();
                    updateShowGame();
                    showGame();;
                
            

Export 3

💡 Co pojawi się w konsoli ?

                
                    orginał
                    coś nowego