Skip to page content or Skip to Accesskey List.


Main Page Content

Code Encapsulation Your Stress Free Future

Rated 3.89 (Ratings: 0)

Want more?

  • More articles in Code

Seb Potter

Member info

User since: 22 Apr 1999

Articles written: 19

If you're using Javascript functions to populate HTML tables, etc., and you find you have a lot of HTML mixed with your code, stop!

Encapsulation is the process of separating out functions within your code, but also describes separating the function of your code from a the form (or design) of your page. Instead of embedding the HTML in your function calls, export the data that you need from your function as an object, and then use simple control loop to iterate through that object and populate your page within the HTML.



function blahBlah(myInput) {

for (i=0; i<3000; i++) {

myname = <result of series of operations>;

myurl = <result of a series of operations>;

myObject[i] = {name:name, url:url};


return myObject;



Then in your HTML, you just need the following, regardless of the complexity of the previous functions:



<td>page name</td>




var myObject = blahBlah(someInput); var ol = myObject.length;

for (i=0; i<ol ; i++) {



<td><% = myObject[i].name %></td>

<td><a href="<% = myObject[i].url %>">link</a></td>






Some good things about this method:

  1. You can totally separate your code from your HTML, allowing designers to change the HTML without giving you a heart-attack.
  2. The complexity of your function to populate the object can be hideous without you needing to worry about fitting it to the design.
  3. Because your enumerators (like the variable i) are stored at function level, there's no problem with scope.
  4. The function is totally reuseable within other HTML pages that have a different design without requiring a rewrite.
  5. Dreamweaver won't choke on your code and mangle it.
  6. Makes debugging incredibly easier.

Seb is a Jedi Master in the art of creating sites and keeping servers running. This often means hitting them repeatedly with forces that defy rational explanation, though he prefers to descibe it as "administration". When he's not practising his percussive skills on E450s and AS400s, he can be found masquerading as the senior developer for some widely varied clients. It's still not certain whether or not the meanings of CMS, CRM, and B2B have penetrated the alcoholic fog enveloping his brain, but he makes convincing noises to customers about XML, XSLT, Python, J2EE, PHP, Perl, C++, and OpenGL.

Seb has been in the web game pretty much since it began, and still has fond memories of the time when a web could be swept aside with a duster and spam was pork luncheon meat. Despite being the developer of one of the first commerce sites in Europe, he has yet to make any real money.

Being English, Seb doesn't like SOAP, but instead has recently discovered something called ZOPE. Zope is a platform that runs Plone which he thinks is the coolest thing since high-performance, real-time 3D APIs, which he often writes small games in.

Seb lives in the best little city in the world, and used to commute 5 hours a day on British trains. He is subsequently immune to all forms of torture techniques.

The access keys for this page are: ALT (Control on a Mac) plus: is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.