Table of Contents

Nützliche Require.js Scripte

Hier das Basic Script wie man require.js klever integriert.

Reihenfolge der Dateien

Wie require.js Files lädt:

  1. die require.js
  2. danach die angegeben config.js
  3. dann die main.js oder app.js aus der config.js
  4. 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: 

<script data-main="/assets/js/require-config" src="/assets/js/vendor/require.js"></script>

Der Code lädt require.js und startet die configuration, diese sollte dann so ungefähr aussehen:

/assets/js/require-config.js 

require.config({
	urlArgs : "bust=" + (new Date()).getTime(), // Cache Buster beim Entwickeln, dass immer die neuste Datei geladen wird
 	paths: {
	// Definieren von vorgegebenen Libraries
		'jquery'       : 'vendor/jquery',
		'jquery-clndr' : 'vendor/jquery.clndr.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

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: 

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
})

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! 

	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
		});
	}

Beispiel für ein Modul

Auch diese muss in entsprechenden Folder liegen:

assets/js/brandgrad/ratioResizer.js 

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 {}
	}
})