Construct Javascript JQuery HTML OOP re-usable controls

Begin

The goal of this article is to outline few thoughts on creating re-usable Javascript/JQuery and HTML based web controls.

Through my recent NodeJs development, I noticed my needs of creating similar web/HTML control in various part of the project. As seasoned programmers would do, I began to think about re-usability of the code and also the OOP approach.

As Javascript/HTML programmer will know, the OOP isn't an automatic thing in Javascript/HTML development. After few days of pondering and trying, I was able to come up with a scheme and that is what this article is all about.

First of all, let me clarify what I mean by a 'control'. When I said a control, what I really mean is a group of basic/HTML control been considered as a basic operation unit that can be deployed or re-used in various parts of projects - in a way, it is actually a 'composite control'. For example, you can consider a set of html textbox element (i.e. ) arranged in a html table element as a spreadsheet control. You may even include few buttons as part of that control. You can then use it in various parts of projects.

In my case, one of the control looks like this:

As shown in the screenshot, my control consists of quite few html control/elements and they interacted with each other as a unit.

With Javascript in mind, obviously, we would like to capture event handling and needed data in a Javascript 'class/object'. This can be achieved by using the function and prototype construct of the Javascript language:

  cClass = function (Data) {
    this.Data = Data;
  }
  cClass.prototype.Function_1 = function (argument, ...) {
    ...
  }

The functions would include all the event handling functions and other functions needed for operation of the control. You may also include a function that construct all the html elements.

A control being a control is that you can use it in various places in your projects. A very important requirement for being able to do that is being able to assigned an ID to each instance of the control. Programming code can, then, use the ID to perform tasks on the correct instance of a control.

For html controls, they can all have an ID attributes. It is, therefore, possible to assign different IDs for each instance of the control and this can be done through the function that construct the html elements.

A better approach, however, in my opinion, is to wrap each instance in a div element with instance ID. With this approach, you would have the option of building the html manually by copying html elements into an instance div element instead of relying on a function to build the html elements.

Once controls are in place, program codes need to have ways to access html elements inside an instance. This is where the JQuery come into play. By using the syntax:

  $('#InstanceID #ElementID')

the program code can access elements inside an instance.

There are few other details to be observed while making the code work. But, in essence, this basic structure should provide you a re-usable control.

End