jQuery name/value pairs and operations on them

I might be so bold as to think that some jQuery user, would appreciate to be able to do this :

There are several plugins that implement this idea of selecting by style properties too. Let me remind you , that both attributes and css properties objects exhibit W3C Attr interface. Aka DOM Attribute node. This fact is never made obvious explicitly in the spec, but both are nothing else but name/value pairs. Can you see that? I am sure you can. What is the purpose of the above ‘~’ selection extension ? The purpose is to be able to operate on css properties and attributes, uniformly, as on NAME-VALUE pairs. To be able to treat them both as a single abstraction, as the “name/value pair” abstraction. Why? So that one can program her own OPERATORS to operate on these values. As functoids of course. Imagine an jQuery plugin called ‘formula’. Its purpose is for users to be able to change values of name/value pairs using an user defined equation, or formula. For this to happen we need to select some name/value pair and then we need to pass them all to the formula. Imagined usage :

As you can see, formula() method is passed one argument, which is an json object. Which is made from attributes or style.properties as named in the selector. Format of this argument passed should be something like this :
And now the very interesting part. The value the function given to ‘formula()’ changes in the argument, is given back to the owner element. That is the value, and unit are changed on the owner element, after formula() worker has done its job. The new value is saved back to its attribute or style property. Compared to current code that uses ‘css()’ and ‘attr()’ this looks like an improvement.

Consider this requirement: “Using jQuery, make an element to fly (move) in a circle around a centre of the page”. I am sure you can think of an solution using css(“top” …) and css(“left” …. ) etc. Or even no jQuery. But that would be very painful. Centre of the element must be on the circular path, not its upper left corner, etc. Much more elegant to code with the ‘formula’ method:

I think using ‘formula’ will give me much cleaner and shorter code. This discussion suggests an fundamental behavioural change. Now all I have to do is to think how to implement it in some “awesome” way.

2 Replies to “jQuery name/value pairs and operations on them”

  1. That’s a very nice pattern! You can also generalize these “mutator functions” so they can be applied in multiple scenarios and the actual property (and setter function) will be only determined later based on the selector — it’s very elegant!
    But I think you’d better use $(“#sprite[~top!=auto]”); instead, the script I sent you works that way too!

  2. Ok, I will work on the whole idea more. Also: “formulas” are javascript functions, which are reusable, you are right. Very similar to c++ std (aka stl) “functors”. Consider this example:

Comments are closed.