I need a plugin to manage window resize events on my site, so I wrote one. The text is columnised, but needs to have the correct columnisation to the current screen size. The columnise plugin I imported and extended doesn't do this natively very well. This is mostly a desktop concern (as apposed to mobile).
This is a very simple problem, there are some other implementations, but none seem to fit my coding style. I seem to have added alot more control flags than other implementations; but what I did is just normal OO.
- Create a jQuery plugin
- Ensure that the object issues I have in some of jQuery are not present.
- Ensure that this is a plugin, and won't wipe out any existing structures (see simpleton coding demos in various places).
- Ensure that enough logging is present, but optional.
- No memory leaks.
- As-ever, works in all browsers.
There are a number of template files online for writing jQuery modules. I read these, but my source is mostly from scratch.
After one day, I have written some code, and have a sample that demos it working. The code is currently uploaded. This is created as a jQuery plugin as there is jQuery code in my site already, and I would like to keep to a small number of frameworks.
The code mostly only makes sense applied to resize() events, although you can tell it to run on other events. One doesn't stack click() or close() events, for example.
As this is written in JS, I am using closures, and functions defined inside functions. My actual design is broadly the same as if I had implemented this in Perl or PHP. JS's awkward definition of 'this' is noted, but these days the language supplies primitives to work round this. Secondly, I am using prototype based objects rather than literal objects to attempt to make it more readable (I normally use literal objects).
Obviously this needs to work in all browsers, and obviously this needs not to leak RAM. The second clause is likely to be simple for this plugin, as its just timing code. I haven't noticed any leaks in the columniser script which is algorithmically more likely to have them.
My initial test script is installed as an external resource. After I wrote first copy of this resource, I added the library to my site. I then tested the library on all the browsers I had access to. I ran this on MSIE11, FF27, Opera12, Safari mobile, Chrome mobile, and Chrome33.
Although I am a software engineer, and generally write real unit tests; I have not here, as there is no decision making in the code. The attached sample does demonstrate functionality, does have a mock; but technically isn't a unit test, as it requires manual operation. This could be implemented via resizeTo(). There is value in manual review for features like this, as observation frequently leads to specification change.
UPDATE: Since I wrote this article I got a MSIE8 machine to test against. I now remember why I avoided JS for several years. Specifically the bind() function is necessary to write OO code properly. I am linking to a current version of jQuery, which doesn't seem to support MSIE8. To make jQuery not crash, I applied es5-shim first.