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:43] – 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 8: | Line 25: | ||
</ | </ | ||
- | Der Code lädt require.js und startet die configuration. | + | Der Code lädt require.js und startet die configuration, diese sollte dann so ungefähr aussehen: |
- | Basis ''/ | + | ''/ |
<code javascript> | <code javascript> | ||
require.config({ | require.config({ | ||
urlArgs : " | urlArgs : " | ||
- | + | | |
- | | + | // Definieren von vorgegebenen Libraries |
- | paths : { | + | ' |
- | ' | + | ' |
- | ' | + | ' |
- | } | + | ' |
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | }, | ||
+ | // Macht einen Wrapper um Plugins, und man kann sagen welches Sub-Library welche anderen Bibliotheken braucht | ||
+ | shim: { | ||
+ | ' | ||
+ | ' | ||
+ | } | ||
}); | }); | ||
- | |||
requirejs( [' | requirejs( [' | ||
+ | </ | ||
+ | |||
+ | 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 // | ||
+ | |||
+ | <code javascript> | ||
+ | define( function( require ){ | ||
+ | |||
+ | /* | ||
+ | R E Q U I R E D S C R I P T S | ||
+ | Die immer geladen werden sollen | ||
+ | */ | ||
+ | const jQuery | ||
+ | const uikit = require( ' | ||
+ | const uikit_icons | ||
+ | |||
+ | |||
+ | /* | ||
+ | E I G E N E S C R I P T S | ||
+ | */ | ||
+ | |||
+ | |||
+ | /* === Init ratioResizer === */ | ||
+ | const ratioResizer | ||
+ | const youtubeResize | ||
+ | }) | ||
+ | </ | ||
+ | |||
+ | 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: | ||
+ | |||
+ | '' | ||
+ | |||
+ | <code javascript> | ||
+ | define( function( require ){ | ||
+ | |||
+ | //const jQuery | ||
+ | //const Mustache | ||
+ | |||
+ | return function( selector, ratio_width, | ||
+ | |||
+ | /* | ||
+ | S E T T I N G S | ||
+ | */ | ||
+ | let delay_timer = 500; // Window Event soll nur alle 0.5s abgefuert werden (performance) | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | N O D E S | ||
+ | */ | ||
+ | let youtube_embeds = document.querySelectorAll( selector ); | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | I N I T | ||
+ | */ | ||
+ | resize_nodes( youtube_embeds, | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | E V E N T S | ||
+ | */ | ||
+ | var delay; | ||
+ | window.addEventListener( ' | ||
+ | clearTimeout( delay ); | ||
+ | timer = setTimeout( function ( event ) { | ||
+ | resize_nodes( youtube_embeds, | ||
+ | }, delay_timer ); | ||
+ | } ) | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | M E T H O D S | ||
+ | */ | ||
+ | function resize_nodes( node_list, ratio_width, | ||
+ | for(let index = 0; index < youtube_embeds.length; | ||
+ | resize_node( node_list[index], | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function resize_node( node, ratio_width, | ||
+ | node.style.width | ||
+ | node.style.maxWidth = ' | ||
+ | |||
+ | let current_width = node.offsetWidth; | ||
+ | let new_height | ||
+ | |||
+ | node.style.height = new_height + ' | ||
+ | } | ||
+ | |||
+ | return {} | ||
+ | } | ||
+ | }) | ||
</ | </ |