This is an old revision of the document!

Nützliche Require.js Scripte

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:

<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 Bedingungen zu lasen

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

Sidebar

Lesezeichen

Programmieren

Webserver

Table of Contents

Nützliche Require.js Scripte

Reihenfolge der Dateien

Code Beispiel der einzelnen Datein

Beispiel um require.js einfach zu implementieren

Beispiel für eine main.js File

Beispiel um Module mit Bedingungen zu lasen

Beispiel für ein Modul

User Tools

Site Tools

Sidebar

Lesezeichen

Programmieren

Webserver

Table of Contents

Nützliche Require.js Scripte

Reihenfolge der Dateien

Code Beispiel der einzelnen Datein

Beispiel um require.js einfach zu implementieren

Beispiel für eine main.js File

Beispiel um Module mit Bedingungen zu lasen

Beispiel für ein Modul

Page Tools