#Cell
Cell is a module pattern mediator plugin that allows users to control JavaScript functions by using modules which can be called by broadcasting a Mediator component. It allows the injection of dependencies on the functions, giving the user total control over the modules (modules can be started and/or stopped at will).
Besides, the user can set filters for the modules; if a function is broadcast with one or more arguments, those arguments are first tested against the filter to determine if the function inside the module will be executed.
##Registering a module
Mediator.add('TestModule',function(){
return{
doSomething:function(something){
alert("Do " + something);
}
}
});
In this case, to call the function doSomething
inside the module you just need to broadcast a message to the
Mediator component.
Mediator.broadcast("doSomething",["Homework"])
However, before broadcasting the Mediator component the previously registered module needs to be started.
Mediator.start("TestModule");
Setting a special function called init
will execute some code you specify when the module is started.
Mediator.add('TestModule',function(){
return{
init:function(){
console.log("Init Function")
},
doSomething:function(something){
alert("Do " + something);
}
}
});
###Filters
As mentioned previously, filter functions can be incorporated on your modules to control valid data
passed to a function through the broadcast
method.
Mediator.add('TestModule',function(){
return{
doSomething:function(something){
alert("Do " + something);
}
}
},{filter:function(data){
return data === "some tasks";
}
});
It's important to note that filter
must be a function that returns a boolean value of either true
or false
.
In this case, by executing:
Mediator.broadcast("doSomething",["some taskss"])
A filter exception will be show for that module.
##Dependency Injection for modules
Cell allows the injection of dependencies into the modules you create.
$component.register('data',"Injected data");
This 'data'
would be injected on all the modules that receive a data object as a parameter.
Mediator.add("Dependency",function(data){
return {
doSomething : function(){
alert(data);
}
}
});
##Webworker
Cell provides web worker registration. A worker javascript can be added with an identifier
and it defines the onmessage
function for us, requesting the name to set, the url of our web
worker and the onmessage
function.
Mediator.addWorker("count","worker.js",function(event){
document.getElementById("result").innerHTML=event.data;
});
A message can be then posted to the web worker using the postWorker
command.
Mediator.postWorker('count',"Text")
###Instantiating a Worker
In the previous example we created a web worker from an external file called worker.js
but it is possible to create a web worker from a string
containing all the code for our
web worker.
Consider the following example:
var code = "var i=0;var speed = 500;function timedCount(){i=i+1;"+
"postMessage(i);setTimeout('timedCount()',speed);}"+
"self.addEventListener('message',function(e){debugger;"+
"switch(e.data){case '-':speed -= 100;break;case '+':"+
"speed+= 100;break;/*default:if(typeof e.data === "+
"'number'){i = e.data;}break;*/}});timedCount();";
That string contains all the code that must be in our webworker for the job desired, this is the code in a more human readable presentation.
var i=0;
var speed = 500;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",speed);
}
self.addEventListener("message",function(e){
switch(e.data){
case "-":
speed -= 100;
break;
case "+":
speed += 100;
break;
}
});
timedCount();
As you can see the worker is nothing more than a simple counter were we can increase or decrease the time interval between the iterations.
Cell offers us the posibility to create a web worker from the string.
Mediator.addWorker("count",code,function(event){
document.getElementById("result").innerHTML=event.data;
});
Also it is possible to create a web worker from a self contained script tag in our page, without having an external javascript file.
<script type="javascript/worker">
var i=0;
var speed = 500;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",speed);
}
self.addEventListener("message",function(e){
switch(e.data){
case "-":
speed -= 100;
break;
case "+":
speed += 100;
break;
}
});
timedCount();
</script>
We can also instantiate the web worker sending to it a valid script tag.
var scriptTag = $("script[type='javascript/worker']");
Mediator.addWorker("count",scriptTag,function(event){
document.getElementById("result").innerHTML=event.data;
});
});
###Post webworkers You can send data to a registered web worker with the method postWorker.
Mediator.postWorker('count',"-");
###Stop Worker Once you don't need the webworker you could terminate it with the method stopWorker
Mediator.stopWorker('count');
Note A terminated Web Worker will no longer respond to messages or perform any additional computations.
###Resume Worker As we mentioned above a terminated webworker cannot be restarted,to do this we need to create a new webworker.
Cell
stores the javascript || URL and the event registered for all the workers added, doing this it
can re-create a terminated web worker with the method resumeWorker.
Mediator.resumeWorker('count');