This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
programmieren:javascript:requirejs [2019/08/20 21:52] – jgehrke | programmieren: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 '' | ||
+ | |||
+ | **Ein Hinweis: | ||
+ | |||
+ | Man kann einzelne Libraries mit // | ||
+ | |||
+ | ===== Code Beispiel der einzelnen Datein ===== | ||
+ | |||
+ | Hier Drei Schritte als Code Beispiele um: zu implementieren, | ||
+ | |||
+ | ==== Beispiel um require.js einfach zu implementieren ==== | ||
in den ''< | in den ''< | ||
<code html> | <code html> | ||
Line 37: | Line 54: | ||
Der hier gezeigte Vendor-Folder muss im gleichen Verzeichnis wie die config-file liegen, sprich: // | Der hier gezeigte Vendor-Folder muss im gleichen Verzeichnis wie die config-file liegen, sprich: // | ||
+ | ==== Beispiel für eine main.js File ==== | ||
Am Ende des vorherigen Scripts wird die main.js im // | Am Ende des vorherigen Scripts wird die main.js im // | ||
Line 59: | Line 77: | ||
const ratioResizer | const ratioResizer | ||
const youtubeResize | const youtubeResize | ||
- | |||
}) | }) | ||
</ | </ | ||
- | 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( '# | ||
+ | |||
+ | if( page_has_kalender ){ | ||
+ | require( [' | ||
+ | // ... Code falls man mit dem Modul was machen will | ||
+ | }); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== Beispiel für ein Modul ==== | ||
+ | |||
+ | Auch diese muss in entsprechenden Folder liegen: | ||
'' | '' |