Question

我可能正在接近这一切，所以反馈或建议将非常感激。

我正在使用javascript和jQuery构建一个工具，允许用户创建自己的仪表板。用户可以选择要添加到仪表板的模块，并根据需要重新排列。

模块可以是任何内容，例如html表或允许它们执行搜索的输入。

我的目标是让每个模块都有自己的JS文件，以便在需要时将逻辑分开并进行调试。

这是我正在努力的方向，特别是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);

上面的代码提取用户选择的模块。它设置模块块/ div，其中将呈现实际逻辑。

我现在的目标是用我试图获取的各个JS文件的输出填充这些模块。

有关更好的方法来处理此问题的任何建议，同时尝试将模块全部保存为单独的文件（假设这将是最好的）。

Answer 1

如果mustache模板适合您，您可以尝试发送.js文件，而不是尝试发送.js文件，并向它们提供JSON对象（您可以从服务器获取JSON文件而不会有太多麻烦）。我将举一个小例子（使用jquery.js和mustache.js）

小胡子htmlfile：

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

html文件：

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

JS Mainfile：

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

    });
});

来自单独文件的Mustachelogic：

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

// 在看到问题被调整后编辑：

Mustache会创建模板，因此您希望将模板用于要在仪表板上投放的任何模块，因为这样可以多次使用它。您可以决定将每个模块都设为自己的.html文件。你也可以决定将逻辑与mustachetemplates一起使用在你想要的尽可能多的javascript文件中。并像在主文件中那样访问它们。

如果你想通过一个函数获取javascript文件，这个问题适合你的问题： How do I include a JavaScript file in another JavaScript file?

Answer 2

如果您遇到结构问题。你应该使用锅炉板。该模式是修复和自定义您自己的框架。文件结构的设计完全取决于你的逻辑。由于JavaScript是过程语言，因此文件顺序的定义很重要。

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

包括外部JS文件的内容

2 个答案: