Code-Organisation in JavaScript

Größe: px

Ab Seite anzeigen:

Download "Code-Organisation in JavaScript"

Viktor Stein
vor 8 Jahren
Abrufe

1 Code-Organisation in JavaScript Webworker-Stammtisch NRW 10. Januar 2013 Frederic Hemberger

2 Codekapselung What happens in Vegas, stays in Vegas.

3 Warum sollte man Code kapseln? Wir haben immer mehr Scripte auf unseren Webseiten: JavaScript-Frameworks Plug-ins Banner, Adwords, Affiliate-Scripts Social Media Plug-ins Webtracking 3/24

4 Warum sollte man Code kapseln? Lass nicht überall dein Zeug rumliegen! Jaaa, Mama. //script1.js function dostuff(){ console.log("i do stuff");} //script2.js function dostuff(){ console.log("ha, I don't!");} dostuff(); 4/24

5 Codekapselung (function(){ //Mein Code })(); 5/24

6 Codekapselung Immediately Invoked Function Expression (IIFE) //Function ( function(){ //Mein Code })(); //Expression ( function(){ //Mein Code }(); ) // Unmittelbare Ausführung (function(){ //Mein Code }) () ; 6/24

7 Modularisierung

8 Codekapselung und Sichtbarkeit Definierte Variablen und Methoden nach außen sichtbar machen: (function(exports) { var privatevar = "foo"; var exports.publicvar = "bar"; exports.myfunction = function() { console.log("hello global namespace!"); } })(window); console.log(privatevar); // => ReferenceError: privatevar is not defined console.log(publicvar); // => "bar" myfunction(); // => "Hello global namespace!" 8/24

myfunction = function() { console.log("hello global namespace!"); } })(window); console.

9 Codekapselung und Sichtbarkeit Warum exports? (function(exports){ exports.myfunction = function(){ console.log("helloglobalnamespace!"); } })( ); Der globale Namespace kann sich beliebig ändern: Browser: window Node.js: exports Applikation: z.b. myapp Der gekapselte Code selbst muss nicht mehr angepasst werden. Hinweis: "public" und "export" sind reservierte Wörter in JavaScript, daher "exports" 9/24

"); } })( ); Der globale Namespace kann sich beliebig ändern: Browser: window Node.

10 Module Pattern var myapp =(function(exports){ exports.myfunction = function(){ console.log("helloglobalnamespace!"); } return exports; })(myapp {}); Vorteile: Zentraler Namespace nach außen (myapp) Codekapselung und Sichtbarkeit (wie bei der IIFE) Code kann so über mehrere Dateien verteilt werden Addy Osmani: Learning JavaScript Design Patterns 10/24

"); } return exports; })(myapp {}); Vorteile: Zentraler Namespace nach außen (myapp)

11 Enge und lose Kopplung Wer bin ich, und wenn ja, wie viele?

12 Enge Kopplung modul2.jskann Methoden aus modul1.jsaufrufen: //modul2.js myapp.functionfrommodule1(); solange modul2.jsvon der Existenz von modul1.jsweiß und beide in der richtigen Reihenfolge eingebunden sind.  <script src="modul1.js"></script> <script src="modul2.js"></script> HTML 12/24

jsweiß und beide in der richtigen Reihenfolge eingebunden sind. <!--index.

13 Enge Kopplung Was bei enger Kopplung beachtet werden muss: Welches Modul verwendet welche anderen Module? In welcher Reihenfolge müssen die Module geladen werden? Was ist, wenn ich weitere Module hinzufügen möchte oder andere weglassen/austauschen? 13/24

In welcher Reihenfolge müssen die Module geladen werden?

14 Kommunikation über Events Publish-Subscribe-Prinzip (PubSub)

15 Kommunikation über Events Publish-Subscribe-Prinzip (PubSub) Kommunikation erfolgt asynchron über Events Funktioniert analog zu Events im DOM (z.b. click) Module müssen nicht voneinander wissen Module interagieren nicht direkt miteinander Einfach erweiterbar 15/24

16 Kommunikation über Events Publish-Subscribe-Prinzip (PubSub) $.subscribe('myevent', function(event, param1, param2){ console.log('mein Event wurde ausgelöst:',param1,param2); }); //Entspricht$(document).on( ) $.publish('myevent',['ersterwert','zweiterwert']); //Entspricht$(document).trigger( ) Beispiel mit jquery Tiny Pub/Sub : 16/24

log('mein Event wurde ausgelöst:',param1,param2); }); //Entspricht$(document).on( ) $.

17 Beispiel Darstellung auf einer Shop-Seite //shoppingcart.js $.subscribe('quantity:change', function(event, article, quantity){ redrawshoppingcart(article,quantity); }); //article-overview.js $.subscribe('quantity:change', function(event, article, quantity){ checkfordiscount(article,quantity); }); //order-familypack.js $.publish('quantity:change',['product1',5]); 17/24

redrawshoppingcart(article,quantity); }); //article-overview.js $.

18 Abhängigkeiten definieren Modul-Standards in JavaScript

19 Abhängigkeiten definieren Modul-Standards in JavaScript CommonJS meist serverseitig (z.b. in Node.js): module = require('modulename'); Asyncronous Module Definition (AMD) clientseitig, z.b. mit Require.js (requirejs.org) künftig: native Unterstützung (ECMAScript 6) 19/24

js): module = require('modulename'); Asyncronous Module Definition

20 AMD-Module mit Require.js Lädt Module per Ajax (Asyncronous Module Definition) Verwaltet die Abhängigkeiten untereinander Kann auch Modul-Assets laden (z.b. Templates, CSS) Kann Module für Produktivbetrieb kompilieren (Auflösung von Abhängigkeiten, Zusammenfassen & Minifizieren) 20/24

Abhängigkeiten untereinander Kann auch Modul-Assets laden (z.b.

21 AMD-Module mit Require.js  <script src="require.js" data-main="app.js"></script> HTML //app.js require(['lib/jquery','modul1'], function($, modul1){ $(function(){ modul1.myfunction(); } }); 21/24

22 AMD-Module mit Require.js Abhängigkeiten innerhalb von Modulen //modul1.js define(function(){ return{ myfunction: function(){ console.log('hello Require.js!'); } } }); define(['modul2','include/modul3'], function(module2, module3){ // }); 22/24

23 Deployment? Grunt. ;-)

24 <Thank You!> www frederic-hemberger.de

Ähnliche Dokumente

Webseiten sind keine Gemälde. Webstandards für ein besseres Web. Webstandards für ein besseres Web

Webseiten sind keine Gemälde. Webstandards für ein besseres Web. Webstandards für ein besseres Web Webseiten sind keine Gemälde Webkrauts Die Initiative für die Webkrauts ging von einem Blogeintrag im August 2005 aus. Nach dem Aufruf fanden sich innerhalb von etwa drei Tagen über 60 Interessierte zusammen.