Sunday, September 14, 2008

My journey with jQuery- implicit iteration, instance and jQuery static functions

With all the issues I have with various WYSIWYG editor, I kinda decided I want to write my own. I know it sounds like a freak idea with so many of them exists already, but- programming is about happiness right? So I decided to hack thru this one. Actually its not a horrible rocket science task as the really basic things you need to know are:

  • You need an IFRAME to do editing on Firefox (I haven't test in IE yet)
  • The real trick is all about contentDocument().designMode='on'.

So it's not some dark magic for you to get an HTML editor- you relies on browser's mercy to give you this magic. Fortunately nearly most modern browser have this design mode thing supported, and surprisingly they work more or less consistent.

Ok I decided to use jQuery to help me a bit trying to compress the code I need to write. Actually its not a very successful attempt so far, as really what you have to write to get this editor working is not a lot about the strength of jQuery- selection and implicit iteration. But exploring such trick let me learn a lot more about how the jQuery magic and pattern works.

1. It's not always possible to use implicit iteration on your extension code. Sometimes they just not making sense. Don't let this idea of making fluent expression fool you. Some of the built in jQuery function (e.g. offset()) is not even returning a jQuery object at all.

2. You have to rely on jQuery static method extension if you want to publish your own static helper function. Otherwise, don't write them inside jQuery closure, they just won't be available to anyone.

3. Your instance function extends from jQuery.fn.extend({key function hash}), they will all become available with the jQuery objects you created, but if you want to keep a fluent chain method call, that's not always possible depending the nature of your function. If it just not making sense, forget about it (again see the offset() example you will understand). In general you only use chain methods for things just did some simple modifications on your DOM- adding style, update content, which makes perfect sense to chain a few methods together.

If I have wrote anything nonsense, please don't hestitate to comment :) I would really like to learn from all of you.

0 comments: