registry pattern in Javascript?

sneakyimp

I'm working on a very elaborate Javascript project which, using a variety of wrapper classes, creates its entire interface using the DOM. I.e., every single form, button, label, paragraph, etc. is constructed via javascript OOP-style.

I've seen a LOT of redundantly specifed colors, font faces, background images, gradients, etc. I believe that colors, fonts, etc. that are used many times should be centralized in a registry somewhere.

Can anyone comment on whether this sounds like a good idea? Googling for Javascript Registry Pattern didn't yield many examples, but I did find this one which looks rather inefficient to me:

registry = (function() {
  // private attributes
  var blubb = new Array();
  // private methods
  var getIndex = function(_name) {
    for (var i = 0; i < blubb.length; i++) {
      if (blubb[i].name == _name) {
        return i;
      }
    }
    return null;
  };

  return {
    // public attributes

// public methods
setValue : function(_name, _value) {
  var foo = this.getValue(_name);
  if (foo == null) {
    var temp = new Object();
    temp.name = _name;
    temp.value = _value;
    blubb.push(temp);
  } else {
    blubb[getIndex(_name)].value = _value;
  }
},
getValue : function(_name) {
  for (var i = 0; i < blubb.length; i++) {
    if (blubb[i].name == _name) {
      return blubb[i].value;
    }
  }
  return null;
}
  }
})();
// registry is already available
registry.setValue("foo", "bar");
registry.getValue("foo"); // gives "bar"
registry.getValue("bar"); // gives null

johanafm

Yes, it seems insane to use an array with numerical indices for objects o{name: value} when you could just as well have an object with name: value pairs to begin with. But perhaps I'm missing the point?

var registry =
{
	// private attributes
	blubb : {},

// public methods
setValue : function(_name, _value)
{
	this.blubb[_name] = _value;
},
getValue : function(_name)
{
	return this.blubb[_name];
}


}
// registry is already available
registry.setValue("foo", "bar");

var v = registry.getValue("foo");
alert('registry[foo]: ' + v);
// This does not overwrite the registry member 'foo'
v = 'foobar';
alert("v: " + v +"\nregistry[foo]: " + registry.getValue("foo"));

Depending on your needs, you might want to modify setValue to return the old value if it was previously set.

sneakyimp

Thanks for the code and suggestions, johanafm. Unless I'm mistaken, you have not created a class but rather a global object which looks to behave like a class with only static members. That sounds more or less like precisely what I need. As JS is not my forte, I was specifically wondering yesterday how to get static behavior in JS classes and methods. Or perhaps it's just an object? Not immediately sure what the difference is but it looks useful in either case.

I am now a bit concerned about performance should my registry become large. Does anyone have any rules of thumb or heuristic guidelines for using such a registry? How big can such a registry reasonably become before it's 'too big' ? I would imagine that creating multiple registry objects to break up a large registry into smaller, more manageable ones would be the natural approach if one's registry became too large, right?

Weedpacket

sneakyimp wrote:
I was specifically wondering yesterday how to get static behavior in JS classes and methods. Or perhaps it's just an object?

JavaScript doesn't have classes, only objects; it uses the prototypal inheritance model rather than classical inheritance (this is why so many JavaScript frameworks provide their own implementations of classes and classical inheritance; more for the sake of a familiar environment than anything).

In prototypal inheritance, one object can serve as the "prototype" for another (a JavaScript object's prototype is found in it's [font=monospace]prototype[/font] property). All objects with a common prototype share that prototype object's properties (the actual properties, by reference - they don't just gain their own properties with the same names: changing the properties of a prototype (including adding or removing them) changes them for all its descendants). An object can also switch to having another prototype.

Incidentally, johanafm's registry seems to be more complex than necessary (I can see how the original might be better - if your registry keys were something other than just names - but why would you do that either?).

var registry = {};

// registry is already available
registry['foo'] = 'bar';

var v = registry['foo'];
alert('registry[foo]: ' + v);
// This does not overwrite the registry member 'foo'
v = 'foobar';
alert("v: " + v +"\nregistry[foo]: " + registry['foo']);

But whatever method you go with, watch out that your registry doesn't just turn into a dumping ground for whatever you happen to be working on at the time ("oh, I'll put it in the registry"). You'd just be reinventing global variables.

If you create multiple registry objects you'd need some way of identifying which registry to look in for what you're wanting. If you group those values by their functionality (colours, fonts, etc.) then you'd also be able to add methods to those registry objects specific to working with the kinds of values they contain. And then you'll be wanting a prototype Colour object, etc. for individual colour objects to inherit methods from. Then the protoype Colour could also serve as the registry for colour objects....

sneakyimp

I very much appreciate these truly edifying posts of yours...

Weedpacket;10998526 wrote:
In prototypal inheritance, one object can serve as the "prototype" for another (a JavaScript object's prototype is found in it's [font=monospace]prototype[/font] property). All objects with a common prototype share that prototype object's properties (the actual properties, by reference - they don't just gain their own properties with the same names: changing the properties of a prototype (including adding or removing them) changes them for all its descendants). An object can also switch to having another prototype.

I think your one paragraph here is more informative than even the mozilla docs. They provide an example here and it looks to me like it's redundant for them to use the apply method and also set a prototype (e.g., Food.prototype = new Product()). I believe I understand what the apply function does (in that it sets properties on this from some other Object by calling a constructor in some weird way) but the reason for the prototype assignment escapes me:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Product(name, price) {  

  this.name = name;  

  this.price = price;  

  if (price < 0)  

    throw RangeError('Cannot create product "' + name + '" with a negative price');  

  return this;  

}  

function Food(name, price) {  

  Product.apply(this, arguments);
  this.category = 'food';  

}  

Food.prototype = new Product();

function Toy(name, price) {  

  Product.apply(this, arguments);
  this.category = 'toy';  

}  

Toy.prototype = new Product();

var cheese = new Food('feta', 5);  

console.log(cheese);
var fun = new Toy('robot', 40); 
console.log(fun);
</script>
</head>
<body>
</body>
</html>

Weedpacket;10998526 wrote:
If you create multiple registry objects you'd need some way of identifying which registry to look in for what you're wanting. If you group those values by their functionality (colours, fonts, etc.) then you'd also be able to add methods to those registry objects specific to working with the kinds of values they contain. And then you'll be wanting a prototype Colour object, etc. for individual colour objects to inherit methods from. Then the protoype Colour could also serve as the registry for colour objects....

So far, there are dozens of references to perhaps 10 or 15 colors:

obj.setBackgroundColor("#171717"); // this color might be referred to twenty times in various places

It therefore seems logical to centralize it somewhere to improve skinnability and reduce redundancy. I was thinking something like a color registry

if (!MY_APP) {
  MY_APP = {};
}
MY_APP.colors = new Registry({
  textColorDefault : "#171717",
  textColorBlur   : "#888888"
  // etc....
});

I would have one central variable, MY_APP, from which dangle all of my applications globally needed values. The point of a registry is to prevent accidental changes of configuration values and to broadcast notifications when values change. For example a data table might re-render itself if we changed our color scheme from "iHeartPink" to "deathBeforeDishonor". We are also considering registries for prompts and text in our interface to make it language-agnostic, with all generic text being stored in language configuration files.

EDIT forgot MDN link.

Weedpacket

sneakyimp wrote:
We are also considering registries for prompts and text in our interface to make it language-agnostic, with all generic text being stored in language configuration files.

Something like Message Bundles? An object with properties like "Please enter your name", so the "nl" prompts bundle would have [font=monospace]{...."Please enter your name": "Voer uw naam.", ...}[/font] And when you want the prompt, [font=monospace]messages.get('Please enter your name.');[/font]

I'm thinking of a "theme manager" object; a set of theme properties (default text colour, etc.), and for each property, a list of the objects each one affects; and methods for changing the former and updating the latter to suit.

An excellent resource I found for explaining what JavaScript was about is Douglas Crockford's JavaScript site; starting particularly with The World's Most Misunderstood Programming Language.

sneakyimp

OK so apparently Javascript passing objects by reference presents an issue. Here's my primitive registry class:

/*
 * A class to centralize storage of pretty much anything such as text, colors,
 * styles, functions, etc.
 * @param mixed init
 *              An object or array to initialize the registry for convenience
 */
var Registry = function(init) {

// private var, an object to hold key=>value pairs
var _registry = {};
if (init) {
	if (init instanceof Object) {
		_registry = cloneObject(init);
	} else if (init instanceof Array) {
		for ( var i = 0; i++; i < init.length) {
			_registry[init[0]] = init[1];
		}
	}
}

// public methods
this.setValue = function(name, value) {
	var newValue;
	if (value instanceof Object) {
		newValue = cloneObject(value);
	} else {
		newValue = value;
	}

	_registry[name] = newValue;
};

this.getValue = function(name) {
	return _registry[name];
};

// less verbose alias for getValue
this.v = function(name) {
	return this.getValue(name);
};

};

I instantiated it with an object and ran some test code:

var reg = new NUIRegistry( {
	colors : {
		test : "green"
	}
});

var color1 = reg.v("colors");
console.log('color1 initially ya:' + color1.test);
color1.test = 'red';
console.log('color1 after:' + color1.test);
var color2 = reg.v("colors");
console.log('color2 initially:' + color2.test);

The result:

color1 initially:green
color1 after:red
color2 initially:red

I expect I'll have to alter my registry to clone any objects returned or I'll be unable to store any objects in it safely.

I really wish Javascript had some of the magic methods that PHP has such as [man]call[/man], [man]get[/man], [man]__set[/man]. Can anyone suggest Javascript techniques that might simulate these magic methods? I'd love to be able to fetch a complex object from my registry and alter it locally without threatening the rest of my application.

I hope also to keep my code less verbose. I'm starting to think my registry design is annoying because one must fetch each registry element separately into its own variable in local scope if one wants to make use of it. I'd much rather I could just refer directly to an element in the registry. I expect I'll create a method that just returns a clone of the entire registry but I worry about passing around cloned copies of largish registry objects.

this.get = function() {
    return cloneObject(_registry);
};