Class design using the behaviour tree diagram system to create jQuery plugin class models

In a previous post I wrote about my experience using behaviour trees diagram system with Javscript. The result of which was quite good. However I still found the way I was coding the behaviors from the chart into the function to be quite inefficient. Furthermore the singleton class design I was using to implement my the Javascript functionality in Passbook did not fit well into the object oriented paradigm that behaviors trees were intended for, which meant that my class models became much larger than it needed to be.

One idea that sparked my interest in further research into create good Javascript objects was seeing how a complex object such as a jQuery calendar date picker could be have a class model that was completely modularized to the point where one could attach it to pretty much any input on the page and have it set up to fill data for that input. My research led me to find the basic pattern on how to create a jQuery plugin. The jQuery plugin scoping actually makes coding objects in jQuery very easy with minor syntactic overhead. Using my previous example the design that combined state and actions can be combined into one object and method.

State:View > Action:Edit > Behavior:View.Title.Hide, Editor.Attach(View.Title)
State:Edit > Action:Save > Behavior:Editor.Controls.Hide, Editor.Loading.Show, Editor.Form.Submit

Can become:

As you can see, the design now becomes a nice bridge between the mockup and the final class model. The abstraction of the actual code becomes more relevant and less confusing by removing state information. And this charge can be created by simplifying reviewing mockups and all user interaction elements on the mockup. For those interested the above chart was created using the free and very fast mind mapping tool MindNode (OS X).

I will write about how to create fully modular object oriented code in jQuery using the plugin pattern in another post. However I can state now that it took me a few implementations before I was fully rid of the singleton class design habit that was developed from reading too much simple Javascript even handling examples. For now I will show you skeleton plugin code for the above object, which is really very elegant. Please note that the object name is now objectt to avoid conflicts with language reserved words.

(function($) {
$.fn.objectt = function() {
this.each(function() {
// Initialize object
var obj = $(this);
obj.title = obj.find('h1');
obj.loading = '<div><img src="loading.gif"/></div>';

// Events
obj.find('.edit').click(function() { edit(obj); });
obj.find('.save').click(function() { save(obj); });

function edit(obj) {
// Do stuff with obj here

function save(obj) {
// Do stuff with obj here

The above plugin can be called by calling $('.myobject').objectt(); when the document is ready and it shall be transformed from a simple HTML element into a Javascript enabled interactive object. Furthermore unlike singleton class models you can use this object on multiple matching elements and scoping and referencing the correct elements will not be an issue to be worried about.


Post a Comment