1
\$\begingroup\$

I'm pretty new to web development with JS and was wondering if anyone can tell me how I can improve my code. I just feel like when it comes to maintainability my code would be very difficult to update. Can someone advice on some best practices or maybe how they do it?

JavaScript

Here is a typical onready jQuery function. It calls a JSON and goes through the object with .each and parses the data to HTML and appends it the HTML DOM.

$(document).ready(function () {

    var fullday_start = '<table class="table text-left" width="100%" border="0" cellspacing="0" cellpadding="5"><tbody><tr style="border-top:none;"><th scope="col" style="width: 20%;">Field 1</th><th scope="col" style="width: 45%;"><i class="icon-ok"></i> Field 2</th><th scope="col"><i class="icon-calendar"></i> Date </th><th scope="col"><span class=" pull-right">Notes</span></th></tr>';

    $.each(eventsData, function () {
        day_render_html_output = fullday_start;
        day_render_html_output += renderFullRow(start, end, names, this.uniqueID);

    });

    $('#output').html(day_render_html_output);
});

Here is an example/attempt of me trying to have some sense of maintainability by creating some JS functions that render outputs in HTML with given data from the JSON that's get called from onready above.

function renderFullRow(startDate, endDate, names, uniqueID) {
    var html_output = '<tr><td><i class="icon-stop"></i>Day</td><td><select id="type_' + uniqueID + '">' + names + '</select></td>';
    html_output += '<td>' + startDate + ' - ' + endDate + '</td>';
    html_output += '<td><span class="pull-right"><button type="button" class="accordion-toggle btn btn-default btn-small" data-toggle="collapse" data-parent="#accordion' + uniqueID + '" href="#collapseOne' + uniqueID + '"><i class="icon-pencil"></i></button></span></td></tr>';
    html_output += '<tr><td class="bor-no" colspan="4"><div id="accordion"><div id="collapseOne' + uniqueID + '" class="collapse"><div class="control-group control-group-notes"><button onclick="clearMsgBox(\'' + uniqueID + '\')" type="button" class="close" data-toggle="collapse" data-parent="#accordion' + uniqueID + '" href="#collapseOne' + uniqueID + '">x</button><textarea id="msg_box_' + uniqueID + '" style="width: 92%;" rows="2" placeholder="Message..."></textarea></div></div></div></td></tr>';
    return html_output;
}

function clearMsgBox(ebID){
    $('#msg_box_'+ebID).val('');
}

Could someone enlighten me on how to improve code like this?

\$\endgroup\$
3
\$\begingroup\$

The code isn't bad. I think your taking the wrong approach though. Rendering HTML from JavaScript is ugly and as you mentioned, hard to maintain. I'd recommend looking into a client side templating solution such as Handlebars, Mustache, Dust, etc..

This will allow you to write templates rather than appending html to a variable. For example, in handlebars you could do something like:

<table class="table text-left" width="100">
    {{#each eventsData}}
       <tr....
    {{/each}}
</table>

Handlebars will then take the template and data and give you your HTML, which you can then insert into another element.

\$\endgroup\$
  • \$\begingroup\$ interesting, which templating solution do you recommend? \$\endgroup\$ – BaconJuice Jun 16 '14 at 15:23
  • \$\begingroup\$ I personally use Handlebars, but any will do. LinkedIn did a good comparison of some good options: engineering.linkedin.com/frontend/… \$\endgroup\$ – Brian DiCasa Jun 16 '14 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.