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:57] – jgehrkeprogrammieren:javascript:requirejs [2022/12/17 12:28] (current) – external edit 127.0.0.1
Line 17: Line 17:
 ===== Code Beispiel der einzelnen Datein ===== ===== 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 52: Line 54:
 Der hier gezeigte Vendor-Folder muss im gleichen Verzeichnis wie die config-file liegen, sprich: //assets/js/vendor/...// 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: Am Ende des vorherigen Scripts wird die main.js im //assets/js/...// Folder geladen, diese kann so aussehen:
  
Line 74: Line 77:
  const ratioResizer   = require( 'brandgrad/ratioResizer' ); // Modul Laden  const ratioResizer   = require( 'brandgrad/ratioResizer' ); // Modul Laden
  const youtubeResize  = new ratioResizer( 'iframe[src^="https://www.youtube.com"]', 16, 9 ); // Modul Starten  const youtubeResize  = new ratioResizer( 'iframe[src^="https://www.youtube.com"]', 16, 9 ); // Modul Starten
- 
 }) })
 </code> </code>
  
-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( '#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'' ''assets/js/brandgrad/ratioResizer.js''
programmieren/javascript/requirejs.1566338226.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