User Tools

Site Tools

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
programmieren:javascript:requirejs [2019/08/20 21:52] – jgehrkeprogrammieren:javascript:requirejs [2022/12/17 12:28] (current) – external edit 127.0.0.1
Line 3: Line 3:
 Hier das Basic Script wie man require.js klever integriert. Hier das Basic Script wie man require.js klever integriert.
  
 +===== Reihenfolge der Dateien =====
 +
 +Wie require.js Files lädt:
 +  - die require.js
 +  - danach die angegeben config.js
 +  - dann die main.js oder app.js aus der config.js
 +  - dann alle Module wie sie aufgerufen werden per ''require( '../..' )''
 +
 +**Ein Hinweis:** 
 +
 +Man kann einzelne Libraries mit //require('path/to/dein_modul');// angeben, aber sauberer, sicherer & stabiler ist, auch bei einzelnen Bilbiotheken immer den Paramter als array zu übergeben: ''require( ['path/to/dein_modul'] );''
 +
 +===== Code Beispiel der einzelnen Datein =====
 +
 +Hier Drei Schritte als Code Beispiele um: zu implementieren, konfigurieren & ein eigenes Modul zu schreiben
 +
 +==== Beispiel um require.js einfach zu implementieren ====
 in den ''<head>'' Teil des HTML schreibt man: in den ''<head>'' Teil des HTML schreibt man:
 <code html> <code html>
Line 37: Line 54:
 Der hier gezeigte Vendor-Folder muss im gleichen Verzeichnis wie die config-file liegen, sprich: //assets/js/vendor/...// Der hier gezeigte Vendor-Folder muss im gleichen Verzeichnis wie die config-file liegen, sprich: //assets/js/vendor/...//
  
 +==== Beispiel für eine main.js File ====
 Am Ende des vorherigen Scripts wird die main.js im //assets/js/...// Folder geladen, diese kann so aussehen: Am Ende des vorherigen Scripts wird die main.js im //assets/js/...// Folder geladen, diese kann so aussehen:
  
Line 59: Line 77:
  const ratioResizer   = require( 'brandgrad/ratioResizer' ); // Modul Laden  const ratioResizer   = require( 'brandgrad/ratioResizer' ); // Modul Laden
  const youtubeResize  = new ratioResizer( 'iframe[src^="https://www.youtube.com"]', 16, 9 ); // Modul Starten  const youtubeResize  = new ratioResizer( 'iframe[src^="https://www.youtube.com"]', 16, 9 ); // Modul Starten
- 
 }) })
 </code> </code>
  
-Das ist die //main.js// File oder auch //app.js// File. Am Ende wird ein Modul/eine Klasse geladen und gestartet. Auch diese muss in entsprechenden Folder liegen:+Das ist die //main.js// File oder auch //app.js// File. Am Ende wird ein Modul/eine Klasse geladen und gestartet.  
 + 
 +==== Beispiel um Module mit IF-Bedingungen laden zu lassen ==== 
 + 
 +Dieser Code sollte Teil der main.js File. Require.js lädt sonst immer alle Scripte. Das funktioniert nur mit diesem Syntax! 
 + 
 +<code javascript> 
 + const page_has_kalender = document.querySelector( '#KalenderEvents' ); 
 + 
 + if( page_has_kalender ){ 
 + require( ['meine-module/kalender'], function ( kalendarModule ) { 
 + // ... Code falls man mit dem Modul was machen will 
 + }); 
 + } 
 +</code> 
 + 
 +==== Beispiel für ein Modul ==== 
 + 
 +Auch diese muss in entsprechenden Folder liegen:
  
 ''assets/js/brandgrad/ratioResizer.js'' ''assets/js/brandgrad/ratioResizer.js''
programmieren/javascript/requirejs.1566337975.txt.gz · Last modified: (external edit)
CC Attribution-Share Alike 4.0 International Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International

Page Tools