Jump to content

What to do about JS with lots of HTML


Recommended Posts

First, I gotta say I am new to JavaScript, but not new to languages like PHP/C++.


I am working on a large huge JS file that has a lot of things and I have a feeling that it can be made better.  How is where I am at a loss.  If it was PHP, I'd split that JS file into probably 20 other smaller JS files, aka "classes", and it may or may not be the right thing to do, but let me focus on one particular aspect for now, and maybe deal with others later.


Here is the piece of code that bugs the me most (truncated for clarity):

   if (selection[index].selected) {

        result += '<TABLE class="list_grey" style="float: left; margin-left: 20px;">';
        result += '<TR>';
        result += '<TH colspan="2">Data</TH>';
        result += '</TR>';
        var flag = "All";

        if (selection[index].flag == 'P')
            flag = "Premium";
        result += '<TR>';
        result += '<TD>Flag</TD>';
        result += '<TD>' + flag + '</TD>';
        result += '</TR>';
        result += '</TABLE>';
        result += '<TABLE class="list_grey" style="float: left; margin-left: 20px;">';
        result += '<TR>';
        result += '<TH colspan="2">Frame</TH>';
        result += '</TR>';
        result += '<TR>';
        result += '<TD>Frame</TD>';
        result += '<TD>' + selection[index].frame + '</TD>';
        result += '</TR>';
        result += '</TABLE>';

So what it does is this:


1.  it gets "selection" var with eval() from a DIV block of HTML page, where that DIV has a looooong prepared-by-PHP JSON string with all the options prepopulated from various sources accessible to PHP.

var selection    = eval("(" + document.getElementById("result").innerHTML + ")");

2.  It then dynamically constructs and populates further HTML using logic and data found in "selection" var.


3.  This particular JS implements a selection algorithm, where basically user clicking buttons can navigate "selection" var forwards and backwards, and as user does, the dynamic portion of HTML updates per behavior defined in the JS file.


My Problem / Question:  I have a feeling that putting HTML the way it is done here in JS file is not proper separation of concerns and not good way to code.  HTML should be. .. in HTML, when possible, but being new to JS I don't know if there is a better way.  Is there a more recommended way to code what I have now ?



Link to comment
Share on other sites

There are various template engines for JS, such as mustache.js that you could use to keep the HTML neatly separated either in the HTML document or as a single variable declaration in the script. I tend to prefer to drop the HTML templates into the HTML page and reference them by ID, something like:

<script type="text/html" id="whateverTemplate">
  <p>Put whatever HTML you need here</p>
  <p>With template {{placeholders}} that will be replaced</p>
var template = document.getElementById('whateverTemplate').textContent;
var templateVars = { placeholders: 'variables' };
var html = Mustache.render(template, templateVars);
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.