How to make use of something like Factory in jquery/javascript
<p>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.</p>

<p>I'll try my best to explain what I am doing.</p>

<p>I have a xml Response for <code>System</code> and <code>Product</code> information (The xml is too big to accomodate here 1MB approx)</p>

<p>I have two panes <strong>left Pane</strong> (an accordion listing what is to be clicked) <strong>right Pane</strong> (JQUERY UI TABS inside which is JPANEL accomodating JQGRID inside it)</p>

<ol>
<li><p>When the <strong>left Pane</strong> any item is clicked 3 params are sent, <strong>id</strong> of the anchor tag, <strong>Service Name</strong> &amp; an <strong>alias</strong> (which decides what tab content should be) to <code>function infa9Services(id,sname,alias){...}</code></p>

<p><code>&lt;a id="infa9Services"\&gt;DataIntegrationService&lt;/a&gt;</code> //this is the Service Name</p>

<p>alias is coming from a map, which maps service Name to a alias <strong>DIS</strong> (in one case)</p></li>
<li><p>The <strong>Right Pane</strong> contains a <code>&lt;div id="detailTable"&gt;&lt;/div&gt;</code> which gets populated from <code>infa9Services</code> function.</p></li>
</ol>

<p>Content of <code>infa9Services</code> function</p>

<pre><code>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=[];
</code></pre>

<p>fetching data from xml response <code>xml</code></p>

<pre><code>$(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") &gt;= 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);
                        });
                    }
                });
            }
        });
    });
</code></pre>

<p>Now here I am checking using <code>if else</code> what alias is it, based on which i'll fetch data</p>

<pre><code>    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='&lt;tr width="100%"&gt;'+
                '&lt;th class="thPanel" align="left" valign="top" width="40%"&gt;'+$(this).children('addressDoctorEngVer_info').attr('name')+'&lt;/th&gt;'+
                '&lt;td align="left" width="60%"&gt;'+$(this).children('addressDoctorEngVer_info').attr('value')+'&lt;/td&gt;'+
            '&lt;/tr&gt;';
        });
    }
    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
            });
        });
    }

});
</code></pre>

<p>dynamically adding li 's (for UI tabs)</p>

<pre><code>$.each(tabs, function(i, item) {
    lis+='&lt;li&gt;&lt;a href="#tabs-'+i+'"&gt;'+item+'&lt;/a&gt;&lt;/li&gt;';
});
</code></pre>

<p>dynamically adding div's with class="class" (for JPanel) is there a better way here?</p>

<pre><code>panels[0]='&lt;div title="General Information" class="class"&gt;'+
            '&lt;div class="jqUIDiv"&gt;'+
                '&lt;table id="tblService" width="100%"&gt;&lt;/table&gt;'+
                '&lt;div id="ServiceGridpager"&gt;&lt;/div&gt;'+
            '&lt;/div&gt;'+
        '&lt;/div&gt;';

panels[1]='&lt;div title="General Information" class="class"&gt;'+
            '&lt;div class="jqUIDiv"&gt;'+
                '&lt;table id="tblProperty" width="100%"&gt;&lt;/table&gt;'+
                '&lt;div id="PropertyGridpager"&gt;&lt;/div&gt;'+
            '&lt;/div&gt;'+
        '&lt;/div&gt;';
</code></pre>

<p>Here again I am making use of <code>if else</code> what alias is it, based on which i'll populate data from the vars which were fetched before</p>

<pre><code>if(alias==="PCIS")
{
    panels[2]='&lt;div title="Address Doctor" class="class" &gt;'+
                    '&lt;table class="jpanelTable"&gt;'+
                        '&lt;tbody&gt;'+adtrs+'&lt;/tbody&gt;'+
                    '&lt;/table&gt;'+
                '&lt;/div&gt;';

    panels[2]+='&lt;div title="Address Doctor Configuration" class="class"&gt;'+
                    '&lt;div class="jqUIDiv"&gt;'+
                        '&lt;table id="tblAdditional" width="100%"&gt;&lt;/table&gt;'+
                        '&lt;div id="AdditionalGridpager"&gt;&lt;/div&gt;'+
                    '&lt;/div&gt;'+
                '&lt;/div&gt;';

    panels[2]+='&lt;div title="Home File List" class="class"&gt;'+
                '&lt;div class="jqUIDiv"&gt;'+
                    '&lt;table id="tblHomeFileList" width="100%"&gt;&lt;/table&gt;'+
                    '&lt;div id="HomeFileListGridpager"&gt;&lt;/div&gt;'+
                '&lt;/div&gt;'+
            '&lt;/div&gt;';
}
else if(alias==="PCRS")
{
    panels[2]='&lt;div title="Home File List" class="class"&gt;'+
                    '&lt;div class="jqUIDiv"&gt;'+
                        '&lt;table id="tblHomeFileList" width="100%"&gt;&lt;/table&gt;'+
                        '&lt;div id="HomeFileListGridpager"&gt;&lt;/div&gt;'+
                    '&lt;/div&gt;'+
                '&lt;/div&gt;';
}
else if(alias==="DIS")
{
    panels[2]='&lt;div title="Address Doctor" class="class" &gt;'+
                '&lt;table class="jpanelTable"&gt;'+
                    '&lt;tbody&gt;'+adtrs+'&lt;/tbody&gt;'+
                '&lt;/table&gt;'+
            '&lt;/div&gt;';
}
else if(alias==="CMS")
{
    panels[2]='&lt;div title="Reference Data Location" class="class"&gt;'+
                    '&lt;div class="jqUIDiv"&gt;'+
                        '&lt;table id="tblRefData" width="100%"&gt;&lt;/table&gt;'+
                        '&lt;div id="RefDataGridpager"&gt;&lt;/div&gt;'+
                    '&lt;/div&gt;'+
                '&lt;/div&gt;';

    panels[2]+='&lt;div title="SSAPR" class="class"&gt;'+
                '&lt;div class="jqUIDiv"&gt;'+
                    '&lt;table id="tblSSAPR" width="100%"&gt;&lt;/table&gt;'+
                    '&lt;div id="SSAPRGridpager"&gt;&lt;/div&gt;'+
                '&lt;/div&gt;'+
            '&lt;/div&gt;';
}
else
{   
    panels[2]='&lt;div title="Additional Information" class="class" &gt;'+
                '&lt;table class="jpanelTable"&gt;'+
                    '&lt;tbody&gt;'+
                        '&lt;tr width="100%"&gt;'+
                            '&lt;td align="left" style="word-break:break-all;"&gt;'+NA+'&lt;/td&gt;'+
                        '&lt;/tr&gt;'+
                    '&lt;/tbody&gt;'+
                '&lt;/table&gt;'+
            '&lt;/div&gt;';
}
</code></pre>

<p>Note: panel[0],panel<a href="http://i.stack.imgur.com/H8ct3.png" rel="nofollow">1</a>,panel[2] are contents of the 3 tabs</p>

<p>dynamically adding div 's (content for Jquery UI Tab)</p>

<pre><code>$.each(panels, function(i, item) {
    divs+='&lt;div id="tabs-'+i+'"&gt;'+item+'&lt;/div&gt;';
});
</code></pre>

<p>adding the whole thing to <code>detailTable</code> (<strong>Right Pane</strong>)</p>

<pre><code>$('#detailTable').empty();
$('#detailTable').html('&lt;div class="titleBlue"&gt;&lt;a href="#" class="navA"&gt;Configuration&lt;/a&gt;&amp;gt;&lt;a href="#" class="navA"&gt;'+productname+'&lt;/a&gt;&amp;gt;'+sname+' ('+alias+')&lt;/div&gt;');

$("&lt;div id='loadingDiv'&gt;&lt;table id='detailTable' width='100%'&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td align='center'&gt;Please wait&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td align='center'&gt;&lt;img src='/csm/view/include/images/loading.gif' alt='Loading'/&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;").appendTo('#detailTable');
$('&lt;div id="tabs"&gt;'+'&lt;ul&gt;'+lis+'&lt;/ul&gt;'+divs+'&lt;/div&gt;').appendTo('#detailTable').delay(10).queue(function(){
    $('.class').jPanel({
        'effect'    : 'fade',
        'speed'     : 'medium',
        'easing'    : 'swing'
    });

});
</code></pre>

<p>More.. JQGrids to populate <code>tblService</code>, <code>tblSSAPR</code>, <code>tblRefData</code> etc tables (not included here)</p>

<p>How can I make use of something like <strong>Factory</strong> or something more <strong>Generic</strong> in such a case? If suppose there are a lot of <strong>alias</strong> to be checked it will be very cumbersome to do it the way I am doing it currently. Any help would be appreciated. Thanks</p>

<p>Screen shot
<img src="http://i.stack.imgur.com/H8ct3.png" alt="enter image description here"></p>

<p><strong>Update</strong></p>

<p>My XML content</p>

<pre><code>&lt;?xml-stylesheet type="text/xsl" href="csmclientinfa9.xsl"?&gt;
&lt;csmclient product="infa9" date="12/16/11 12:10 PM" version="1.0"&gt;
    &lt;system&gt;
    &lt;/system&gt;
    &lt;product&gt;
        &lt;DomainMeta&gt;

            &lt;Service type="PCIntegrationService" name="TestPCInteg" version="" licenseName="lic_PCIS"&gt;    //THIS IS PCIS SERVICE
                &lt;ServiceProcess&gt;
                    &lt;Node name="N_1a63931"&gt;&lt;/Node&gt;
                    &lt;PreStartCommand&gt; null&lt;/PreStartCommand&gt;
                    &lt;PostStartCommand&gt; null&lt;/PostStartCommand&gt;
                    &lt;JvmOptions&gt; &lt;/JvmOptions&gt; 
                    &lt;OptionGroup name="IntegrationServiceProcessOptions"&gt;
                        &lt;Option  name="Codepage_Id" value="4" &gt;&lt;/Option&gt;
                        &lt;Option  name="$PMSourceFileDir" value="$PMRootDir/SrcFiles" &gt;&lt;/Option&gt;
                    &lt;/OptionGroup&gt;
                &lt;/ServiceProcess&gt;
                &lt;OptionGroup name="IntegrationServiceOptions"&gt;
                    &lt;Option  name="ServiceResilienceTimeout" value="180" &gt;&lt;/Option&gt;
                &lt;/OptionGroup&gt;
            &lt;/Service&gt;

            &lt;Service type="DataIntegrationService" name="TestDIS" version="" licenseName="lic_DIS"&gt;    //THIS IS DIS SERVICE
                &lt;ServiceProcess&gt;
                    &lt;Node name="N_1163931"&gt;&lt;/Node&gt;
                    &lt;PreStartCommand&gt; null&lt;/PreStartCommand&gt;
                    &lt;PostStartCommand&gt; null&lt;/PostStartCommand&gt;
                    &lt;JvmOptions&gt; -Dfile.encoding=UTF-8 -server -Xms256M -Xmx512M -XX:GCTimeRatio=19 -XX:+UseConcMarkSweepGC -XX:+UseParNewGC -XX:ParallelGCThreads=4 -XX:NewRatio=2&lt;/JvmOptions&gt; 
                    &lt;OptionGroup name="SQLServiceOptions"&gt;
                        &lt;Option  name="MaxConcurrentConnections" value="100" &gt;&lt;/Option&gt;
                        &lt;Option  name="MaxPlanCacheSize" value="100" &gt;&lt;/Option&gt;
                    &lt;/OptionGroup&gt;
                    &lt;OptionGroup name="WebServiceOptions"&gt;
                        &lt;Option  name="MaxPlanCacheSize" value="100" &gt;&lt;/Option&gt;
                    &lt;/OptionGroup&gt;
                &lt;/ServiceProcess&gt;
                &lt;OptionGroup name="SQLServiceOptions"&gt;
                    &lt;Option  name="ConnectionCleanupPeriod" value="30000" &gt;&lt;/Option&gt;
                    &lt;Option  name="DTMKeepAliveTime" value="0" &gt;&lt;/Option&gt;
                &lt;/OptionGroup&gt;
                &lt;OptionGroup name="CoreServiceOptions"&gt;
                    &lt;Option  name="SafeModeLevel" value="0" &gt;&lt;/Option&gt;
                &lt;/OptionGroup&gt;
            &lt;/Service&gt;

        &lt;/DomainMeta&gt;

        &lt;homefilelist&gt;
            &lt;homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='idp' group='support' fsize='61597' date='22 Mar 2011' filename='libpmwspsvrcmn.so' /&gt;
            &lt;homefilelist_info permission='-rwxr-xr-x' hardlink='1' owner='idp' group='support' fsize='21778' date='22 Mar 2011' filename='libpmorablk.so' /&gt;
        &lt;/homefilelist&gt;

        &lt;addressDoctor filename='AD100.cfg'&gt;
            &lt;addressDoctor_info name='MemoryUsage' value='1048' /&gt;
            &lt;addressDoctor_info name='PreloadingMethod' value='MAP' /&gt;
        &lt;/addressDoctor&gt;

        &lt;addressDoctorEngVerPCIS&gt;
            &lt;addressDoctorEngVer_info name='EngineVersion' value='5.2.5' /&gt;
        &lt;/addressDoctorEngVerPCIS&gt;

        &lt;addressDoctorEngVerDIS&gt;
            &lt;addressDoctorEngVer_info name='EngineVersion' value='5.2.6' /&gt;
        &lt;/addressDoctorEngVerDIS&gt;

        &lt;referenceDataLocation location='/home/idp/av/default'&gt;
            &lt;referenceDataLocation_info permission='-rw-r--r--' hardlink='1' owner='idp' group='support' fsize='196' month='Aug' date='2' time='11:06' filename='copyright.txt'/&gt;    
        &lt;/referenceDataLocation&gt;

        &lt;ssaprDirList&gt;
            &lt;ssaprDirList_info permission='-rw-r--r--' hardlink='1' owner='idp' group='support' fsize='2737558' month='Oct' date='14' time='2010' filename='turkey.ysp' /&gt;
        &lt;/ssaprDirList&gt;
    &lt;/product&gt;
&lt;/csmclient&gt;
</code></pre>

<p><strong>More Updates</strong></p>

<pre><code>        var aDoctor=[];
    var adtrs="";
    var homeFileList=[];

    if(alias==="PCIS")
    {
        $(this).children('addressDoctorEngVerPCIS').each(function(){ 
            adtrs='&lt;tr width="100%"&gt;'+
                '&lt;th class="thPanel" align="left" valign="top" width="40%"&gt;'+$(this).children('addressDoctorEngVer_info').attr('name')+'&lt;/th&gt;'+
                '&lt;td align="left" width="60%"&gt;'+$(this).children('addressDoctorEngVer_info').attr('value')+'&lt;/td&gt;'+
            '&lt;/tr&gt;';
        });

        $(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&gt;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
</code></pre>
