包括外部JS文件的内容

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. 我正在使用javascript和jQuery构建工具，该工具允许用户创建自己的仪表板。 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. 模块可以是任何东西，例如html表或允许他们执行搜索的输入。

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. 我的目标是使每个模块都有其自己的JS文件，以使其易于保持逻辑分离并在需要时进行调试。

This is what I was working towards, specifically the getScript 这就是我正在努力的方向，特别是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. 它设置了模块块/ div，将在其中渲染实际的逻辑。

My goal now is to fill those modules with the output of the individual JS files I was trying to fetch. 我现在的目标是用我尝试获取的单个JS文件的输出填充这些模块。

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). 关于尝试解决此问题的更好方法的任何建议，同时尝试一些如何将模块全部保存为单独的文件（假定这将是最好的）。

Answer 1

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). 除了尝试发送.js文件外，您还可以尝试使用髭模板是否适合您，并为它们提供JSON对象（您可以从服务器获取JSON文件，而不会遇到太多麻烦）。 I ll give a small example (uses jquery.js and mustache.js) 我会举一个小例子（使用jquery.js和mustache.js）

mustache htmlfile: 小胡子htmlfile：

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

html file: html文件：

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

JS Mainfile: JS主文件：

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

    });
});

Mustachelogic from seperate file: 来自单独文件的Mustachelogic：

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. Mustache会创建模板，因此您想对要在仪表板上投掷的任何模块使用模板，因为这样可以多次使用它。 You can decide to make every module an own .html file. 您可以决定使每个模块成为自己的.html文件。 you can also decide to put the logic working with mustachetemplates in as many javascript files as u want. 您还可以决定将逻辑与mustachetemplates一起使用，放入所需的任意数量的javascript文件中。 and just access them as I did in the Mainfile. 就像我在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? 如果要通过函数获取javascript文件，则此问题适合您的问题：如何在另一个JavaScript文件中包含一个JavaScript文件？

Answer 2

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. 由于JavaScript是过程语言，因此文件顺序的定义很重要。

you may study : https://github.com/jquery-boilerplate/jquery-boilerplate 你可以学习： https : //github.com/jquery-boilerplate/jquery-boilerplate

包括外部JS文件的内容

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-07-01 07:15:23

解决方案2
0 2016-07-01 07:12:09

包括外部JS文件的内容

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-07-01 07:15:23

解决方案2 0 2016-07-01 07:12:09

解决方案1
2 已采纳 2016-07-01 07:15:23

解决方案2
0 2016-07-01 07:12:09