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).
2 answers
solution1
2 ACCPTED 2016-07-01 07:15:23
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?
solution2
0 2016-07-01 07:12:09
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.