创建多个 jQuery/Javascript 小部件

Question

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

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

我担心的是，某些小部件可能需要从数据库中获取数据才能加载，例如保存的链接、流行的 phone 号码等。这意味着如果用户有 10 个小部件他们的仪表板，它将执行 10 个 AJAX 调用（假设每个调用都需要访问数据库）。

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

我的第二个 concern/question 正在等待加载。在 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。

创建多个 jQuery/Javascript 小部件

Creating Multiple jQuery/Javascript widgets

javascript

php

ajax

jquery

widget