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.

I am writing a book: 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...