gunnarsteinn.com

Easily cache results from Javascript functions

Gunnar Steinn — Mon, 21 Sep 2009 14:06:20 +0000

UPDATE: Adrian Quark has a much safer approach for the cache in his comment. I guess I should have tested mine better with other functions than the computational ones I was doing

A short Javascript function I made in a project to cache result from functions in Javascript. You can use this function where it makes sense to cache.

The cache method

cacheMethod.cache = {};

function cacheMethod(context, fn) {
	var funcName = fn.toString();
	funcName = funcName.substr('function '.length);
	funcName = funcName.substr(0, funcName.indexOf('('));

	context[funcName] = function() {

		if (cacheMethod.cache[funcName] == null)
			cacheMethod.cache[funcName] = {};

		// Create a unique key of parameters
		var key = Array.slice.call(arguments).join('|');
		if (cacheMethod.cache[funcName][key] == null)
			cacheMethod.cache[funcName][key] = fn.apply(this, arguments);

		return cacheMethod.cache[funcName][key];
	};
}

Usage
If we have a function like isPrime borrowed from John Resig:

function isPrime( num ) {

  var prime = num != 1; // Everything but 1 can be prime
  for ( var i = 2; i < num; i++ ) {
    if ( num % i == 0 ) {
      prime = false;
      break;
    }
  }

  return prime;
}

we can make the isPrime function cache-able with a single line of:

cacheMethod(this, isPrime);

No when we try to call the isPrime 100 times with a large prime number, this first round is calculated and all subsequent rounds use the cache. You can see the difference by removing the cacheMethod line.

for (var i=0; i<100; i++)
		document.write(isPrime(58750291)+'
');

Full example here: cache.html.

How custom HTML tags like Facebook Connect uses work

Gunnar Steinn — Tue, 15 Sep 2009 21:25:01 +0000

While looking at the Facebook Connect API I was curious to see that it uses custom XML tags for it’s elements, for example . After the page is loaded the tag is replaced with if the user is not logged in and a profile image and name if the user is already logged in.

So I could better understand how this works I created a little sample were I extracted the important parts from the API. The sample takes in a instance of an User object and displays a profile picture and name of the user with the gs:profile-image and gs:profile-text tags.

First there is the main parser. It starts by defining the objects of the sample API in an array of knownElements. Then the parseDomTree function loops through all of the known elements and find all objects in the document that correspond to that tag.

gsml.js

var GS = {};
GS.GSML = {
	ProfileText : function(el) {
		var span = document.createElement('span');
		span.innerHTML = GS.user.username;
		el.innerHTML = "";
		el.appendChild(span);

	},
	ProfileImage : function(el) {
		// Some logic to create the image from the logged in user
		var img = document.createElement('img');
		img.setAttribute('src', GS.user.img);
		img.setAttribute('onclick', el.getAttribute('clickhandler'));
		el.innerHTML = "";
		el.appendChild(img);
	}
};

GS = {
	knownElements : [
		{key:'profile-image', class:GS.GSML.ProfileImage},
		{key:'profile-text',  class:GS.GSML.ProfileText}],
	user : null,

	init : function(user) {
		this.user = user;
	},

	parseDomTree : function(context) {

		// Loop through all known elements in our namespace
		for (var i=0; i
In the HTML that uses the sample API there are four elements of interest; include of the sample javascript api, define the User object, tell the API to parse the DOM and add the custom API tags to the HTML body.
thefile.html













And the results:

JavaScript magic

Gunnar Steinn — Tue, 15 Sep 2009 11:45:45 +0000

Function.prototype.bind = function(){
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();
  return function(){
    return fn.apply(object,
      args.concat(Array.prototype.slice.call(arguments)));
  };
};

If you want to spent an hour studying how this one function in JavaScript works there is an excellent demonstration at John Resig’s blog.

The code uses three types of method invocation in just a couple of lines (shift(), apply and call). Isn’t JavaScript too complex?

Blogg

Gunnar Steinn — Thu, 03 Sep 2009 09:58:18 +0000

Ég finn alltaf fyrir mikill bloggþörf þó ég hafi margoft byrjað og nákvæmlega jafn oft hætt (ef við teljum þessa færslu ekki með, ennþá).

Klassíska vandamálið, þegar það er nóg að blogga um hef ég ekki tíma til að blogga um það, og þess á milli, þegar ég hef nægan tíma, hef ég ekkert að blogga um…