Best Practices Object Oriented Javascript Method: How Do I Customize My Objects for the Following

Question

I decided that I needed to improve my JavaScript programming skills as well as my OO skills. I am currently reading some books, but it is sometimes difficult to get an idea of ​​this theory without first seeing practical examples. So, I have a theoretical question about "best practices" for the following scenario ...

I would like to create an OO script that displays a list of searchtag entries received from the server. I also want to be able to edit each search entry.

I am currently doing this procedurally with a little help from the jQuery library:

I am accepting a JSON encoded list of searchtag entries from the server. It looks like this:

[ { "searchTagName" : "tagOne", "searchTagID" : "1" }, { "searchTagName" : "tagTwo", "searchTagID" : "2" }, { "searchTagName" : "tagThree", "searchTagID" : "3" }, etc... ] 

I remove JSON directly in jTemplates to create the corresponding html, for example:

 $("#searchTagList") .setTemplateElement("template_searchTagList") .processTemplate(searchTagData); 

Finally, I want to be able to change each search criteria using the in-place editing method, so I add a pre-built editing method to each html element:

 $(".searchTag").editInPlace(); 

This works very well procedurally. And maybe the smartest thing would be to leave just one. :) But, for the sake of argument, how best to write something like that from the point of view of the OO.

Should I have one "searchTagList" object that has methods for each of the steps above?

 var searchTagList = { searchTagData: JSONdata, renderList: function () { /*send to jTemplates */ } bindEdit: function() { /* attach edit-in-place */ } } 

Or is it wrong? (It seems that all I'm doing is wrapping my procedural functions in an object.) Should I somehow parse the JSON data in the instances of each search object, and then bind the individual methods to each search tag? (This seems like a lot of overhead, without benefit).

I apologize in advance if it seems to me that I am collecting hair. But I really want to get it right in my head.

Thanks,

Travis

Answer 1

Actually, the jQuery examples you provided are not procedures, they are OO. In particular, they represent an implementation of clinging objects that come from the Fluid Software OO programming school.

The procedure will look something like this:

 var el = cssQuery("#searchTagList"); var templateObject = makeTemplate(el,"template_searchTagList"); processTemplate(templateObject,searchTagData); 

Functional would be something like:

 processTemplate( makeTemplate( cssQuery("#searchTagList"), "template_searchTagList" ), searchTagData ); 

jQuery did a pretty good job of objectifying the DOM API. It's okay to use it as inspiration in your own OO DOM library. Another that I would recommend you see is YUI3 (YUI2 is very procedural).

In particular, the common jQuery and YUI3 pattern:

 nodeListConstructor(query_string).nodeMethods(); 

Where they define an OO-like node object to wrap the DOM of HTMLElements, and then another OO-style nodeList object so that you can execute batch nodes. This, in my humble opinion, is a good design template.

Answer 2

Here you can use the Javascript Module template.

According to this template, your searchTagList definition would change to:

 var searchTagList = function() { searchTagData: JSONdata; return { renderList: function () { /*send to jTemplates */ }, bindEdit: function() { /* attach edit-in-place */ } }; }(); 

The two functions renderList and bindEdit will still have access to searchTagData, but will remain inaccessible to code outside the searchTagList module.

Note that the anonymous function runs immediately and returns an object containing two public methods (renderList and bindEdit) that form a closure in the private member of searchTagData.

You can read more about the module template here .