Begin
Asynchronous codes in program aren't uncommon. It, however, from time to time, cause confusions in tracking and debugging codes that surrounding them. For example, programmer may forgot that an asynchronous task have been kicked off and that certain operations or functions would not and could not be performed until the task is done. To help with this end, there is this idea of keeping the kick off and call back functions close to each other. An example of this will be the Microsoft C# async and await keyword pair. Javascript mostly using the anonymous function to keep the kick off and the call back function closer.
An scenario I run into is that a single button click triggers several asynchronous tasks and the logic is required to monitor the result of each asynchronous task in order to react. As we can see, in this case, even though keeping call backs with triggers is good, keeping all call backs close to each other is also beneficial.
My solution to the situation is to pass in a gathering function to each trigger/call-back pair and has each call-back eventually call the gathering function. In this way, with logic in the gathering function, we can monitor all the result in one central place and helps debugging codes too. If desired, it is also possible to move all call back logic in the gathering function for centralized logic checking and debugging.
End
Saturday, January 5, 2019
Thursday, January 3, 2019
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:
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:
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
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:
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
Subscribe to:
Posts (Atom)