Einführung in RequireJS

Einführung RequireJS Legacy-Code
RequireJS im Einsatz
Andreas Wolf
SYN Systems GmbH
9. Juni 2013
RequireJS im Einsatz Andreas Wolf, SYN Systems GmbH
Inspiring people to
share

Inhalt
Einführung
RequireJS
Legacy-Code
Inspiring people to
share

$ whois referent
Andreas Wolf
aw@syn-systems.com
Jabber: awolf@jabber.ccc.de
Twitter: @andreaswo
aus Karlsruhe, Baden(-Württemberg)
TYPO3-User seit 2003
Mitglied im TYPO3-Core-Team seit März 2011
RequireJS-User seit irgendwann 2012
Inspiring people to
share

Motivation
In traditionellem JS-Code:
Abhängigkeiten verwalten ist schwer
Nachladen ist kompliziert (script-Tags manuell in DOM einhängen)
globaler Namensraum verschmutzt schnell
nur eine Version einer Bibliothek gleichzeitig ladbar
Inspiring people to
share

Was ist RequireJS?
RequireJS is a JavaScript le and module loader. It is
optimized for in-browser use, [. . . ]. Using a modular script
loader like RequireJS will improve the speed and quality of
your code.
(von requirejs.org)
Inspiring people to
share

RequireJS
implementiert AMD-Standard (Asynchronous Module De nition)
lädt Module, löst dabei Abhängigkeiten auf
kann auch Legacy-Code verwendbar machen
kommt meistens mit maximal zwei script-Tags aus
Inspiring people to
share

Einfaches Beispiel
De nieren (Library/Modulname.js):
1 define('Library/Modulname', ['dependency1', 'dependency2
'], function() {
2 // Here be dragons
3 });
Einbinden (Main.js):
1 require(['Library/Modulname'], function(Modul) {
2 // More dragons here
3 });
Inspiring people to
share

Kon guration
1 require.config({
2 paths: {
3 "flot": 'Vendor/flot/jquery.flot'
4 },
5 shim: {
6 "flot": {
7 deps: 'jquery'
8 }
9 }
10 });
Inspiring people to
share

Modulde nition
1 <head>
2 ...
3 <script type="text/javascript" src="require-config.js"
></script>
4 <script type="text/javascript" src="require-2.1.6.js"
data-main="main.js"></script>
5 </head>
Inspiring people to
share

Nutzen von Dependencies
1 require(['MeinModul', 'jquery'], function(Modul, $) {
2 $('a').click(function() {
3 alert("Link geklickt!");
4 });
5
6 Modul.meineFunktion();
7 });
Inspiring people to
share

Umgehen mit Legacy-Code
nicht jedes Modul benutzt de ne()
die Lösung: "shim"
shim ermöglicht
RequireJS kapselt Module, die in globalen Namensraum schreiben
(siehe shim[<modulname>]['exports'])
Inspiring people to
share

Fragen? Diskussion?
?RequireJS im Einsatz Andreas Wolf, SYN Systems GmbH
Inspiring people to
share

Einführung in RequireJS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Einführung in RequireJS

Ähnlich wie Einführung in RequireJS (20)

Einführung in RequireJS