Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

JavaScript-Codestil mit cleveren Techniken verbessern

    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.

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

Finde einen Job, den du liebst zum Thema TYPO3, PHP

7 Reaktionen
MArcJ
MArcJ

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

Gene Form
Gene Form

@Wayner:

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

Antworten

Thomas
Thomas

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

Wayner
Wayner

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

Jan
Jan

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

geeky
geeky

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

marc.tissler
marc.tissler

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen