我正在为员工创建一个工具来创建“小部件”仪表板。这个仪表板在显示的小部件、它们的位置和大小方面是完全可定制的。

每个小部件都是一个 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);
}

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

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

最佳答案

这是我过去所做工作的一个基本示例。我不知道标准是什么，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。

关于javascript - 创建多个 jQuery/Javascript 小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38165733/