Saturday, April 20, 2013


I find having to riddle the Dom with stuffs dirty :(

Just because there is no other way to easily keep stuffs on the client side, we sometimes do this; and it is painful! having to unnecessarily pollute the DOM.

I was in such a situation a couple of months back where I was on a project in which stuffs, AKA. the states of the application were being pushed to the DOM attributes just to keep them.  Dirty!!!

I didn't want to continue doing this, so instead, I rolled up a little thingy that enabled me put my stuff out of the DOM. :)

I called it simpleJsMap.

simpleJsMap is a simple MAP-like implantation that enables me to keep and retrieve my stuffs easily in the memory via keys and values without having to set things in DOM attributes.

This felt a lot cleaner :)

simpleJsMap is on github so it can easily be grabbed, and hopefully, someone apart from myself finds it useful. :)

Getting Started

Include the simplejsmap.js file into your script. The variable simplejsmap would then be available. 
<script src="//path/to/simplejsmap.js" type="text/javascript"></script>
<script type="text/javascript">
// simplejsmap now available

I am a big fan of pure Javascript first before framework, thus simplejsmap is not dependent on any Javascript framework; not even jQuery :p

So once you have the script included you ready to go.

Function reference

var map = simplejsmap.createMap();

Creates the map like object and assigns it to variable map. You always start using simplejsmap by calling this function.

add(key, value)
var map = simplejsmap.createMap();
map.add("key1", "value one");
Adds stuff that needs to be kept. The stuff has a value and is associated with a key. Returns true if successfully added and false if not. If the key is already present, nothing happens and false is returned also. To modify the value of a key that is already added, update() function is used.

key and value can be of any Javascript type.

update(key, value)
var map = simplejsmap.createMap();
map.update("key1", "updated value");
Updates the value already added by a given key.  If the given key exists, its value is updated. If the key is not found, no update operationis done. False is returned instead.

var map = simplejsmap.createMap();
Removes a value accessible via the given key.  If the given key is already in existence, it is removed and true is returned. If not, false is returned.

var map = simplejsmap.createMap();
map.add("key2", "Hello World");
var val = map.get("key2");
Gets the value stored via given key.

var map = simplejsmap.createMap();
var len = map.getLength();
Returns the number of stuffs/keys that has been added.

var map = simplejsmap.createMap();
var keys = map.getKeys();
Returns all the keys that has been added as an array.

simpleJsMap can now be gotten via bower. Just use "bower install simpleMapJs" to add it to your project.

Are you a developer coming to typescript from other programming languages? Then you will find my upcoming book useful: TypeScript Beyond The Basics. Sign up here to be notified when it is ready.


dmikis said...

It seems that plain js Object do the job.

dade said...

Not really. a plain js instance object misses some of the methods you have in simpleJsMap...but yes, js Object can be used behind the scenes to implement this...