JavaScript-Codestil mit cleveren Techniken verbessern

Viele Wege führen nach Rom. Einige sind länger, andere kürzer. Beim Code 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.

javaskript code1

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 JavaScript 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

via t3n News http://t3n.de/news/javascript-codestil-cleveren-448121/?utm_source=feedburner+t3n+News+12.000er&utm_medium=feed&utm_campaign=Feed%3A+aktuell%2Ffeeds%2Frss+%28t3n+News%29

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s