dev.enekoalonso.com

Finally: Singletons, the Mootools way

Jan 18 2010 Published by Eneko Alonso under uncategorized

I have been using for a while the “new new Class” syntax to create singletons on the projects I am working on. This is for many reasons, but specially because I didn’t like other solutions like Class.Mutators, Class.Oclude or extending a plain object with $extend().

Now, after discussing a little bit on the Mootools email list about what was the best way to create singletons, I have created Class.Singleton so we can create singletons the Mootools way. Here is how it works:

var MySingleton = new Class.Singleton({
initialize: function(){
// code here
},
method1: function(){
// code here
},
method2: function(){
// code here
}
});

Using inheritance, mixins, etc

Class.Singleton works like defining any other Mootools class using Class(), so we can have inheritance, mixins, etc.

var BaseClass = new Class({
initialize: function() {
// Initialization code here
console.log('BaseClass initialized.');
},
method1: function() {
// some code
}
});
var MySingleton = new Class.Singleton({
Extends: BaseClass,
initialize: function() {
this.parent();
console.log('MySingleton singleton initialized.');
},
method1: function() {
this.parent();
// more code
}
});

Hope you like it!

Repository url: http://github.com/eneko/Class.Singleton

No responses yet

Setters & Getters on Mootools classes

Jul 20 2009 Published by Eneko Alonso under uncategorized

Although I haven’t need them for my classes, I thought it would be very cool to have the possibility to use them. Setters and Getters are very popular in modern programming languages, since they let you do some actions when a member/property of an object is being accessed or modified. Setters and Getters are native on Javascript objects.

// Setter on plain JS
var b = {
saveCount: 0,
set count (c) {
console.log('Setting count (B):' + c);
this.saveCount = c;
},
get count () {
console.log('count is being accessed (B)');
return this.saveCount;
}
}
b.count = 5;
console.log("Count (B): " + b.count);

Well, Mootools objects created using Class do not support that syntax. Fortunately, we can use the __defineSetter__ and __defineGetter__ functions:

// Setter in Mootools
var A = new Class({
saveCount: 0,
initialize: function() {
this.__defineSetter__("count", this.setCount);
this.__defineGetter__("count", this.getCount);
},
setCount: function(c) {
console.log('Setting count(A):' + c);
this.saveCount = c;
},
getCount: function() {
console.log('count is being accessed (A)');
return this.saveCount;
}
});
var a = new A();
a.count = 5;
console.log("Count(A): " + a.count);

Nice, uh?

No responses yet

Sending messages between Javascript objects

Apr 23 2009 Published by Eneko Alonso under uncategorized

When applications (or websites) get pretty big, it usually happens that a lot of different objects or classes interact with each other or, even worst, depend on each other to achieve the site functionality.

A simple example could be a Tabs manager class, which controls a set of tabs in the page. Sometimes, the content in this tabs is sensitive to when the tabs are shown or hidden. At this point you have three options: either the Tabs class needs to know about the content or you create a set of callback functions or you use custom events. Still, for every one of these options you are going to need variables referencing the instances of your classes (this is: var myTabs = new Tabs())

Personally, I don’t like having global variables for the objects I create. I think the code gets very messy and complicated.

So, after dealing with all these issues at work day after day I thought it would be very cool to have a messaging system between my classes, the same way other languages like Cocoa do (in a more simpler way, at least for now).

Sending messages between classes

Wouldn’t it be nice if the Tabs class would send a message every time a new tab is selected? Wouldn’t it be nice if the objects that are going to reside inside those tabs could listen to that message and update accordingly?

To do this, I created a Base class and a Register, where my objects will register automatically upon instantiation (thanks to the Base class).

var InstanceRegister = new Class({
instances: [],
addInstance: function(object) {
this.instances.push(object);
},
broadcastMessage: function(msg) {
$A(this.instances).each(function(item, index) {
item.processMessage(msg);
});
}
});
var Register = new InstanceRegister();
var Base = new Class({
ClassName: 'Base',
Implements: Options,
initialize: function(options) {
this.setOptions(options);
Register.addInstance(this);
},
processMessage: function(msg) {
console.log(this.ClassName, ' msg received: ');
console.dir(msg);
},
sendMessage: function(msg) {
Register.broadcastMessage(msg);
}
});

As you can see, the register is just an array of Instances. Yes, Register is a global object, but it will be the only one we will need. Meanwhile, the Base class adds the new instance to the Register automatically. For convenience, the Base class has a sendMessage method. Also, for convenience, I like to add a ClassName property to all my classes in case I need it later for logging, instance class type identification, etc.

Now, thanks to MooTools, we can create our classes and make them inherit from Base. We can override the processMessages method and act accordingly:

var Tabs = new Class({
ClassName: 'Tabs',
Extends: Base,
…
activateTab: function(tab) {
…
this.sendMessage({msg:'tabActivated', data:tab});
}
});
var VideoPlayer = new Class({
ClassName: 'VideoPlayer',
Extends: Base,
…
processMessage: function(msg) {
if (msg.msg == 'tabActivated' && msg.data = 'video-tab') {
// Play video
}
}
});

The beautifulness of this code resides, as I mentioned before, in the absence of any object references. Tabs doesn’t know anything about the VideoPlayer class nor any other object listening to the messages. And the VideoPlayer doesn’t know anything about the Tabs class either. It only knows about the message it has to listen to. No object references, no methods, no callbacks.

Pay attention now. This is the best part! Whenever we instance our classes, no matter how many times we do, we don’t need variable references anymore:

new Tabs();
new VideoPlayer();

Nice, uh?

Since I implemented this class I use it a lot on every project at work. It makes my life easier, keeping my classes simple and independent from each other. It’s even better. We have got to a point where we have integrated this feature with our Flash components, so these send messages to the Register when needed and any JS object listening reacts to them as needed.

By doing this, even being unidirectional (Flash to JS only), we have achieved something great: from now on, our Flash objects don’t need to know anything about our JS objects at all. Just send a message to the register and done.

At any point, even from Firebug, you can send a message to the Register. This is very nice, even for debugging:

Register.broadcastMessage({msg:'hello',data:'world'});

A listener class

I found it is very nice, while in development, to have a Listener class debugging any message received. This way I don’t need to add a console.log call on all my classes to output received messages. The Listener will do it for me:

var Listener = new Class({
Extends: Base,
initialize: function() {
this.parent();
this.ignoreMessages = false;
},
processMessage: function(msg) {
if (msg.msg == 'stopListener') this.ignoreMessages = true;
if (msg.msg == 'startListener') this.ignoreMessages = false;
if (this.ignoreMessages) return;
console.log('Listener: msg received:');
console.dir(msg);
}
});
new Listener();

Even you can control the Listener by sending custom messages to it! Awesome!

Could this be achieved with custom events?

With Mootools, creating custom events is piece of cake. But from what I understand, custom events work only inside the object that is firing them. This is, if object A fires an event ‘customEvent’, you can only listen to it if you add a callback function when you instantiate that class:

var A = new Class({
Implements: Events,
initialize: function() {
document.body.addEvent('click', function() {
console.log('A: body clicked');
this.fireEvent('bodyClicked', [this]);
}.bind(this));
}
});
var B = new Class({
doSomething: function() {
console.log('B: doing something…');
}
});
new A({
onBodyClicked: function() {
// Tell B to do something (you need a reference to B!)
}
});
new B(); // Will never do something

Ideally, B should be able to listen to the bodyClicked event without passing any info when A is instantiated. But if I’m not mistaken, this is not possible.

Revised version

I decided that it would be cool to have the Messenger as something my classes could implement, instead of inherit from (Base). Also, it would be good if one object could register for a specific message only, which would improve performance too.

var NotificationServiceCenter = new Class({
instances: {},
addObserver: function(msg, instance) {
if (!this.instances[msg]) {
this.instances[msg] = [];
}
this.instances[msg].push(instance);
},
broadcastMessage: function(msg, data) {
if (this.instances[msg]) {
$A(this.instances[msg]).each(function(item, index) {
item.processMessage(msg, data);
});
}
}
});
var NotificationService = new NotificationServiceCenter();
var Messenger = new Class({
addMsgEvent: function(msg) {
NotificationService.addObserver(msg, this);
},
sendMessage: function(msg, data) {
NotificationService.broadcastMessage(msg, data);
},
processMessage: function(msg, data) {
// For implementation on the final Class
}
});
var A = new Class({
Implements: Messenger,
initialize: function() {
document.body.addEvent('click', function(){
console.log('A: document body clicked');
this.sendMessage('documentbodyclicked', 'Hello world!');
}.bind(this));
}
});
var B = new Class({
Implements: Messenger,
initialize: function() {
this.addMsgEvent('documentbodyclicked');
},
processMessage: function(msg, data) {
console.log('B: msg received: ', data);
}
});
new A();
new B();

Here you go!

2 responses so far

Setting up timers and intervals inside JS objects

Apr 07 2009 Published by Eneko Alonso under uncategorized

It may seem trivial but it has its tricky point. Usually, in procedural Javascript (this is, non object oriented programming), timers are set up passing the callback function on a string:

function hello() {
alert("hello");
}
// Will execute hello() after 10 seconds
setTimeout('hello()', 10000);

For this code to work, hello() has to be a global function (actually a function of the window object). Otherwise, when the timer times out, it won’t find it.

When writing object oriented code, one would like to call a function inside the object itself, not a global function. We can achieve this passing an anonymous function to the setTimeout function that calls our function:

var MyClass = new Class({
initialize: function() {
setTimeout(function() { this.hello(); }, 10000); // This wont work
},
hello: function() {
alert("hello");
}
});

The previous code wont work, since this inside the anonymous function points to the window object and not to our instance of MyClass. We solve this using the bind function provided by Mootools:

var MyClass = new Class({
initialize: function() {
setTimeout(function() { this.hello(); }.bind(this), 10000);
},
hello: function() {
alert("hello");
}
});

This code will work fine, but it still has a big problem. If we wanted to access any member or function of our instance inside the hello() function, it wouldn’t work. This is because when the timer times out, the context of our instance is lost. Inside the hello() function, this will point to the window object.

var MyClass = new Class({
initialize: function() {
this.text = 'hello';
setTimeout(function() { this.hello(); }.bind(this), 10000);
},
hello: function() {
alert(this.text); // This wont work
}
});

There are multiple ways to solve this issue but my favorite is to use the function call() of the function object. This function let’s you pass an object while calling your function that will become this inside it.

var MyClass = new Class({
initialize: function() {
this.text = 'hello';
setTimeout(function() { this.hello.call(this); }.bind(this), 10000);
},
hello: function() {
alert(this.text);
}
});

Now we can use this inside the hello() function and everything will work fine, no matter how many instances of MyClass we create.

var MyClass = new Class({
initialize: function(text) {
this.text = text;
setTimeout(function() { this.hello.call(this); }.bind(this), 10000);
},
hello: function() {
alert(this.text);
}
});
new MyClass('hello');
new MyClass('hi there!');
new MyClass('wassup?');

Enjoy :)

2 responses so far

Threads in Javascript

Dec 14 2008 Published by Eneko Alonso under uncategorized

Well, let’s make it clear: There is no way to create actual threads in Javascript. Javascript code runs on a single thread inside the browser. This is, only one line of code is running at a time. In fact, until Google’s Chrome, all pages/tabs opened on a browser where running on the same system thread.

So what is this about Javascript threads? Well, maybe we cannot create them, but we can emulate them. Since Javascript is an event driven language, we can use an Object Oriented approach and create an object that stays ‘alive’ with the use of a timer. Now we only need a way to control that object and to interact with it.

Thread Class

In order to accomplish this functionality I created this Mootools-based Thread class:

Thread = new Class({
ClassName: 'Thread',
Implements: [Options, Events],
threadId: '',
timer: null,
stopped: true,
options: {
interval: 1000,
autostart: false
},
initialize: function(options) {
ThreadController.add(this);
this.setOptions(options);
if (this.options.autostart) this.start();
},
start: function() {
this.stopped = false;
this.__setTimer();
this.fireEvent('start', [this]);
},
stop: function() {
this.stopped = true;
this.__stopTimer();
this.fireEvent('stop', [this]);
},
setInterval: function(time) {
this.__stopTimer();
this.options.interval = time;
this.__setTimer();
},
// For inheritance
beforeExecute: function() {
this.fireEvent('beforeExecute', [this]);
},
// For inheritance
execute: function() {
this.fireEvent('execute', [this]);
},
// For inheritance
afterExecute: function() {
this.fireEvent('afterExecute', [this]);
},
/* ————— */
__setTimer: function() {
if (!this.stopped) {
this.timer = setTimeout(function(){
this.__execute(this);
}.bind(this), this.options.interval);
}
},
__stopTimer: function() {
if (this.timer != null) {
clearTimeout(this.timer);
this.timer = null;
}
},
/* This function is called from a timer which doesn't
know about 'this' */
__execute: function(self) {
self.beforeExecute();
self.execute();
self.afterExecute();
self.__setTimer();
}
});

Thread Controller

To make my life easier and prevent me from having to declare one variable for every thread I use, I have created a ThreadController object to which every thread created will subscribe. This thread controller will allow us to find threads of a specific class and start/stop them or delete them.

ThreadController = {
threadCount: 0,
threads: [],
add: function(thread) {
this.threads.push(thread);
this.threadCount++;
thread.threadId = 'Thread-' + this.threadCount;
},
count: function() {
return this.threads.length;
},
indexOf: function(ClassName) {
for (var i=0, l=this.threads.length; i<l; i++) {
if (this.threads[i].ClassName == ClassName) return i;
};
return -1;
},
remove: function(index) {
if (index < 0 || index > this.threads.length-1) return;
var thread = this.threads.splice(index, 1);
thread[0].stop();
delete thread[0];
}
}

Usage

In order to use the Thread class you can do it in two different ways.

First, you can instantiate threads and use the onStart, onStop, onBeforeExecute, onExecute and onAfterExecute events.

var producer = new Thread({
onExecute: function(thread) {
// Do something
}
}).start();

Or, you can create a subclass and override the start, stop, beforeExecute, Execute and afterExecute methods. I like this option better since it let’s you create your own thread based Objects that you can instantiate later. If you use this option do not forget to call this.parent().

var Producer = new Class({
ClassName: 'Producer',
Extends: Thread,
execute: function() {
this.parent();
// Do something
}
});

Producer / Consumer demo

A good example of Javascript threads interacting with each other is the classic Producer/Consumer problem. A Producer object produces goods at some speed. A Consumer object consumes goods at its own speed. Depending of the speed of producers and consumers and the number of each, more or less goods will be available.

var Producer = new Class({
ClassName: 'Producer',
Extends: Thread,
execute: function() {
this.parent();
var item = new Element('div');
item.set('text', ++count).addClass('item');
item.fade('hide').inject($('container'));
new Fx.Morph(item, {
onComplete: function() {
item.addClass('ready');
}
}).start({
opacity: 1
});
}
});
var Consumer = new Class({
ClassName: 'Consumer',
Extends: Thread,
execute: function() {
this.parent();
var item = $('container').getFirst('.ready');
if (item && item.hasClass('ready')) {
item.removeClass('ready');
new Fx.Morph(item, {
onComplete: function() {
item.destroy();
}
}).start({
opacity: 0
});
}
}
});
new Producer().start();
new Consumer().start();
new Consumer().start();
new Consumer().start();
new Consumer().start();

As you can see, creating new producers and consumers is very easy and they will live and run on their own. Check out this Producer/Cosumer demo with Javascript Threads.

Thread Synchronization

Now, guess what? The fact that all these threads are not actual threads plays in our advantage. Since two of this objects cannot execute code at the same time, there is no risk of garbaging the value of a variable while changing it at the same time. For example, if two threads are updating the same DOM element, they will never conflict or crash. But you may still need critical sections if two threads are manipulating the same DOM object, for example. You can use temporary classes on the elements, but that doesn’t guarantee no conflicts.

On the Producer/Consumer demo I am using the class “ready” on goods elements to indicate which ones are ready to be consumed and are not being consumed yet. But if you look at the code carefully, would this class prevent two consumers from consuming the same element? Not really. The problem is than between the time a consumer finds a ready element and the time when marks it as not ready, it is possible than a second consumer has found the same element.

Get the code

Latest version:
http://enekoalonso.com/svn/research/classes/thread.js

No responses yet

MooTools classes with “Smart Start”

Dec 10 2008 Published by Eneko Alonso under uncategorized

A couple of days ago I was talking with my friend Karsten at work about one small but relevant issue we face when building websites: our beautiful MooTools classes cannot interact with elements on the DOM until the DOM has fully loaded. This, which is obvious, sometimes has some impact.

For example, the typical case we face is with tabs. Usually you will see code that hides all tab panels but the first one with CSS classes. But what if your visitor has Javascript disabled? With no Javascript, all tabs should be visible. So we need to hide the tabs with Javascript, but now we face the problem: we cannot alter the elements until the DOM is ready. And that is to late for some browsers like IE6 & IE7 which are not very fast processing Javascript. If we hide the tabs on the initialize method of our class, you will see them on the screen for a split of a second. That is not good.

The solution is simple: Use document.write to create the styles needed to hide the tabs as soon as the javascript is processed, this is, before the DOM is loaded. The problem is that we are not creating our classes until the DOM is loaded, so this code has to be placed somewhere else, breaking the encapsulation that object oriented programming gives us.

So we came up with an idea, more or less at the same time: Instantiate our classes with a ‘Smart Start’. This is, our objects will be created before the DOM is ready but will be smart enough to hold the interaction with the elements until that point. This will allow us to do other stuff if we want to, like hiding the tabs other than the first one.

As an example, I have modified this cool CountDown class that David Walsh has just published.

Here is the new code:

var CountDown = new Class({
Implements: [Options,Events],
domReady: false,
startOnDomReady: false,
fx: null,
options: {
element: null,
start: 10,
finish: 0,
startFont: '36px',
finishFont: '12px',
onComplete: $$empty,
duration: 1000
},
initialize: function(options) {
this.setOptions(options);
// Smart objects can listen to domready
window.addEvent('domready',function() {
this.domReady = true;
this.options.element = $(this.options.element); // Hook element
if (this.startOnDomReady) this.start();
}.bind(this));
},
start: function() {
// If DOM is not ready, wait
if (!this.domReady) {
this.startOnDomReady = true;
return;
}
// Create FX object only once
this.fx = new Fx.Tween(this.options.element, {
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
});
this.anim();
},
anim: function() {
this.options.element.set('text',this.options.start–);
this.fx.start('font-size',this.options.startFont,this.options.finishFont);
}
});
var cd = new CountDown({
element: 'countdown',
start: 12,
finish: 0,
onComplete: function() {
this.options.element.set('text','Done! Your special code is: 4065').setStyle('color','#090');
}
}).start();

As you can see, the object is instantiated as soon as the Javascript is processed but, even with the function start() being called, the object doesn’t start processing until the DOM is ready.

Demo: http://dev.enekoalonso.com/research/moo-countdown-smartstart.php

No responses yet

Very basic $ function to deal with element classes

Dec 04 2008 Published by Eneko Alonso under uncategorized

If you are working with plain Javascript but still want to have some advantajes when dealing with element classes (element.className) you can write a small $ function like this:

var $ = function(element) {
this.element = element;
this.getClasses = function() {
return this.element.className.replace(/\s+/,' ').split(' ');
}
this.hasClass = function(className) {
var classes = this.getClasses();
return (classes.indexOf(className) > -1);
}
this.addClass = function(className) {
if (!this.hasClass(className)) {
this.element.className += (this.element.className ? ' ' :'') + className;
}
}
this.removeClass = function(className) {
if (this.hasClass(className)) {
var classes = this.getClasses();
classes.splice(classes.indexOf(className), 1);
this.element.className = classes.join(' ');
}
}
return this;
}

Then, once you have a variable that contains a DOM element, you can use it like this:

$(mydomelement).addClass('test');
if ($(mydomelement).hasClass('test')) alert('element has class test');
$(mydomelement).removeClass('test');
var classes = $(mydomelement).getClasses();

This will let you work with elements that have multiple classes very easily.

No responses yet

Finally: Singletons, the Mootools way

Using inheritance, mixins, etc

Setters & Getters on Mootools classes

Sending messages between Javascript objects

Sending messages between classes

A listener class

Could this be achieved with custom events?

Revised version

Setting up timers and intervals inside JS objects

Threads in Javascript

Thread Class

Thread Controller

Usage

Producer / Consumer demo

Thread Synchronization

Get the code

MooTools classes with “Smart Start”

Very basic $ function to deal with element classes

Search

About the blog

About the author

Categories

Monthly

Pages

Finally: Singletons, the Mootools way

Using inheritance, mixins, etc

Setters & Getters on Mootools classes

Sending messages between Javascript objects

Sending messages between classes

A listener class

Could this be achieved with custom events?

Revised version

Setting up timers and intervals inside JS objects

Threads in Javascript

Thread Class

Thread Controller

Usage

Producer / Consumer demo

Thread Synchronization

Get the code

MooTools classes with “Smart Start”

Very basic $ function to deal with element classes

Search

Tags

About the blog

About the author

Categories

Monthly

Pages