JavaScript-Funktion mit Objekt als Argument

Mann kennst es ja aus verschiedenen jQuery-Plugins. Argumente werden als Objekt in entsprechender Notation an eine Funktion übergeben und überschreiben dabei Default-Werte. Das ist schick und hat einige Vorteile:

  • jedes Argument bekommt einen Namen und ist damit selbsterklärend
  • die Reihenfolge ist dabei vollkommen egal genauso wie, das Auslassen von Argumenten
  • sieht schick aus und ist einfach zu pflegen

Wie macht man das nun für eigene framework-unabhängige Funktionen. Ungefähr so:

var welcome = function(options) {
	// default settings
	var defaults = {
		'name'     : 'World',
		'greeting' : 'Hello'
	};
	// set options
	var o = {};
	if (typeof options !== 'undefined') {
		o = options;
	}
	for (var i in defaults) {
		if (typeof o[i] === 'undefined') {
			o[i] = defaults[i];
		}
	}
	// your function logic
	var text = o.greeting + ', ' + o.name + '!';
	console.log(text);
}

welcome({'name': 'Tommy'}); // Hello, Tommy!

welcome({
	'name': 'Tommy',
	'greeting': 'Hi'
} // Hi, Tommy! 

Ich führe hier noch eine zusätzliche Variable o ein und kopiere das options-Objekt hinein. Das braucht es normalerweise nicht. Ich finde es nur schick, wenn man sieht, was in der Funktion namentlich übergeben wird (nämlich Optionen options) und im Nachhinein kürze ich das nur zu o ab. So muss ich nicht jedes mal options ausschreiben.

Der Internet Explorer und die indexOf()-Methode

Die Methode indexOf() für das Array-Objekt ist erst seit Ende 2009 standardisiert. Bis dahin war die Methode auch noch nicht im Internet Explorer (hier IE 8) implementiert; in fast allen anderen Browsern schon. Die Methode kann man jedoch nachträglich selbst in sein Script einfügen um, die Funktionalität auch für den Internet Explorer <= 8 zu gewährleisten.

if (!Array.prototype.indexOf) {
	Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {
		"use strict";
		if (this == null) {
			throw new TypeError();
		}
		var t = Object(this);
		var len = t.length >>> 0;
		if (len === 0) {
			return -1;
		}
		var n = 0;
		if (arguments.length > 0) {
			n = Number(arguments[1]);
			if (n != n) { // shortcut for verifying if it's NaN
				n = 0;
			} else if (n != 0 && n != Infinity && n != -Infinity) {
				n = (n > 0 || -1) * Math.floor(Math.abs(n));
			}
		}
		if (n >= len) {
			return -1;
		}
		var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
		for (; k < len; k++) {
			if (k in t && t[k] === searchElement) {
				return k;
			}
		}
	return -1;
	}
}

(via)

Quick & Dirty: Shellscript »batchzip«

Für den täglichen Bedarf an wiederholenden Aufgaben schreibt man sich ja oft kleine Shellscripte. Hier hab ich ein eines, welches Dateien gleichen Namens aber unterschiedlicher Dateiendung zusammen in ein Zipfile packt.

Kann man unter anderem gut gebrauchen, wenn man Projektdateien hat. die ja oft projekt.txt, projekt.docx, projekt.psd, projekt.pdf etc. heißen.

Das Script sollte auf jedem System mit Standard-Shell und zip und rm funktionieren.

Herunterladen kann man sich das auch hier: batchzip

#!/bin/sh
#
# Name: batchzip
# Description: This script zips files with same basename (ignoring the extension).
# Author: Tommy Schmucker
# Created: 2012-05-13
# Modified: 2012-05-16
# Version: 0.3
#

usage()
{
	cat << EOF

This script zips files with same basename (ignoring the extension).

usage: $0 [-h] [-r] [-d directory]

-h Show this message
-d Input directory
-r Remove original files
EOF
}

dir=`pwd`
rm_orig=0
me=`basename $0`

zip=/usr/bin/zip
rm=/bin/rm

[ -x $zip ] || { echo "No such executable: $zip"; exit 1; }
[ -x $rm ] || { echo "No such executable: $rm"; exit 1; }

while getopts "hrd:" option; do
	case $option in
		h)
			usage
			exit 1
			;;
		r)
			rm_orig=1
			;;
		d)
			dir="$OPTARG"
			;;
		?)
			usage
			exit
			;;
	esac
done

[ -d "$dir" ] || { echo "$in_dir is not a directory, exiting"; exit 1; }
dir="${dir%/}"

for this_file in "$dir"/*; do
	basename=$(basename "$this_file")
	name=${basename%.*}
	if [ ! -h "$this_file" ] && [ "$basename" != "$me" ]; then
		$zip -j "$dir"/"$name".zip $this_file
		if [ "$rm_orig" == 1 ]; then
			$rm "$this_file"; echo "$basename removed."
		fi
	fi
done

Mit JavaScript prüfen, ob ein CSS media query ausgeführt wurde

CSS:

@media (min-width: 45em) {
	body:after {
		content: 'widescreen';
		display: none;
	}
}

JavaScript:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'widescreen') {
	// go nuts
}

(via: bricss.net)

Die genialsten Lösungen sind immer die einfachen. Auf die kommt man aber nie selbst.

Edit: Funktioniert wohl derzeit nur im Chrome/Chromium (Version 18 und 19 getestet). Siehe auch Kommentare.

Workaround Firefox/Iceweasel fontface issue

Due a very restrictiv »file uri origin«-policy Firefox/Iceweasel won’t load custom fonts.
Try to set a specific header for each font file (TTF, OTF, EOT) in your .htaccess:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

(via)

How to build an grouped archive in Textpattern

You can build an archive of blog posts/articles which is grouped by year and months with built in tags. The nested tags and HTML elements are looking really weird but it works as unordered nested list.

<txp:article_custom sort="Posted desc" limit="99999" wraptag="ul" break="" class="archive">

	<txp:variable name="year" value='<txp:if_different><txp:posted format="%Y" /></txp:if_different>' />
	<txp:variable name="month" value='<txp:if_different><txp:posted format="%B" /></txp:if_different>' />

	<txp:if_variable name="year" value=""><txp:else />
		<txp:if_first_article><txp:else />
					</ul>
				</li>
			</ul>
		</txp:if_first_article>
		<li><h2><txp:posted format="%Y" /></h2>
			<ul>
	</txp:variable>

	<txp:if_variable name="month" value=""><txp:else />
		<txp:if_variable name="year" value="">
				</ul>
			</li>
		<txp:else /></txp:if_variable>
		<li><h3><txp:posted format="%B" /></h3>
			<ul>
	</txp:variable>

	<li><txp:posted />: <txp:permlink><txp:title /></txp:permlink></li>

	<txp:if_last_article></ul></li></ul></txp:if_last_article>

</txp:article_custom>

neuere Einträge | ältere Einträge