I want to use some good coding standards for the current project. The overall outcome is achievable now (in my project), but i want help regarding following a better approach.
I’ll try my best to explain what I am doing.
I have a xml Response for System and Product information (The xml is too big to accomodate here 1MB approx)
I have two panes left Pane (an accordion listing what is to be clicked) right Pane (JQUERY UI TABS inside which is JPANEL accomodating JQGRID inside it)
-
When the left Pane any item is clicked 3 params are sent, id of the anchor tag, Service Name & an alias (which decides what tab content should be) to
function infa9Services(id,sname,alias){...}<a id="infa9Services"\>DataIntegrationService</a>//this is the Service Namealias is coming from a map, which maps service Name to a alias DIS (in one case)
-
The Right Pane contains a
<div id="detailTable"></div>which gets populated frominfa9Servicesfunction.
Content of infa9Services function
var tabs = [ "Service", "Property", "Additional Info" ];
//Above array creates the Jquery Tab heading
var lis="";
var divs="";
var panels=[];
var tpanels="";
var adtrs="";
var service=[];
var property=[];
var aDoctor=[];
var homeFileList=[];
var ssaprlist=[];
var refData=[];
fetching data from xml response xml
$(xml).find('product').each(function(){
$(this).children('DomainMeta').each(function(){
$(this).children('Service').each(function(){
if(sname==$(this).attr('name')) //There are more than one service in the xml, so checking which Service name was clicked, in this case DataIntegrationService
{
$(this).children('OptionGroup').each(function(){
if($(this).attr('name').toLowerCase().indexOf("service") >= 0)
{
$(this).children('Option').each(function(){
var srow={};
srow.name=$(this).attr('name');
srow.value=$(this).attr('value');
service.push(srow);
});
}
else
{
$(this).children('Option').each(function(){
var prow={};
prow.name=$(this).attr('name');
prow.value=$(this).attr('value');
property.push(prow);
});
}
});
}
});
});
Now here I am checking using if else what alias is it, based on which i’ll fetch data
if(alias==="PCIS")
{
$(this).children('addressDoctor').each(function(){
$(this).children('addressDoctor_info').each(function(){
//adding xml values to aDoctor array
});
});
$(this).children('homefilelist').each(function(){
$(this).children('homefilelist_info').each(function(){
//adding xml values to homeFileList array
});
});
}
else if(alias==="PCRS")
{
$(this).children('homefilelist').each(function(){
$(this).children('homefilelist_info').each(function(){
//adding xml values to homeFileList array
});
});
}
else if(alias==="DIS")
{
$(this).children('addressDoctorEngVerDIS').each(function(){
adtrs='<tr width="100%">'+
'<th class="thPanel" align="left" valign="top" width="40%">'+$(this).children('addressDoctorEngVer_info').attr('name')+'</th>'+
'<td align="left" width="60%">'+$(this).children('addressDoctorEngVer_info').attr('value')+'</td>'+
'</tr>';
});
}
else if(alias==="CMS")
{
$(this).children('referenceDataLocation').each(function(){
$(this).children('referenceDataLocation_info').each(function(){
//adding xml values to refData array
});
});
$(this).children('ssaprDirList').each(function(){
$(this).children('ssaprDirList_info').each(function(){
//adding xml values to ssaprlist array
});
});
}
});
dynamically adding li ‘s (for UI tabs)
$.each(tabs, function(i, item) {
lis+='<li><a href="#tabs-'+i+'">'+item+'</a></li>';
});
dynamically adding div’s with class=”class” (for JPanel) is there a better way here?
panels[0]='<div title="General Information" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblService" width="100%"></table>'+
'<div id="ServiceGridpager"></div>'+
'</div>'+
'</div>';
panels[1]='<div title="General Information" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblProperty" width="100%"></table>'+
'<div id="PropertyGridpager"></div>'+
'</div>'+
'</div>';
Here again I am making use of if else what alias is it, based on which i’ll populate data from the vars which were fetched before
if(alias==="PCIS")
{
panels[2]='<div title="Address Doctor" class="class" >'+
'<table class="jpanelTable">'+
'<tbody>'+adtrs+'</tbody>'+
'</table>'+
'</div>';
panels[2]+='<div title="Address Doctor Configuration" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblAdditional" width="100%"></table>'+
'<div id="AdditionalGridpager"></div>'+
'</div>'+
'</div>';
panels[2]+='<div title="Home File List" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblHomeFileList" width="100%"></table>'+
'<div id="HomeFileListGridpager"></div>'+
'</div>'+
'</div>';
}
else if(alias==="PCRS")
{
panels[2]='<div title="Home File List" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblHomeFileList" width="100%"></table>'+
'<div id="HomeFileListGridpager"></div>'+
'</div>'+
'</div>';
}
else if(alias==="DIS")
{
panels[2]='<div title="Address Doctor" class="class" >'+
'<table class="jpanelTable">'+
'<tbody>'+adtrs+'</tbody>'+
'</table>'+
'</div>';
}
else if(alias==="CMS")
{
panels[2]='<div title="Reference Data Location" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblRefData" width="100%"></table>'+
'<div id="RefDataGridpager"></div>'+
'</div>'+
'</div>';
panels[2]+='<div title="SSAPR" class="class">'+
'<div class="jqUIDiv">'+
'<table id="tblSSAPR" width="100%"></table>'+
'<div id="SSAPRGridpager"></div>'+
'</div>'+
'</div>';
}
else
{
panels[2]='<div title="Additional Information" class="class" >'+
'<table class="jpanelTable">'+
'<tbody>'+
'<tr width="100%">'+
'<td align="left" style="word-break:break-all;">'+NA+'</td>'+
'</tr>'+
'</tbody>'+
'</table>'+
'</div>';
}
Note: panel[0],panel1,panel[2] are contents of the 3 tabs
dynamically adding div ‘s (content for Jquery UI Tab)
$.each(panels, function(i, item) {
divs+='<div id="tabs-'+i+'">'+item+'</div>';
});
adding the whole thing to detailTable (Right Pane)
$('#detailTable').empty();
$('#detailTable').html('<div class="titleBlue"><a href="#" class="navA">Configuration</a>><a href="#" class="navA">'+productname+'</a>>'+sname+' ('+alias+')</div>');
$("<div id='loadingDiv'><table id='detailTable' width='100%'><tbody><tr><td align='center'>Please wait</td></tr><tr><td align='center'><img src='/csm/view/include/images/loading.gif' alt='Loading'/></td></tr></tbody></table></div>").appendTo('#detailTable');
$('<div id="tabs">'+'<ul>'+lis+'</ul>'+divs+'</div>').appendTo('#detailTable').delay(10).queue(function(){
$('.class').jPanel({
'effect' : 'fade',
'speed' : 'medium',
'easing' : 'swing'
});
});
More.. JQGrids to populate tblService, tblSSAPR, tblRefData etc tables (not included here)
How can I make use of something like Factory or something more Generic in such a case? If suppose there are a lot of alias to be checked it will be very cumbersome to do it the way I am doing it currently. Any help would be appreciated. Thanks
Screen shot
Update
My XML content
<?xml-stylesheet type="text/xsl" href="csmclientinfa9.xsl"?>
<csmclient product="infa9" date="12/16/11 12:10 PM" version="1.0">
<system>
</system>
<product>
<DomainMeta>
<Service type="PCIntegrationService" name="TestPCInteg" version="" licenseName="lic_PCIS"> //THIS IS PCIS SERVICE
<ServiceProcess>
<Node name="N_1a63931"></Node>
<PreStartCommand> null</PreStartCommand>
<PostStartCommand> null</PostStartCommand>
<JvmOptions> </JvmOptions>
<OptionGroup name="IntegrationServiceProcessOptions">
<Option name="Codepage_Id" value="4" ></Option>
<Option name="$PMSourceFileDir" value="$PMRootDir/SrcFiles" ></Option>
</OptionGroup>
</ServiceProcess>
<OptionGroup name="IntegrationServiceOptions">
<Option name="ServiceResilienceTimeout" value="180" ></Option>
</OptionGroup>
</Service>
<Service type="DataIntegrationService" name="TestDIS" version="" licenseName="lic_DIS"> //THIS IS DIS SERVICE
<ServiceProcess>
<Node name="N_1163931"></Node>
<PreStartCommand> null</PreStartCommand>
<PostStartCommand> null</PostStartCommand>
<JvmOptions> -Dfile.encoding=UTF-8 -server -Xms256M -Xmx512M -XX:GCTimeRatio=19 -XX:+UseConcMarkSweepGC -XX:+UseParNewGC -XX:ParallelGCThreads=4 -XX:NewRatio=2</JvmOptions>
<OptionGroup name="SQLServiceOptions">
<Option name="MaxConcurrentConnections" value="100" ></Option>
<Option name="MaxPlanCacheSize" value="100" ></Option>
</OptionGroup>
<OptionGroup name="WebServiceOptions">
<Option name="MaxPlanCacheSize" value="100" ></Option>
</OptionGroup>
</ServiceProcess>
<OptionGroup name="SQLServiceOptions">
<Option name="ConnectionCleanupPeriod" value="30000" ></Option>
<Option name="DTMKeepAliveTime" value="0" ></Option>
</OptionGroup>
<OptionGroup name="CoreServiceOptions">
<Option name="SafeModeLevel" value="0" ></Option>
</OptionGroup>
</Service>
</DomainMeta>
<homefilelist>
<homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='idp' group='support' fsize='61597' date='22 Mar 2011' filename='libpmwspsvrcmn.so' />
<homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='idp' group='support' fsize='21778' date='22 Mar 2011' filename='libpmorablk.so' />
</homefilelist>
<addressDoctor filename='AD100.cfg'>
<addressDoctor_info name='MemoryUsage' value='1048' />
<addressDoctor_info name='PreloadingMethod' value='MAP' />
</addressDoctor>
<addressDoctorEngVerPCIS>
<addressDoctorEngVer_info name='EngineVersion' value='5.2.5' />
</addressDoctorEngVerPCIS>
<addressDoctorEngVerDIS>
<addressDoctorEngVer_info name='EngineVersion' value='5.2.6' />
</addressDoctorEngVerDIS>
<referenceDataLocation location='/home/idp/av/default'>
<referenceDataLocation_info permission='-rw-r--r--' hardlink='1' owner='idp' group='support' fsize='196' month='Aug' date='2' time='11:06' filename='copyright.txt'/>
</referenceDataLocation>
<ssaprDirList>
<ssaprDirList_info permission='-rw-r--r--' hardlink='1' owner='idp' group='support' fsize='2737558' month='Oct' date='14' time='2010' filename='turkey.ysp' />
</ssaprDirList>
</product>
</csmclient>
More Updates
var aDoctor=[];
var adtrs="";
var homeFileList=[];
if(alias==="PCIS")
{
$(this).children('addressDoctorEngVerPCIS').each(function(){
adtrs='<tr width="100%">'+
'<th class="thPanel" align="left" valign="top" width="40%">'+$(this).children('addressDoctorEngVer_info').attr('name')+'</th>'+
'<td align="left" width="60%">'+$(this).children('addressDoctorEngVer_info').attr('value')+'</td>'+
'</tr>';
});
$(this).children('addressDoctor').each(function(){
$(this).children('addressDoctor_info').each(function(){
var adevrow={};
adevrow.name=$(this).attr('name');
adevrow.value=$(this).attr('value');
aDoctor.push(adevrow);
});
});
$(this).children('homefilelist').each(function(){
$(this).children('homefilelist_info').each(function(){
var row={};
isPresent=true;
row.permission=$(this).attr('permission');
row.hardlink=$(this).attr('hardlink');
row.owner=$(this).attr('owner');
row.group=$(this).attr('group');
row.fsize=$(this).attr('fsize');
row.date=$(this).attr('date');
row.filename=$(this).attr('filename');
homeFileList.push(row);
});
});
}
/*moving on for HTML construction, panels[..]
panels[0] is for 1st jquery ui tab
panels[1] is for 2nd jquery ui tab
panels[2] is for 3rd jquery ui tab*/
/*I am also using jqGrid, so I am giving one example for PCIS, how I am using aDoctor array */
if(alias==="PCIS")
{
//Additional Information
if(aDoctor.length>0)
{
jQuery("#tblAdditional").jqGrid({
datatype: "local",
data: aDoctor,
colNames:['Name','Value'],
colModel:[
{name:'name',index:'name', align:"left"},
{name:'value',index:'value', align:"left"}
],
pager : '#AdditionalGridpager',
rowNum:10,
rowList:[10,50,100],
scrollOffset:0,
height: 'auto',
autowidth:true,
viewrecords: true,
gridview: true
});
jQuery("#tblAdditional").setGridParam({rowNum:10}).trigger("reloadGrid");
jQuery("#tblAdditional").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
}
else //i am displaying none in the table
}
//So now my panel is complete for PCIS, if you refer my question, all code is available :) I know it's really big, but this is my 1st project and I want it to be better than this :) Thanks
The Factory design pattern must have a switch (
if/elseblock or associative array) under the hood anyhow. You won’t ever shorten code by using it. The only benefit you’ll get here is that you might hide away or separate some of that long code. Returning a function from another function, or returning an array where one of the properties is a function (set in the factory) is about as close as you can get to this pattern in JavaScript. The code sample below show something very much like a factory that is just as good in the JavaScript case, and might be slightly less confusing.I’m not sure what you mean by Generic. If you’re referring to “generics”, ala Java or C#, then it won’t help you in this scenario. Generics in those languages help you get around static typing and avoid duplicating classes. You’re not using classes at all here.
If you’re simply trying to avoid repeating yourself, you should look for a functional refactor here. See what repeats, and what doesn’t. Figure out how you can loop or map to the stuff that doesn’t repeat, and write the code that does repeat only once.
For example, I’d use an associative array to map strings to functions for your big
if/elseblock, and I’d extract that child-looping code into a more generialized function:In this case I’d also recommend you name each of those handlers, and build the map using named functions. I just wanted to show you visually how much code compression you get from this.
You should be able to do similar things for your long strings of HTML that you’re building. If they follow a general pattern, make a function for them, and extract the parts that change into parameters that you pass in.
And you generally shouldn’t be building styles into your elements (e.g.
align="left" valign="top" width="40%"). You should use style sheets that apply to those specific items, applying only CSS classes when necessary, so that you to specify that in only one place. That should shorten a lot of the element creation code, and might let you use jQuery DOM creation to avoid messy string concatenation code.All refactoring of long code boils down to an application of the same principle – find out what repeats, and what doesn’t repeat. Extract the part that repeat, and build an iterable or indexable structure out of the part that doesn’t repeat.
To start learning how to do generalized refactoring in languages using a Functional Programming style, I suggest you watch the SICP lecture videos. They use LISP, but teach you it while you’re watching the videos, and the principles apply to every language out there. That language lends itself extremely well to this type of refactoring, which is why he uses it.
You could also look into CoffeeScript, which allows you to take java code and shrink it into a more compact syntax 🙂 It compiles back into pretty-printed JavaScript, so you don’t have to worry about server impact, installing code on client boxes, etc.
Also, check out a few of these links for more reading on general code refactoring: