JavaScript - Code reusability - Revision history

Philip Lacey at 19:24, 9 November 2014

2014-11-09T19:24:45Z

Philip Lacey at 14:49, 1 September 2014

2014-09-01T14:49:14Z

Philip Lacey at 14:48, 1 September 2014

2014-09-01T14:48:08Z

Philip Lacey: Philip Lacey moved page Code reusability to JavaScript - Code reusability without leaving a redirect

2014-09-01T14:44:33Z

Philip Lacey moved page Code reusability to JavaScript - Code reusability without leaving a redirect

Philip Lacey: Created page with "When building JavaScript code or any programming code, it is always advisable to consider re-usability (reusability). Wikipedia defines it as ''In computer science and softw..."

2014-09-01T14:43:37Z

Created page with "When building JavaScript code or any programming code, it is always advisable to consider re-usability (reusability). Wikipedia defines it as ''In computer science and softw..."

New page

When building JavaScript code or any programming code, it is always advisable to consider re-usability (reusability).

Wikipedia defines it as ''In computer science and software engineering, reusability is the likelihood that a segment of source code can be used again'' http://en.wikipedia.org/wiki/Reusability

In All n One we do everything we can to promote resuability of our code and advise our clients to do likewise.

Here is a simple example. Say we have a function that checks if a question is visible. If it is visible does it have content. Then it returns true or false.

<syntaxhighlight lang="javascript">

if (document.getElementById('tableid_1').style.display == 'inline-table'){
if (document.getElementById('strCDA_X_field_0_1').value.length == 0){
alert('Error in question 1');
}
}

</syntaxhighlight>

Say we reuse this code about 25 times in our Form. Then the requirement changes and we need to extend the functionality to also check if there are only numbers in the box. We now have 25 functions to update, just this one.

This useful validation function uses quite a few lines of code. It could be reusable by doing the following.

Firstly, take the concept and turn it into a function.

<syntaxhighlight lang="javascript">

function fn_ValidateFieldIfShown(){
if (document.getElementById('tableid_1').style.display == 'inline-table'){
if (document.getElementById('strCDA_X_field_0_1').value.length == 0){
alert('Error in question 1');
}
}
}

</syntaxhighlight>

The challenge is that it is still just looking at one field. So we add parameters to the function.

<syntaxhighlight lang="javascript">

function fn_ValidateFieldIfShown( strTableId, strField, strMessage){
if (document.getElementById(strTableId).style.display == 'inline-table'){
if (document.getElementById(strField).value.length == 0){
alert(strMessage);
}
}
}

</syntaxhighlight>

Now we can resuse this function simply by performing the call to the function. i.e.

<syntaxhighlight lang="javascript">

fn_ValidateFieldIfShown( 'tableid_1', 'strCDA_X_field_0_1', 'Error in question 1');

</syntaxhighlight>

For twenty five questions, your code goes from a total of 125 lines of code using 4800 characters to 33 lines of code using 2376 characters. This saving makes troubleshooting, code quality and testing a lot easier and it makes maintenance so much handier.

Yes it may add some overhead to your development as you start to use this practice, however it can save hours and hours of your development in the future and make your code far easier for others to manage.

← Older revision		Revision as of 19:24, 9 November 2014
Line 81:		Line 81:

	Yes it may add some overhead to your development as you start to use this practice, however it can save hours and hours of your development in the future and make your code far easier for others to manage.		Yes it may add some overhead to your development as you start to use this practice, however it can save hours and hours of your development in the future and make your code far easier for others to manage.
		+
		+
		+	[[Category:Module Specific:Form Management]]
		+	[[Category:Topic:JavaScript]]

@@ Line 25: / Line 25: @@
-=== Step 1 ===
+=== Step 1 - Create a function ===
@@ Line 45: / Line 45: @@
-=== Step 2 ===
+=== Step 2 - Use parameters ===
@@ Line 53: / Line 53: @@
 <syntaxhighlight lang="javascript">
-function fn_ValidateFieldIfShown( strTableId, strField, strMessage){
+function fn_ValidateFieldIfShown ( strTableId, strField, strMessage ) {
    if (document.getElementById(strTableId).style.display == 'inline-table'){
      if (document.getElementById(strField).value.length == 0){
@@ Line 72: / Line 72: @@
 <syntaxhighlight lang="javascript">
-fn_ValidateFieldIfShown( 'tableid_1', 'strCDA_X_field_0_1', 'Error in question 1');
+fn_ValidateFieldIfShown ( 'tableid_1', 'strCDA_X_field_0_1', 'Error in question 1' );
 </syntaxhighlight>

@@ Line 8: / Line 8: @@
-Here is a simple example.  Say we have a function that checks if a question is visible.  If it is visible does it have content.  Then it returns true or false.
+Here is a simple example.  Say we have a function that checks if a question is visible.  If it is visible does it have content.  Then it informs the user with an error message.
@@ Line 21: / Line 21: @@
 </syntaxhighlight>
-Say we reuse this code about 25 times in our Form.  Then the requirement changes and we need to extend the functionality to also check if there are only numbers in the box.  We now have 25 functions to update, just this one.
+Say we reuse this code about 25 times in our Form.  Then the requirement changes and we need to extend the functionality to also check if there are only numbers in the box.  We now have 25 functions to update, not just this one.  This useful validation function uses quite a few lines of code.  It can be made far more reusable by doing the following.
-This useful validation function uses quite a few lines of code.  It could be reusable by doing the following.
@@ Line 41: / Line 42: @@
 </syntaxhighlight>
@@ Line 57: / Line 62: @@
 </syntaxhighlight>

← Older revision	Revision as of 14:44, 1 September 2014
(No difference)