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:43] – 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 8: Line 25:
 </code> </code>
  
-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 ''/assets/js/require-config.js' +''/assets/js/require-config.js''
  
-<code js>+<code javascript>
 require.config({ require.config({
  urlArgs : "bust=" + (new Date()).getTime(), // Cache Buster beim Entwickeln, dass immer die neuste Datei geladen wird  urlArgs : "bust=" + (new Date()).getTime(), // Cache Buster beim Entwickeln, dass immer die neuste Datei geladen wird
-  +  paths: { 
-   // Definieren von vorgegebenen Libraries + // Definieren von vorgegebenen Libraries 
-   paths   : { + 'jquery'       : 'vendor/jquery', 
-        'TAFFY'        : 'vendor/taffy.min', + 'jquery-clndr' : 'vendor/jquery.clndr.min', 
-        'mustache'     : 'vendor/mustache.min', + 'uikit'        : 'vendor/uikit.min', 
-    }+ 'uikit-icons'  : 'vendor/uikit-icons.min', 
 + 'TAFFY'        : 'vendor/taffy.min', 
 + 'moment'       : 'vendor/moment-with-locales', 
 +  'mustache'     : 'vendor/mustache.min', 
 + }, 
 + // Macht einen Wrapper um Plugins, und man kann sagen welches Sub-Library welche anderen Bibliotheken braucht 
 + shim: { 
 + 'jquery-clndr' : ['jquery'], 
 + 'uikit-icons'  : ['uikit'], 
 + }
 }); });
- 
  
 requirejs( ['main'] ); // Lädt das Haupt-Script requirejs( ['main'] ); // Lädt das Haupt-Script
 +</code>
 +
 +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:
 +
 +<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       = require( 'jquery' );
 + const uikit        = require( 'uikit' );
 + const uikit_icons  = require( 'uikit-icons' );
 +
 +
 + /*
 + E I G E N E   S C R I P T S
 + */
 +
 +
 + /* === Init ratioResizer === */
 + const ratioResizer   = require( 'brandgrad/ratioResizer' ); // Modul Laden
 + const youtubeResize  = new ratioResizer( 'iframe[src^="https://www.youtube.com"]', 16, 9 ); // Modul Starten
 +})
 +</code>
 +
 +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''
 +
 +<code javascript>
 +define( function( require ){
 +
 + //const jQuery       = require( 'jquery' );
 + //const Mustache     = require( 'mustache' );
 +
 + return function( selector, ratio_width, ration_height ){
 +
 + /*
 + 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, 16, 9 );
 +
 +
 +
 + /*
 + E V E N T S
 + */
 + var delay;
 + window.addEventListener( 'resize', function(){
 + clearTimeout( delay );
 +    timer = setTimeout( function ( event ) {
 + resize_nodes( youtube_embeds, 16, 9 );
 + }, delay_timer );
 + } )
 +
 +
 +
 + /*
 + M E T H O D S
 + */
 + function resize_nodes( node_list, ratio_width, ration_height ){
 + for(let index = 0; index < youtube_embeds.length; index++) {
 + resize_node( node_list[index], ratio_width, ration_height );
 + }
 + }
 +
 + function resize_node( node, ratio_width, ration_height ){
 + node.style.width    = '100%';
 + node.style.maxWidth = '100%';
 +
 + let current_width = node.offsetWidth;
 + let new_height    = ( current_width / ratio_width ) * ration_height;
 +
 + node.style.height = new_height + 'px';
 + }
 +
 + return {}
 + }
 +})
 </code> </code>
programmieren/javascript/requirejs.1566337419.txt.gz · Last modified: 2022/12/17 12:28 (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