Vorheriger Artikel Nächster Artikel

JavaScript-Codestil mit cleveren Techniken verbessern

Viele Wege führen nach Rom. Einige sind länger, andere kürzer. Beim ist das nicht anders. Mit einigen Kniffen und unter Zuhilfenahme von regulären Ausrücken, lassen sich viele JavaScript-Schleifen viel eleganter und deutlich kürzer fassen.

JavaScript-Codestil mit cleveren Techniken verbessern

Im Entwickler-Alltag muss es oft schnell gehen. Doch vieles, was schnell geschrieben ist, kann auch schnell zu unübersichtlichem und unnötig aufgeblähtem Code führen. Mit diesen Tipps und etwas Verständnis von regulären Ausdrücken, codet ihr nicht nur schnell, sondern auch elegant und effizient.

Lange Bedingungen

Manchmal ist es nötig, viele verschiedene Bedingungen gleichzeitig zu überprüfen.

if (val == 'a' || val == 'b' || val == 'c')

Diese Abfrage könnte mit einem regulären Ausdruck deutlich kürzer gefasst werden:

if (/a|b|c/.test(val))

Ein anderer Fall wäre, wenn man mehrere Variablen mit dem logischen UND verknüpfen möchte:

if (a == 1 && b == 2 && c == 3 && d == 4 && e == 5)

Wenn man die Werte von zwei Arrays vergleichen möchte, kann man die JavaScript-Methode every benutzen, die eine Überprüfungsfunktion für jedes einzelne Element des Arrays aufruft.

var a=1,b=2,c=3,d=4,e=5,
vars = [a,b,c,d,e],
vals = [1,2,3,4,5];
if (vals.every(function(val,i){ return vars[i] == val }))

Das könnte man zusätzlich in eine Funktion auslagern und wiederverwenden:

function isTrue(vars, vals) {
	return vals.every(function(val,i){ 
		return vars[i] == val 
	});
}
if (isTrue([a,b,c,d,e], [1,2,3,4,5]))

Für das logische ODER kann statt der every Methode die some Methode zum Einsatz kommen, die, sofern eine der Bedingungen zutrifft, ein true oder im gegensätzlichen Fall ein false zurückgibt und somit die untenstehende Abfrage ersetzen kann.

if (a == 1 && b == 2 || c == 3 && d == 4 || e == 5 && f == 6)

Text-Manipulation

Die Bordmittel zur Textmanipulation sind im Vergleich zu anderen Programmiersprachen bei stark eingeschränkt. In unserem Szenario haben wir einen durch Punkte getrennten String, bei dem wir die Anfangsbuchstaben eines jeden Satzes groß ausgeben möchten. Diese Aufgabe könnte man mit einer Schleife und String-Methoden lösen:

var str = 'roses are red. violets are blue.';
var para = str.split('.'),
i = 0, len = para.length, p;
for (; i < len; i++) {
	p = para[i].trim();
	para[i] = p.substr(0,1).toUpperCase() + p.substr(1, p.length);
}
para = para.join('. ').trim();
console.log(para);

Das ist eigentlich eine akzeptable Lösung. Ein eleganterer und bei komplexeren Anwendungsszenarien besserer Ansatz ist aber der Einsatz von regulären Ausdrücken:

str = str.replace(/([^.]+\.\s?)/g, function(_, para) {
	return para.replace(/^\w/, function(first) {
		return first.toUpperCase();
	});
});
console.log(str);

Text-Fragmente extrahieren

Wir wollen Telefonnummern aus einem Text extrahieren. Die Telefonnummern haben ein vorangestelltes „tel:“, sodass wir ohne Probleme Telefonnummern von irrelevanten Zahlen in dem String unterscheidnen können. Auch das kann man mit regulären Ausdrücken und beispielsweise der match-Methode lösen.

var str = 'Keanu, 24 Jahre, tel: 0201-123-1234. Jenny, 18 Jahre, tel:0201-123-2345.';
var numbers = str.match(/tel:\s?([\d-]+)/g);
console.log(numbers); 

Die Ausgabe dürfte aber nicht zufriedenstellend sein, da wir das Präfix „tel:“ immer noch im Ausgabe-Array enthalten. Man könnte das Ergebnis noch mal durch eine Schleife jagen und das Präfix entfernen. Das kann man aber noch eleganter lösen.

Die replace-Methode akzeptiert eine Funktion, in der die Ergebnisse des regulären Ausdrucks überprüft werden können. In dieser Funktion können wir dann die Nummern in einem neuen Array verfügbar machen.

var numbers = [];
str.replace(/tel:\s?([\d\-]+)/g, function(result_string,number,position,complete_string) {
	numbers.push(number);
});
console.log(numbers); 

Wir könnten das Ganze sogar als eine neue Methode verfügbar machen.

String.prototype.gmatch = function(regex) {
	var result = [];
	this.replace(regex, function() {
		var matches = [].slice.call(arguments, 1).slice(0,-2);
	result.push.apply(result, matches);
	});
	return result;
};
console.log(str.gmatch(/tel:\s?([\d\-]+)/g));

HTML generieren

Ein typischer Einsatz von JavaScript ist das Manipulieren und Erzeugen von HTML-Elementen. Wenn man beispielsweise eine Tabelle anlegen wollen würde, könnte man es mit der folgenden Schleife lösen:

var values = ['one', 'two', 'three', 'four', 'five'];
var html = '';
for (var i = 0; i < values.length; i++) {
	html += '<td>'+ values[i] +'</td>';
}
console.log(html);

Auch diesen Code können wir besser gestalten, indem wir die join und map Methoden benutzen. Die map-Methode ruft für jedes Element eines Arrays eine definierte Rückruf-Funktion auf und gibt ein Array zurück, das die Ergebnisse enthält. Mit join und einem Leer-String als Parameter wird das Array dann zu einem einzigen String zusammengeführt und kann entsprechend ausgegeben werden.

var html = values.map(function(text, i) {
	return '<td>'+ text +': '+ i +'</td>'
}).join('');
console.log(html);

Das sieht schon ganz gut aus. Sollte unser Vorhaben aber etwas komplexer werden, führt es irgendwann dazu, dass viele Schleifen mit zerstückelten HTML-Inhalten auf uns zukommen. Und das ist schwer zu lesen, schwer zu warten und höchstens als Notlösung zu betrachten.

Die bessere Alternative sind Templates. Es gibt viele Lösungen für Client Side Templates mit JavaScript, der nachfolgende Code kann und soll sie nicht ersetzen. Aber mit dem bisher erworbenen Wissen können wir ein Hilfs-Skript für die Verarbeitung von Templates produzieren.

function template(arr, html) {
	return arr.map(function(obj) {
		return html.join('').replace(/#\{(\w+)\}/g,function(_, match) { 
			return obj[match];
		}
	);}).join('');
}
var people = [
	{ name: 'Keanu', alter: 25, status: 'Single' },
	{ name: 'Bill', alter: 23, status: 'Verheiratet' },
	{ name: 'Mika', alter: 17, status: 'Single' }
];
var html = template(people, [
'<div>',
'<h1>Name: #{name}</h1>',
'<h2>Age: #{alter}, Status: #{status}</h2>',
'</div>'
]);
console.log(html);

Mit diesem Helfer kann der Inhalt nun schnell und strukturiert vorbereitet und erzeugt werden.

Weiterführende Links

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
7 Antworten
  1. von marc.tissler am 08.03.2013 (13:37Uhr)

    gibt es denn irgendwelche benchmarks die belegen das reguläre ausrücke immer schneller sind als logische verknpüfungen? der code mag ja leserlicher sein, aber die behauotung das er schneller ist hätte ich gerne belegt.

    zum HTML teil muss ich auch sagen das ich niemanden kenne der so HTML generiert, sauberer geht es über Node erstellung, bzw. libs wie mootools, jQuery etc. pp.
    Sollte mir mal jemand nen code block vor den latz knallen in dem steht var html = 'Moin' zieh ich dem persönlich eine drüber ;)

    Antworten Teilen
  2. von geeky am 08.03.2013 (16:42Uhr)

    Ich finde regexp sieht in der Regel zwar schöner/eleganter aus,
    Aber verständlicher eher nicht, da schreib ichs lieber ordentlich geklammert aus.

    Antworten Teilen
  3. von Jan am 09.03.2013 (21:42Uhr)

    Man sollte m.E. auf die Quelle hinweisen von der ein Großteil des verwendeten Codes kopiert wurde.
    http://www.onextrapixel.com/2013/02/21/improve-your-code-with-smart-javascript-techniques-and-patterns/

    Antworten Teilen
  4. von Wayner am 10.03.2013 (23:56Uhr)

    Der Regexp für die abc-Prüfung ist lustig irgendwo abgeschrieben, leider aber falsch.

    var val='dbr';
    if (/a|b|c/.test(val)) { alert('match'); }


    so wäre besser
    if (/^(?:a|b|c)$/.test(val)) {

    Antworten Teilen
  5. von Thomas am 11.03.2013 (22:41Uhr)

    Fakt ist doch das der Code durch regex kein bischen leserlicher wird. Ordentlich strukturiertes Ausschreiben dürfte sich m.E. immer in erhöhter Lesbarkeit und geringerem Wartungsaufwand niederschlagen und damit letztlich effizienter und kostengünstiger sein.

    Antworten Teilen
  6. von Gene Form am 14.03.2013 (12:00Uhr)

    @Wayner:

    Oder so /^[abc]$/.test(val)

    Antworten Teilen
  7. von MArcJ am 14.03.2013 (21:17Uhr)

    Die schnellste Variante mit (fast) der Langsamstem auszutauschen, nur Aufgrund von Leserlichkeit, ist in meinen Augen nicht so cool.

    http://jsperf.com/slice-vs-substr-vs-substring-vs-split-vs-regexp/2

    Sollte zumindest erwähnt werden.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webentwicklung
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code

Du bist Anfänger und setzt keine oder kaum Coding-Conventions ein? Dann solltest du diesen Artikel lesen, denn darin lest ihr wie ihr die Qualität eures JavaScript-Codes verbessern könnt: mit … » weiterlesen

t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und … » weiterlesen

Hilfe aus Googles Werkstatt: Das Web Starter Kit hilft dir, plattformübergreifend zu entwickeln
Hilfe aus Googles Werkstatt: Das Web Starter Kit hilft dir, plattformübergreifend zu entwickeln

Mit dem Web Starter Kit hat Google ein Boilerplate für responsive Web-Apps vorgestellt. Der Konzern packt damit seine eigenen Empfehlungen für Entwickler in Code und liefert hilfreiche Tools, um … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen