Categories


Archives


Recent Posts


Categories


jQuery Plugin: Objective C Learning Tool: Part 3

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

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

  1. Our Javascript source file is named wrong

  2. Our “private” function definitions are missing semicolons at the end

  3. We don’t return a jQuery collection

  4. 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

Originally published January 18, 2009