Category archive

Javascript looping performances

29th of July 2008

I’ve done a lot of javascript programming recently and more then one time, I had to tweek performance. A nice test suite for performance testing of all (or at least a lot of) ways of looping through an array is located there: http://blogs.sun.com/greimer/resource/loop-test.html. That Blogentry for this awaits you here: http://blogs.sun.com/greimer/entry/best_way_to_code_a

Should be useful from time to time and I really shoud stop using those comfortable for-in-loops…

Addition:

Also is the inverted version of the reversed while loop faster than the ordinary cached for loop.

In short: for (var i=0, len=arr.length; i<len; i++) { } == 5 ms

var i = arr.length-1, j=0; while(--i) {++j;}; == 7 ms

Both tested on my 1.6 Ghz Notebook in battery mode with a simple array with 100,000 entries.

Facebook style inputs

17th of February 2008

I just read about an autocompletion input mechanism in mootools like that used in facebook. This is a really cool way to add names from a list to your query or something like that. But it shouldn’t work well, if you want to mix up new names with names of the autocompletion list.

On InteRiders there is also a version in prototype available. Mental notice: If I have time, I should implement a jquery version or probably a version without framework.

From prototype to object orientation in javascript

4th of December 2007

I don’t know if the title for this entry is well chosen, but in short: For a long time I searched for a possibility to create classes I am used to write like in object oriented programming languages. So I asked google about that and discovered I am not alone. But I found nothing that satisfied my needs. Sure, you can create an object using code like that:

var obj1 = function() {};
obj1.prototype = {
 foo: "foo-obj"
};

var obj2 = obj1;
obj2.prototype.foo2 = "obj";
obj2.prototype.setFoo = function(val) {this.foo = val;};

But that looks nothing like object oriented code I used to write in other languages. Besides, writing all of this .prototype seems more complicated as it should be. So I looked further. With prototype you can write:

var Animal = Class.create({
 initialize: function(name, sound) {
 	this.name  = name;
 	this.sound = sound;
 },	speak: function() {
 	alert(name + " says: " + sound + "!");
 }
});
// subclassing Animal
var Snake = Class.create(Animal, {
 initialize: function($super, name) {
 	$super(name, 'hissssssssss');
 }
});

From Prototype documentation

Pretty good so far, but there are still some issues. The greatest issue is, you need prototype to create such classes. For some projects prototype is useful, for small projects it is simply to much. Besides you can’t create classes which inherit from multiple classes, and this $super in that constructor, must I really write that? I mean, within the parameterlist of a function should only be variables, that you expect when calling var snake1 = new Snake("billy the snake");

So I thought about it and a little bit inspired by all I saw I decided what I wanted to write. Code like that:

var ParentClass = new Class.create({
initialize: function(fooval) {this.foo = fooval;}
,    foo: ""
,    setFoo: function(val) { this.foo = val; }
});

var SubClass = new Class.create({
initialize: function() {this.super("barent");}
,    foo2: "barcelona"
}, ParentClass);

So I developed 23 lines that make this possible. Here it is:

var Class = {
	create: function() {
		var t = function() {if(this.initialize) this.initialize.apply(this, arguments);};
		t.prototype.super = function() {
			if(typeof this._super != "undefined")
				this._super.initialize.apply(this, arguments);
		};
		t.extend = function() {
			for(var i = 0; i < arguments.length; ++i) {
				if(typeof arguments[i] == "function")
					arguments[i] = new arguments[i]();
				for (var property in arguments[i]) {
					if(!t.prototype[property])
						t.prototype[property] = arguments[i][property];
				}
				if(typeof t._super == "undefined")
					t.prototype._super = arguments[i];
			}
		};
		t.extend.apply(t, arguments);
		return t;
	}
};

For all, who want some examples what these 23 lines can do, I created a page for this Class-object. If you have feedback and/or more ideas I would like to hear about it.