Pattern advice and instancing?

JavaScript
1

I’m building an animation script. The animation methods needs to be able to work with different elements and properties at the same time.

Therefore some of the properties need to be instanced so as to avoid any conflicts that would occur if the properties were shared. Does that make sense?

One approach might be something like this

anim :  function (x,y,z) {
    var newX = x;
    var newY = y;
    var newZ = z;
    var timer = null;
    (function animate(){
    dosomething with x,y and z
    if (end) clear timer
    timer = setTimeout (arguments.callee, 10);
    })()
}

Alernatively I’m looking at using a constructor to build instances of x,y,z and then
calling the separate animate method in the scope of the new instance.

Question: is this the way to go?
Question: am I implementing the code correctly?

The script

var Anim = (function (){
	// private properties and methods here	
	return {
		// I'm taking this seriously
		getElephantsById : function (id){ this.el = document.getElementById(id); return this; },
		
		Opac : 1,
		
		// a contructor function to return new instances of properties.
		init : function(prop, el){ 
			var Construct = function() {
				this.el = el;		// new instance of current element
				this.prop = prop;	// new instance of property
				this.timer = null;	// new instance of timer
			};	
			Construct.prototype = Anim; // Inherit Anim's properties and methods
			return new Construct();		// return the new instance
		},
			
		anim : function () {
			var o = this;
			o.el.style[o.prop] = o.Opac -= 0.01;
			if (o.Opac < 0) { clearTimeout(o.timer); o.timer = null; return; }
			o.timer = setTimeout (function(){o.anim()}, 10);		
		},
		
		fadeOut : function() {
			this.anim.call (this.init("opacity", this.el), null); // call anim with this set to the new instance
			return this;
		}
	}
})();

A working example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default</title>
<style type="text/css">
#box1 { position: absolute; top: 100px; left: 200px; width: 200px; height: 200px; background: blue; }
#box2 { position: absolute; top: 100px; left: 400px; width: 300px; height: 300px; background: red; }
</style>
</head>
<body>
<div id="box1"> Box 1</div>
<div id="box2"> Box 2 </div>
<script type="text/javascript">
var Anim = (function (){
	// private properties and methods here	
	return {
		// I'm taking this seriously
		getElephantsById : function (id){ this.el = document.getElementById(id); return this; },
		
		Opac : 1,
		
		// a contructor function to return new instances of properties.
		init : function(prop, el){ 
			var Construct = function() {
				this.el = el;		// new instance of current element
				this.prop = prop;	// new instance of property
				this.timer = null;	// new instance of timer
			};	
			Construct.prototype = Anim; // Inherit Anim's properties and methods
			return new Construct();		// return the new instance
		},
			
		anim : function () {
			var o = this;
			o.el.style[o.prop] = o.Opac -= 0.01;
			if (o.Opac < 0) { clearTimeout(o.timer); o.timer = null; return; }
			o.timer = setTimeout (function(){o.anim()}, 10);		
		},
		
		fadeOut : function() {
			this.anim.call (this.init("opacity", this.el), null); // call anim with this set to the new instance
			return this;
		}
	}
})();
Anim.getElephantsById("box1").fadeOut();
Anim.getElephantsById("box2").fadeOut();
</script>
</body>
</html>

RLM

2

Just a quick idea to make the constructor a but more flexible by taking an object as an argument.

// a contructor function to return new instances of properties.
init : function(propsCollect){ 
	var Construct = function() { // loop through the passed object and assign props to this.
		for (var prop in propsCollect) {
			this[prop] = propsCollect[prop];
		}
	};	
	Construct.prototype = Anim; // Inherit Anim's properties and methods
	return new Construct();		// return the new instance
},
			
anim : function () {
	//do stuff........
},
		
fadeOut : function() {
	var params = { prop : "opacity", el : this.el, timer : null } // list of properties to instance
	this.anim.call (this.init(params), null); // call anim in the scope of our new instance
	return this;
}
3

I went back over the classical and prototypal inheritance section of Pro Javascript Design patterns, which certainly helped me clarify a few things.

I don’t think I was far off. Have now substituted init for a simple clone function. Note this is far from fully functional, I’m just testing patterns.

var Anim = (function (){
	// private variables	
	return {
		iD : function (id){ this.el = document.getElementById(id); return this; },
		
		Opac : 1,
		
		// simple clone method to create an empty object with a prototypal link to Anim
		inst : function(){ 
			var F = function(){}
			F.prototype = Anim;
			return new F;
		},
			
		anim : function () {
			var o = this;
			o.el.style[o.prop] = o.Opac -= 0.01;
			if (o.Opac < 0) { clearTimeout(o.timer); o.timer = null; return; }
			o.timer = setTimeout (function (){o.anim()}, 10);		
		},
		
		fadeOut : function() {
			var o = this.inst(); // clone of Anim
			// add properties to the new instance/clone
			o.prop = "opacity";
			o.el = this.el;
			o.timer = null;
			this.anim.call (o, null); // call anim with this set to the new instance
			return this;
		}
	}
})();