Best practice for ordering a collection of key/value pairs in javascript?

Question

what would be an efficient (and userfriendly) way to realize the following in javascript/jQuery?

Depeding on the mime-type of a file, a callback should be executed. The callback is defined by the developer by providing a mime-type description with optional wildcards (e.g. text/javascript, text/*, */*) and the callback itself. There must be a specified order in which the declared types are matched against the given mime-type of the file. For example must text/plain have a higher priority than text/*.

Here some ideas:

Using a simple object

var handler = {
 'text/javascript' : callback0,
 'text/*' : callback1
}

This would be the most intuitive solution, but the ordering is not guaranteed.

Maintain two lists

var order = ['text/javascript', 'text/*'];
var handler = [callback0, callback1];

This is would be hard to maintain if there are more than two or three types and you are using anonymous functions as callbacks.

Adding an index by wrapping the callback into an object

var handler = {
  'text/javascript' : {index: 0, callback0},
  'text/*' : {index: 1, callback1}
};

... change thousands of index-properties when inserting an item at the beginning.

Using an array of arrays

var handler = [
  ['text/javascript', callback0],
  ['text/*', callback1]
];

This might me more userfriendly than the others, but there is no direct access for known mime-types without iterating over the elements (this would be nice-to-have).

So there are some ways to do the thing I want, but what would be the right way (and why)? Maybe someone has a pattern?

Best, Hacksteak

Teddy · Accepted Answer · 2011-06-21T12:56:31.950

2

I would use the 'simple object' solution AND the order array form the 'maintain two lists' solution.

Iterate through the order array with a block of code that uses the handler simple object to do something that either breaks the loop or continues to the next loop iteration.

EDIT TO RESPOND TO A COMMENT

I agree with your comment. I would do something like this to make it just one variable:

var handlers = {
  handler: {
    'text/javascript': callback0,
    'text/*': callback1
  },
  order: ["text/javascript", "text/*"]
};

Although I would pick better names for the handlers variable and/or the handlers.handler property.

ANOTHER RESPONSE TO ANOTHER COMMENT

Maybe you should just modify handlers.handler and handlers.order one-mime-type-at-a-time:

var handlers = { handler: {}, order: [] }; // initialize as empty

// add 'text/javascript' mime type
handlers['text/javascript'] = callback0;
handlers.order.push('text/javascript');

// add 'text/*' mime type
handlers['text/*'] = callback1;
handlers.order.push('text/*');

That method fills a little repetitive, but should be easy to maintain in the future. If you want, you can write a function that adds a new property to handlers.handler and appends a new mime-type to handlers.order.

edited Jun 21 '11 at 12:56

answered Jun 20 '11 at 18:50

Teddy

18,357
2
30
42

Thank you for your reply. The combination you mentioned offers direct access and keeps the ordering. The only thing I don't like is the redundancy of the types. IMHO this is a potiential point of error when changing something. – hacksteak25 Jun 20 '11 at 19:46
After your edit there is still the redundancy of the mime-types. In general I think it must be absolutly avoided. That is my very personal opinion. In the past years I worked on projects where redundancy seemed to part of the conceptual design. It is horrible to maintain. Don't want to think about situations where a third developer should refactor and splits up the two definitions to different places. – hacksteak25 Jun 20 '11 at 20:29
I don't understand. I used the sample mime-types from your original question. – Teddy Jun 20 '11 at 20:52
If you introduce a new type (e.g. image/svg) you have to write it twice (to the 'handler' and the 'order' var). There are some risks in doing so. One is just to forget one of the two entries. Furthermore, someone might change image/svg to image/jpeg. That change has to be done at both vars. That might seem trivial but in practice those kind of error may cost much time and money to find. As I said in my first comment, your code will work great, but I don't like the way how it is done (please don't hate me ;) ). – hacksteak25 Jun 20 '11 at 21:06
Finaly I decided to do it with your solution in the background. The developer has to define an array as mentioned under "Using an array of arrays" in my question. IMHO this is the most friendly syntax, avoiding any redundant information. Internaly this array is transformed to the structure you described. – hacksteak25 Jun 22 '11 at 22:09

score 1 · Answer 2 · edited May 23 '17 at 12:27

1

It seems that ordering on objects is in insertion order on most vendors, except for V8 which is true except for numerical indices. See the references below.

I probably wouldn't be doing any looping. I would probably do something like this:

var handler = {
    text: {
        javascript: callback0,
        '*': callback1
    },
    '*' : {
        '*': callback3
    }
};
var mime = 'whatevs/whatevs'.split('/');
var callback = handler[mime[0]][mime[1]] || handler['*']['*'];
callback();

References

edited May 23 '17 at 12:27

Community

1
1

answered Jun 20 '11 at 19:44

kzh

19,810
13
73
97

I did not think about a tree like structure but it seems to be good approach (even if this questions title would not fit anymore ^^). – hacksteak25 Jun 20 '11 at 20:48
Hmm, the tree structure seems to me less flexible than a list. XML types (e.g. image/svg+xml) are not easy to address in a tree. You can add two childs (svg and svg+xml) or introduce an optional second child level. At the moment I don't know if I need to take care about it or just strip it... need some time for thinking :) – hacksteak25 Jun 20 '11 at 21:24
But, I do believe that I answered your question in the first part, I just added extra. :-) – kzh Jun 21 '11 at 00:18

Best practice for ordering a collection of key/value pairs in javascript?

2 Answers2

References