Including contents of external JS file

Question

I may be approaching this all wrong so feedback or suggestions would be very appreciated.

I am building a tool using javascript and jQuery that allows a user to create their own dashboard. The user can select modules that they want to add to the dashboard and re-arrange it as they see fit.

A module could be anything such as a html table or an input that allows them to perform a search.

My goal was to make each module its own JS file so that its easy to keep the logic separate and debug it when needed.

This is what I was working towards, specifically the getScript

// Loop over our modules and create our output
    for ( var i = 0; i < moduleData.modules.length; i++){
        output += '<li data-sizey="'+moduleData.modules[i].sizeY+'" data-sizex="'+moduleData.modules[i].sizeX+'" data-col="'+moduleData.modules[i].col+'" data-row="'+moduleData.modules[i].row+'" data-min-sizey="'+moduleData.modules[i].minYsize+'" data-min-sizex="'+moduleData.modules[i].minXsize+'">';
             output += '<div class="portlet" >';
                    output += '<div class="portlet-title">';
                         output += '<div class="caption">';
                                output += '<i class="'+moduleData.modules[i].moduleIcon+'"></i>';
                                output += '<span class="caption-subject text-uppercase"> '+moduleData.modules[i].moduleName+'</span>';
                                output += '<span class="caption-helper"> '+moduleData.modules[i].moduleDescription+'</span>';
                         output += '</div>';
                         output += '<div class="actions">';
                                output += '<a class="btn" name="editModule" data-moduleid="'+moduleData.modules[i].moduleID+'"><i class="fa fa-pencil"></i>Edit</a>';
                         output += '</div>';
                    output += '</div>';
                    output += '<div class="portlet-body">';
                         $.getScript( "includes/js/modules/"+moduleData.modules[i].moduleID+".js", function(data){
                             output += data;
                         });
                    output += '</div>';
             output += '</div>';
        output += '</li>';
    }

    // Append our output
    $('#moduleData').empty().append(output);

The code above fetches the modules that the user selected. It sets up the module block/div where the actual logic will be rendered.

My goal now is to fill those modules with the output of the individual JS files I was trying to fetch.

Any suggestions on a better way to handle this while trying to some how keep the modules all as separate files (assumed this would be the best).

You definitely shouldn't mix HTML and Javascript. Keep it separated and then fetch it. — The Onin, Jul 01 '16 at 07:08
perhaps create an array there instead of all the JS files needed and load them after the loop? Then just tell each JS file the ID of the module it needs to append the data to? — SBB, Jul 01 '16 at 07:11

score 2 · Accepted Answer · edited May 23 '17 at 12:22

Instead of trying to send .js files you might try if mustache templates work for you, and feed them JSON objects (you can get JSON files from a server without much trouble). I ll give a small example (uses jquery.js and mustache.js)

mustache htmlfile:

<table id="mustacheTable">
    {{#people}}
        <tr>
            <td>{{name}}</td>
            <td>{{occupation}}</td>
        </tr>
    {{/people}}
</table>

html file:

<body>
    <p id="person"></p>
</body>

JS Mainfile:

$(document).ready(function () {
    $("#templates").load("template.html #mustacheTable", function () {
        $("#person").html(createTable(view));

    });
});

Mustachelogic from seperate file:

function createTable() {
    var template = document.getElementById('mustacheTable').innerHTML;
    var output = ""
    view.forEach(function (people) {
        output += (Mustache.render(template, people));  
    })     
    return output;
}

// edit after i saw the question was adjusted:

Mustache creates templates, so you want to use templates for whatever module you want to throw at the dashboard, because that way it can be used more than once. You can decide to make every module an own .html file. you can also decide to put the logic working with mustachetemplates in as many javascript files as u want. and just access them as I did in the Mainfile.

If you want to get the javascript file through a function this question fits your problem: How do I include a JavaScript file in another JavaScript file?

can these templates contain logic though? These modules won't just be HTML that's rendered but an array of things such as a calculator or a timer etc. Think of it like widgets you could add to your computer or phone. — SBB, Jul 01 '16 at 07:24
the mustache templates are "logicless" but you can use logic in using them. It seems the thing you want to do is fetch a piece from somewhere and execute it... Basicly you want to execute/interprete javacode through javacode. without knowing what piece of code you get. — Gammeldags, Jul 01 '16 at 10:21

score 0 · Answer 2 · answered Jul 01 '16 at 07:12

0

if you have a problem with structure. you should use a boiler plate . the pattern are fix and custom your own framework. the design of file structures are totally depend upon your logic. since JavaScript is procedural language the definition of files order is matter.

you may study : https://github.com/jquery-boilerplate/jquery-boilerplate

answered Jul 01 '16 at 07:12

Deepak Sharma

1,117
1
12
22

this does not answer the question , Better use comment section for such information – brk Jul 01 '16 at 07:15

Including contents of external JS file

2 Answers2