Ankündigung

Einklappen
Keine Ankündigung bisher.

Javascript Import / Export : Verstehe das Konzept nicht!

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Javascript Import / Export : Verstehe das Konzept nicht!

    Man kann ja mit sowas

    Code:
    export function myFunction () {//bla}
    und

    Code:
    import myFunction from 'app.js';
    einzelne Funktionen, Werte etc. in seinen Code importieren, was ich akuell in einem Übungsprojekt mache.

    Jetzt habe ich mich gefragt, wie ich sowas am besten verwende, wobei man dann automatisch zur Frage kommt, wozu sowas gut sein soll.
    Und da bin ich mir nicht so sicher.....

    1) Kann man damit Traffic einsparen? Anscheinend nicht.
    2) Kann man damit den Arbeitsspeicher schonen? Hm, habe hierzu nichts gefunden.
    3) Ich habe diesen Artikel gelesen https://www.robinwieruch.de/javascript-import-export

    Dort heisst es z. B.
    The import and export statements in JavaScript help you to share code across multiple files.
    und
    They help you to organize your code, to maintain it, and to design reusable module APIs
    Es geht also um Verteilung, Ordnung, Wartbarkeit und Struktur?!

    Also ich tippe mir in einem Projekt so ca. 2500 Zeilen (nicht minified) Javascript Code zusammen.
    Jetzt könnte ich anfangen, den Code in einzelne Dateien zu verteilen und dann je nach Sachlage, irgendwelche Funktionen aus den einzelnen Dateien importieren.

    Ich könnte aber auch den Importansatz lassen und je nach Sachlage, einfach die einzelne (kleinere) Datei klassisch einbinden.

    Und da ich es eher als mühselig empfinde, den Verteilungsaufwand zu betreiben und aus einer Datei, die ich so wie so lade, dann einzeln etwas zu importieren,
    könnte ich meine 2500 Zeilen (80KB) auch einfach in einer Datei lassen. Die wäre dann sogar an einer Stelle durchsuchbar vs. ich habe eine selbsterklärende Verteilungsstruktur
    und finde mich so zurecht.

    Also kann mir mal jemand sagen, wie, wo, warum ich diese Modultechnik so richtig vorteilverschaffend einsetze.
    [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

  • #2
    Wie machst du es denn in PHP, schreibst du dort auch alles in eine große Datei?
    Im Grunde geht es dabei darum internen Code und externen Code zu trennen und ein einheitliches Interface nach Außen hin zu schaffen.

    Kommentar


    • #3
      Wie machst du es denn in PHP, schreibst du dort auch alles in eine große Datei?
      Gute Frage.

      Ich verteile meinen Code schon auf verschiedene Dateien (Klassen) und binde die oft mit einem Autoloader ein.

      Aber, mal angenommen, ich habe - jetzt mal schnell, frei erfunden - eine Datei math.js,, die verschiedene Kalkuklationsfunktionen hat.

      Wieso sollte ich jetzt "sagen"
      Code:
       import leastSquares from 'math.js';
      statt

      Code:
      <script defer type="text/javascript" src="math.js"></script>
      In der ersten Variante muss ich zusätzlich die export Deklarationen machen?!
      [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

      Kommentar


      • #4
        Beim PHP Autoloader wird ja ein Datei erst dann eingebunden wenn du die gerade bruachst, also wenn du ein new gechrieben hast erst dann wird der autoloader getriggered.

        Früher hattest du erst in deine includes.php oder so die Datei explizit includet. Dadurch hast du eventuell auf einigen Seiten sachen eingbunden die du nicht brauchst.
        Das selbe problem hast du jetzt auf JS Seite.

        dein Script wo bindest du das ein? Überall? Oder willst du pro Seite explizit mal deinen Script importieren

        dann hast du übersehen dass mit einem import ein ganzer Ordner eingebunden werden kann und nicht nur eine Datei und dsa problem an den normalen script ist dass die Funktionen in der math.js dann global definiert werden und du dann evenutell bugs dadurch kriegen kannst. bei import und export musst du explizit angeben was soll nun exportiert werden. du kannst somit intern funktionsnamen verwenden und musst dir keine Sorgen machen dass diese dann überschrieben werden von außen und das was nach außen zur verfügung stehen soll das exportierst du eben.

        Es geht also nicht nur um den autoloader
        apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

        Kommentar


        • #5
          BlackScorp : Moin Vitali, vielen Dank für Deine Antwort und an dieser Stelle auch mal Lob und Dank für Deine Videoreihe, die mir sehr gefällt.

          Es geht, glaube ich, so wie so nicht um den Autoloader, den die import / export Techniken laden ja nichts automatisch, oder?

          Besonders interessant finde ich Deine Hinweise bzgl. "ganze Ordner einbinden" und den Namenskollisionen.

          Ich habe mal schnell nach "javascript import directory" gegoogelt und erst mal nichts Übersichtliches gefunden, dass erklärt, wie man mit reinem ES6 einen Ordner importiert. Hast Du da einen Tipp für mich?

          Namenskollisionen sind für mich als Einzelkämpfer sehr, sehr selten, daher übersehe ich wohl immer wieder das Problem bzw. das etwas eine Lösung dafür darstellt.

          Irgendwie habe ich aber den Verdacht, dass das reine Import / Export nicht alles ist. Es scheint, als müsse man, um es sinnvoll einzusetzen, einen erweiterten / anderen Programmieransatz wählen.

          Ich habe tatsächlich bis heute orientiert am Benutzerkontext entweder eine oder zwei Javascript Dateien eingebunden. Also

          1) Ist ein normaler User eingeloggt, dann "normal.js"
          2) Ist ein Admin eingeloggt, dann zusätzlich "admin.js"

          Darüber hinaus evtl. die eine oder andere externe Library, die ich je nach Seite einbinde. Also z. B. chart.js nur da, wo auch Charts gebraucht werden.

          Um die Imports jetzt "dynamisch" zu nutzen, habe ich mir folgende Klasse geschrieben:

          PHP-Code:
          namespace pages;
             class 
          JS_IMPORT {
                 private 
          $map = [
                  
          998 => [
                      [
                      
          'from' => './js/mod_main.js',
                      
          'methods' => 'pw_reset,onResetPWdone'  // comma seperated list
                      
          ]
                   ],
                  
          999 => [
                      [
                      
          'from' => './js/mod_main.js',
                      
          'methods' => 'onRequestPwEmailDone'  // comma seperated list
                      
          ]
                   ]
                 ];

                 public function 
          get_import_statement($page_id) {
                       
          $imports '';
                       if (isset(
          $this->map[$page_id])) {
                           
          $node $this->map[$page_id];
                              foreach (
          $node as $import) {
                                  
          $imports .= "import {".$import['methods']."} from '".$import['from']."'; \n";
                              }
                       }
                 return 
          $imports;
                 }
             } 
          Aber irgendwie meine ich, müsste sich der sinnvolle Einsatz doch auch ohne serverseitiges Vorsortieren realisieren lassen, oder?!

          [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

          Kommentar


          • #6
            schau mal

            index.php

            PHP-Code:
            <!DOCTYPE html>
            <
            html lang="de" class="no-js">
            <
            head>
                <
            meta charset="UTF-8">
                <
            title>Utilities</title>
                <
            link rel="stylesheet" href="styles.css"/>
            </
            head>
            <
            body>
            <
            div class="button" data-confirm="Bist du sicher?   "Bestätige</div>
            <
            div class="hide-js">Verstecke bei aktivierten </div>

            <
            div class="button" data-toggle=".toggled-content">
                
            Toggle content
            </div>
            <
            span class="toggled-content">
            Zeige und verstecke beim klicken
            </span>

            <
            div class="button show-hide" data-hide=".hide-me" data-show=".show-me" >Show</div>
            <
            a href="test.php" class="button show-hide" data-hide=".hide-me" data-show=".show-me" >Show</a>
            <
            label>
                <
            input type="radio" class="show-hide" data-bubble="true" data-show=".show-me" data-hide=".hide-me" name="show-hide"Show
            </label>
            <
            label>
                <
            input type="radio" class="show-hide" data-bubble="true" data-show=".hide-me" data-hide=".show-me" name="show-hide"Reset
            </label>
            <
            label>
                <
            input type="radio" class="show-hide"  data-show=".hide-me" data-hide=".show-me" name="show-hide"Reset
            </label>
            <
            div class="show-me" style="display: none">Zeige mich beim klicken
            </div>

            <
            div class="hide-me">Verstecke mich beim klicken</div>


            <
            script src="main.js" type="module"></script>
            </body>
            </html> 
            ich binde damit ganz unten die main.js ein, achte drauf dass e sals modul markiert wurde

            main.js
            PHP-Code:
            import {utilitiesfrom "./utilities/main.js";

            document.addEventListener("DOMContentLoaded",utilities); 
            das definiert den alias utitlities welches sihc aus utitlties/main.js beziehen soll

            so sieht utiltiites/main.js aus

            PHP-Code:
            import {showHidefrom "./show-hide.js";
            import {togglefrom "./toggle.js";
            import {confirmfrom "./confirm.js";

            export function utilities(event){

                    
            let htmlRoot document.querySelector('html');
                    
            htmlRoot.classList.add('js');
                    
            htmlRoot.classList.remove('no-js');

                    
            let body document.querySelector('body');

                    
            body.addEventListener('click', function (event) {

                        
            let bubble event.target.getAttribute('data-bubble');
                        if (!
            Boolean(bubble)) {
                            
            event.preventDefault();
                        }
                        if (
            event.target.getAttribute('data-confirm')) {
                            
            let customEvent = new CustomEvent('confirm'event);
                            return 
            event.target.dispatchEvent(customEvent);
                        }
                        if (
            event.target.getAttribute('data-toggle')) {
                            
            let customEvent = new CustomEvent('toggle'event);
                            return 
            event.target.dispatchEvent(customEvent);
                        }
                        if (
            event.target.classList.contains('show-hide')) {
                            
            let customEvent = new CustomEvent('show-hide'event);
                            return 
            event.target.dispatchEvent(customEvent);
                        }
                        return 
            event;
                    }, 
            true);


                    
            body.addEventListener('confirm',confirm,true);

                    
            body.addEventListener('toggle',toggletrue);

                    
            body.addEventListener('show-hide'showHidetrue);


            /utitlties/confirm.js
            PHP-Code:
            export function confirm(event) {
                
            let confirmMessage event.target.getAttribute('data-confirm');
                return 
            confirm(confirmMessage);

            /utilitites/show-hide.js

            PHP-Code:
            export function showHide(event){
                
            let showSelector event.target.getAttribute('data-show');
                
            let hideSelector event.target.getAttribute('data-hide');

                if (
            showSelector) {
                    for (
            let showElement of document.querySelectorAll(showSelector)) {

                        
            let originalDisplay event.target.getAttribute('data-original-display');
                        if (!
            originalDisplay) {
                            
            originalDisplay 'block';
                        }
                        
            showElement.style.display originalDisplay;
                    }
                }
                if (
            hideSelector) {
                    for (
            let hideElement of document.querySelectorAll(hideSelector)) {
                        
            hideElement.style.display 'none';
                    }
                }
                return 
            event;

            die wiederum importiert die nächsten funktionen. und du musst halt nicht mehr phpseitig irgendwie denken ob und wie du irgendwas includest.

            Allerdings wird da alles nachgeladen, da wird nicht geschaut ob die FUnktion benutzt wird oder nicht.
            apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

            Kommentar


            • #7
              BlackScorp : Vielen Dank, das muss ich mal in Ruhe lesen. Sieht auf dem ersten Blick nach ziemlich viel Inline-Auszeichnung aus und in Bezug auf die Module nach einem umfangreichen Organisationsaufwand.

              Custom Events habe ich nie genutzt, finde ich aber jetzt gerade mal interessant als nächstes Lernthema.

              Und eins habe ich direkt gelernt: Ich wusste gar nicht, dass bei einem Radio-Input im Label das "for"-Attribut des Labels entfallen kann.
              [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

              Kommentar


              • #8
                wieso Organisationsaufwand? Das ist ja das tolle dass du in der JS Datei bestimmen kannst woher deine JS Funktionen geladen werden. In PHP Storm zum Beispiel kannst du einfach die Funktion oder variable aus anderen Dateien verwenden und PHP Storm baut dir automatishc den import statement ein.

                Sprich du erstellst ein JS script und defnierst via export welche Variblen/Funktionen nach außen gelangen dürfen und php storm listet die auf und bei der benutzung kriegst automatisch ein import statement. PHP Seitig musst du halt nichts machen. ein Mla deine "App" eingebunden und fertig bist du. da drin kannst du alles programmieren
                apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

                Kommentar


                • #9
                  wieso Organisationsaufwand?
                  das muss ich mal in Ruhe lesen...auf dem ersten Blick
                  Mal sehen, wenn ich da mehr durchblicke, sehe ich das vlt. anders.
                  [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                  Kommentar


                  • #10
                    Zitat von drsoong Beitrag anzeigen
                    Jetzt habe ich mich gefragt, wie ich sowas am besten verwende, wobei man dann automatisch zur Frage kommt, wozu sowas gut sein soll.
                    Das kannst du dir wie Namespaces in PHP vorstellen. Statt "use foo/bar;" schreibst du ebend "import bar from foo;" (Nur als Beispiel! Das haut so nicht 1:1 hin.) Wofür Namespace genutzt werden ist klar? Import/export ist dasselbe in grün nur ein ganzes Stück flexibler.




                    Kommentar

                    Lädt...
                    X