Chainvas: an elegant and tiny “crutch” that adds method chaining tools to any API

Thanks to the jQuery library since about 2006 (that is, about five years ago) no one needs to explain what method chaining is : this is the same programming technique in which object methods can be called one after another along a chain, as in jQuery.

The main advantage of this technique is a noticeable saving of efforts of the programmer. With it, the programmer does not have to re-write the name of the object repeatedly in this manner:

obj.(); obj.(); obj.(); 

Instead, the programmer can call all methods in a chain in one line:

 obj.().().(); 

If it seems to him that this kind of writing is worse readable by the person than the previous one (especially when methods appear, sometimes quite extensive), then the programmer can write the names of the methods from the new line (JavaScript allows this), but still save on the name object:

 obj .(1, 2, …) .(1, 2, …) .(1, 2, …); 

In practice, the possibility of such a technique is ensured by the fact that no method of the object returns the value undefined . Instead, if the method is a command, not a request (that is, it performs some action, and does not return some value), then at the end its author writes “ return this ” - this is what makes it possible to record the call of several commands in a row in the form chains.

As far as I know, the well-established Russian equivalent to the English phrase “method chaining” does not yet exist. Probably, we can talk about the "chain" or, for simplicity, the "chain" form of calling methods.
')
Convenience chain call is addictive. Well, the truth is: it is enough to program two or three weeks on jQuery - and ordinary APIs begin to annoy, even enrage, with their antediluvable inability to chain call. It also lacks the ability to set their properties as an object passed to a method similar to .css ({color: 'red', 'line-height': 1}) in jQuery.

Imagine, for example, how unusually comfortable it would be if you could draw chain calls in a manner like this on a canvas (<canvas>) :

 ctx.beginPath() .prop({ lineWidth: 2, strokeStyle: '#333' }).moveTo(0,0) .bezierCurveTo(50,50, 80,80, 100,100) .stroke().closePath(); 

And the tool for just such chain calls appeared - thanks to Lea Verou. Here it is:



The Chainvas library weighs only ≈1⅓ kilobytes after being processed by the minifiers, and yet its methods can provide a wrapper around all (or only some) methods of any object, providing a chain call to them. A pair of ready-made add-on modules is also attached to it, one of which (with a volume of 348 bytes) sets the wrapper around the API DOM, and the other (with a volume of 406 bytes) sets the wrapper of the canvases (<canvas>).

DOM wrapping allows you to make chain calls like the following:

 //   DOM (  ): document.body.appendChild( document.createElement('a') .prop({ 'href': 'http://leaverou.me', 'innerHTML': 'Lea Verou', 'title': 'Visit this awesome blog!', 'onclick': function(evt){ alert('gotcha!'); } }) .setAttribute('data-unicorns', '42') .addEventListener('mouseover', function(){ alert('don't do this'); }, false) ); //   CSSOM (  ): var css = document.body.style.prop({ color: '#245', fontFamily: 'Georgia, serif', textDecoration: 'underline' }).removeProperty('text-decoration').cssText; //    classList: element.classList .add('foo') .add('bar') .toggle('baz'); 

It looks good - but, of course, if you have jQuery, nobody needs it all. I would not bother with document.createElement ('a') instead of just $ ('<a />') , for example.

But a canvas wrapper (<canvas>) is a different matter. It not only provides a chain call to the canvas methods (an example of which I mentioned before mentioning Chainvas), which is not in jQuery, but also defines two useful helper methods: circle (x, y, radius) for drawing circles and roundRect (x, y, width, height, radius) for drawing rounded rectangles. (Here, “drawing” I call the definition of contour faces, after which you still need an additional call of stroke () or fill () to actually display.)

Sweet, sweet syntactic sugar.

It is not surprising, therefore, that the author herself called the library “Chainvas”.