StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POObject oriented javascript best practices question: How should I configure my objects for the following
text
Body
copied!<p>I've decided I need to improve my javascript programming skills, as well as my OO skills. I am currently reading through some books, but sometimes it's hard to get a grip on the theory without seeing some practical examples first. So, I have a theoretical question about "best practices" for the following scenario...</p> <p>I would like to create an OO script that displays a list of searchtag records retrieved from the server. I also want to be able to edit each searchtag record in place.</p> <p>Currently I am doing this procedurally with a bit of help from the jQuery library: </p> <p>I accept a JSON-encoded list of searchtag records from the server. It looks like this:</p> <pre><code>[ { "searchTagName" : "tagOne", "searchTagID" : "1" }, { "searchTagName" : "tagTwo", "searchTagID" : "2" }, { "searchTagName" : "tagThree", "searchTagID" : "3" }, etc... ] </code></pre> <p>I dump the JSON directly into jTemplates to create the appropriate html, like so:</p> <pre><code>$("#searchTagList") .setTemplateElement("template_searchTagList") .processTemplate(searchTagData); </code></pre> <p>Finally I want it to be possible to modify each searchtag with an edit-in-place method, so I attach a pre-built edit-in-place method to each html element:</p> <pre><code>$(".searchTag").editInPlace(); </code></pre> <p>This works very well procedurally. And maybe the smartest thing would be to leave well enough alone. :) But, for the sake of argument, what is the best way to write something like this from an OO perspective. </p> <p>Should I have a single object "searchTagList" that has methods for each of the steps discussed above? </p> <pre><code>var searchTagList = { searchTagData: JSONdata, renderList: function () { /*send to jTemplates */ } bindEdit: function() { /* attach edit-in-place */ } } </code></pre> <p>Or is that incorrect? (It seems like all I'm doing is wrapping my procedural functions in an object.) Should I somehow be parsing the JSON data into instances of each searchtag, and then attaching individual methods to each searchtag? (This seems like a lot of overhead, for no gain.) </p> <p>Apologies in advance if it seems like I am picking at hairs. But I really want to get this stuff straight in my head.</p> <p>Thanks,</p> <p>Travis</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload