Monday, November 19th, 2007
Squirrel IoC: Dependency Injection for JavaScript
Category: JavaScript
Mark Forster is a fan of IoC from his days in Spring-land. He found that he was "writing endless amount of code to just instantiate objects and wiring up dependencies in these objects" and decided that what was in order was Squirrel IoC.
To see it in action, we can look at a simple example. There are three files at play here:
- Application: Bootstrap and wire up
- NameSpace: Define the objects and services
- HTML: Bootstrap via HTML
Application
JAVASCRIPT:
-
-
$(function(){
-
var oContainerDefinition={
-
'model':{type:LabModel},
-
'dao':{type:LabDAO,args:[{ref:'model'}]},
-
'service':{type:LabService,props:[{name:'dao',ref:'dao'}]},
-
'application':{type:LabApplication,props:[{name:'containerContext',ref:'containerContext'},{ref:'service'}]}
-
};
-
-
-
var _oContainer = new IContainer();
-
_oContainer.load(oContainerDefinition);
-
});
-
NameSpace
JAVASCRIPT:
-
-
/**
-
* A Very basic Model class
-
*/
-
function LabModel(property1){
-
this.property1=property1 || "Some initial property";
-
}
-
-
/**
-
* A Very basic DAO class
-
*/
-
function LabDAO(oModel){
-
var _oModel=oModel;
-
-
// DAO Get method
-
this.get=function(){alert("DAO LOAD");return _oModel}
-
-
// DAO Save method
-
this.save=function(){alert("DAO SAVE");}
-
-
// DAO Delete method
-
this.delete=function(){alert("DAO DELETE");}
-
}
-
-
/**
-
* A Very basic JSON DAO class
-
*/
-
function JSONDAO(oModel){
-
var _oModel=oModel || null;
-
-
// DAO Get method
-
this.get=function(){alert("JSON LOAD");return _oModel}
-
-
// DAO Save method
-
this.save=function(){alert("JSON SAVE");}
-
-
// DAO Delete method
-
this.delete=function(){alert("JSON DELETE");}
-
}
-
-
/**
-
* A Very basic service class
-
*/
-
function LabService(oLabDao){
-
var _oLabDao = oLabDao || null;
-
-
// Service Get method
-
this.get=function(){
-
alert("SERVICE GET");
-
return _oLabDao.get();
-
}
-
-
// Getter for DAO instance
-
this.getDao=function(){
-
return _oLabDao;
-
}
-
-
// Setter for DAO instance
-
this.setDao=function(oLabDao){
-
_oLabDao=oLabDao;
-
}
-
}
-
-
/**
-
* A Very basic application class
-
*/
-
function LabApplication(){
-
var _oService=null; // Reference to the service instance
-
ContainerSupport.call(this); // Implement ContainerSupport interface
-
-
// Invoked by container when context support is provided
-
this.onContextSupport=function(oContainerContext){
-
var _oModel=_oService.get();
-
//alert("Property of model is "+_oModel.property1);
-
var _oSpan=$('span#iOutput')[0];
-
$(_oSpan).html(_oModel.property1);
-
}
-
-
// Setter for service instance
-
this.setService=function(oService){
-
_oService=oService;
-
}
-
}
-
HTML
HTML:
-
-
<title>Lab Projects : squirrel-IOC : Phase 1 : Demonstraton : Simple layer example</title>
-
<script src="script/jquery-1.2.1.pack.js" type="text/javascript"></script>
-
<script src="script/com.hedgehoglab.squirrel.core.js" type="text/javascript"></script>
-
<script src="script/com.hedgehoglab.example.layer.NameSpace.js" type="text/javascript"></script>
-
<script src="script/com.hedgehoglab.example.layer.Application.js" type="text/javascript"></script>
-
-
<link type="text/css" rel="stylesheet" href="css/style.css" />
-
</head>
-
<h1>squirrel IOC demonstraton</h1>
-
</body>
-
2.3 rating from 31 votes
My understanding of IoC is that it’s a nasty workaround for restrictions in statically typed languages such as Java - I don’t understand why you would want to use it in a dynamic language which provides so many other powerful techniques for managing code complexity.
Jamis Buck wrote a dependency injection (another name for IoC) framework for Ruby, but later declared that he no longer believed the technique was appropriate for that language: http://weblog.jamisbuck.org/2007/7/29/net-ssh-revisited
Looks very enterprisy.
When you use an acronym or an unfamiliar name, it helps if you define it. Yes, I can and will Google “IoC”, but it wouldn’t hurt to explain what a fairly obscure term like this means when you write an article about it.
(Answer: It’s either “International Olympic Committee” or “Inversion of Control”. I’ll guess the lattter…)
I’m guessing Injection of Code.
@Michael Geary, being a Vancouverite I got a chuckle out of that… 2010 ftw!
@Chris
Inversion of Control, actually. ;)
In my experience IoC is a neccessary evil in larger projects using statically typed languages.. Java and C# come to mind. In JavaScript I fail to see the benefit honestly.. Unless he’s just writing it for the sake of writing it, which ofc. is fine too.
Squirrel was written to allow the UI components of Fixx, an enterprise application written in java, to be configurable via java server-side code.
Squirrel is actually part of a larger framework which attempts to seam together and compliment server and client technologies keeping markup free of inline script and allowing a separation of concerns between various client-side libraries and frameworks we choose to implement. The IOC container has been distilled and tweaked simply to play about with in other projects by our team.
It has been put out there on the web for other people who may find it interesting or may find another use for it. We will be keeping squirrel up to date as we improve are core framework so keep an eye out