创建多个 jQuery/Javascript 小部件

Question

我正在为员工创建一个工具来创建“小部件”仪表板。该仪表板可以完全自定义显示的小部件、它们的位置和大小。

每个小部件都是一个 jquery 自执行函数，它可以加载创建它所需的任何内容。

我担心某些小部件可能需要从数据库中获取数据才能加载，例如保存的链接、常用电话号码等。这意味着如果用户的仪表板上有 10 个小部件，则进行 10 次 AJAX 调用（假设每个调用都需要访问数据库）。

首先，我怀疑这是首选，但不完全确定如何处理？

我的第二个担忧/问题是等待加载。在getMultipleScripts 函数中，我有一个done 的回调。这将告诉我何时获取了所有文件，以便我可以运行我的插件来启用网格功能。然而，这并不意味着每个插件都完成了它们的 AJAX 调用来获取它们的数据。有没有一种方法可以解决这个问题，以便不仅加载文件，而且每个文件都完成了初始 AJAX 调用以获取数据？

// Load an array of file names
$.getMultiScripts(moduleIncludes, 'includes/js/modules/').done(function(){
   // I can trigger the jQuery plugin here to arrange the widgets into their grid format. However, just because those plugins have been fetched doesnt mean their individual AJAX calls have all been completed. 
});

// Given an array of file names..
$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript((path || "") + scr);
    });

    _arr.push($.Deferred(function(deferred) {
        $(deferred.resolve);
    }));

    return $.when.apply($, _arr);
}

任何反馈的建议都是首选。虽然上述问题是我主要关心的问题，但也接受有关备用设置的反馈。

想象下面的每个块都是用户在其仪表板上的一个小部件。一个是一个简单的计算器，根本不需要与数据库交互，另一个是他们部门的链接列表。

Answer 1

这是我过去所做的一个基本示例。我不知道标准是什么，javascript 不是我的强项，但这似乎对我有用。您必须知道页面加载时用户拥有多少（数字计数）小部件，以便您可以将其输入到计数器中，您的 ajax success 函数在完成其过程时会减少。看看它是否适合你的情况：

DEMO（稍作改动以适用于 jsFiddle）： https://jsfiddle.net/cbyxp9v2/

/index.php

<script>
// I am just making a simple ajax object to use in this example
var aEngine =   function($)
    {
        var data;
        var func;
        var url =   '/tester.php';
        this.ajax   =   function(data,func)
            {
                $.ajax({
                    url: url,
                    data: data,
                    type: 'post',
                    success: function(response) {
                        try {
                            func(response);
                        }
                        catch(Exception) {
                            console.log(Exception.message);
                        }
                    }
                });
            };
    }
// On document load
$(document).ready(function() {
    // This is where you have to tell this function how many widgets there are
    var counter =   10;
    // This will tell the element to loop in my example but not
    // important in your case
    var counted =   counter;
    // Create instance
    var ajaxEngine  =   new aEngine($);
    // I am just doing a loop to simulate widgets being processed via ajax
    for(var i = 1; i < counted; i++) {
        ajaxEngine.ajax(
            {
                "test":"best",
                "num":i
            },
            function(response){
                var writeResp   =   JSON.parse(response);
                // This is just writing to page a random number from the PHP
                // not important, just required in this example
                $('#div'+writeResp.num).html(writeResp.msg);
                // This is more the important part
                // Here you decrease the counter by one when this widget
                // finishes it's action
                counter--;
                // This part is important. After the counter decreases to 1
                // that means that all the ajax widgets should be loaded and
                // in this case send a "done" message to the console.
                // Yours would then run your grid application
                if(counter == 1) {
                    console.log('done');
                }
            });
    }
});
</script>

<?php
// This is just for testing to simulate loaded widgets
for($i = 1; $i < 10; $i++) {
    echo '<div id="div'.$i.'">tester</div>';
}

/tester.php

// This just sends back to ajax content simulating widget loading
if(!empty($_POST['test']))) {
    die(json_encode(array('success'=>true,'msg'=>rand(),'num'=>$_POST['num'])));
}

如果添加：

counter--;
if(counter == 1) {
    console.log('done');
}

每个单独的 ajax 调用很麻烦，我会将它处理到我的 aEngine 中，所以它会自动在后台发生。这个想法基本上是在运行 ajax 之后，计数器会减少 1。