Frustrated by Magento? Then you’ll love
This is Part 3 of on ongoing series. Part 1 and part 2 are still available.
We now have an unobtrusive jQuery based Javascript widget. We don’t, however, have a true jQuery plugin. Specifically
- Our Javascript source file is named wrong
- Our “private” function definitions are missing semicolons at the end
-
We don’t return a jQuery collection
-
We’re assuming a single matched element, rather than iterating over the matched elements with this.each
Javascript File Name
By giving the javascript file a name in the
jQuery.pluginname.js
form, we’re saying to the world
Hey, this isn’t some arbitrary javascript file, it’s a
jQuery plugin. It behaves in a certain way, and if you
use other plugins you can use this one exactly the same way
“The World” includes not only other Javascript developers, but automated programs that search the web and other computer systems. We’re adding semantic meaning to something that was, as far as anyone else knew, just some arbitrary bit of Javascript.
Missing Semicolons
It’d be easy to write this one off as an arbitrary requirement of some pedantic code fascist, but like most rules it doesn’t exist to make your life more difficult, it exists to make your code more useful.
Without ending every line with a semicolon, there’s a good chance that some of the Javascript minimizers on the market will chew your code up and spit something out that doesn’t work. The decision to have the javascript interpreter/compiler “correct” semicolon omissions was a well intentioned idea, but in practice it creates enough ambiguity in code to cancel out any benefit. The Robustness Principle has questionable value when applied to a code interpreter and/or compiler.
Returning a jQuery Collection Object
This one is a glaring omission, and has significant impact on the use of your plugin. One of the huge advantages of jQuery is chaining methods together.
$('.foo').html("FooBazBar").css('color','red');
This works because each jQuery function/method returns another jQuery collection for the next chained function/method to operate on. If you don’t return a jQuery collection, you effectively break the chain.
Iterating Over Matched Elements
This was an explicit decision I made at the beginning of the project. It’s often faster to whip out a simple prototype that works on a single element than one than operates safely on many elements. Safely in this case means event handlers get setup correctly, and CSS rules can be explicitly applied within the namespace of a single ID.
We’re going to leave this one as-is for the moment, but return to the topic in our wrap-up next time.
Latest Widget
//fake method to past in the box below...
-(void) this:(int)param is:(NSString)param2 an:(NSObject)param3 example:(NSArray)param4