4

我已经构建了一个单页应用程序，用户可以在其中构建报告。用户会看到一个表单，允许他们选择数据源、图表类型和主题，然后在确认页面加载所需的文件并绘制图表。

为了获得更好的性能，我想并行加载代码模块和数据。例如，如果用户选择“饼图”、“蓝色主题”和“航空公司统计”：

WHEN（加载js模块饼图）和（加载蓝色主题css）和（加载Airline Stats json）

THEN（绘制图表）

我发现了许多实现 AMD 的库，以及许多实现承诺的库，但没有一个库可以像上面的示例那样组合模块加载和承诺。这可能吗，是否有任何库已经实现了这一点？

我需要的是客户端 JavaScript。

4

2 回答 2

1

jQuery实际上可以通过promises做到这一点。这只是修改代码的问题。

假设您拥有代码并且都生活在同一个域中，或者如果跨域，服务器允许 CORS，我们将使用.ajax(). 然后我们将.when()用于检测所有承诺何时加载并.then()添加我们的回调来执行所有承诺解决。

//you can provide a detailed setting for each using .ajax()'s second parameter
//however, jQuery can "smart detect" the content's dataType

var chart = $.ajax(urlOfChart), //script
    theme = $.ajax(urlOfTheme), //css
    data  = $.ajax(urlOfData);  //JSON

//we use .when() to check when all three resolves
//the arguments will be the jqXHR objects for the requests
//in the order they were given in the argument list
$.when(chart,theme,data).then(function(chart,theme,data){

    //according to jQuery.ajax(), if a script is requested, it is evaluated
    //and we still get it's plain text content
    //so with respect to the script, we do no processing

    //with the css, we get it as plain text since no dataType value handles it
    //we embed it into the DOM by creating a style element 
    //and append the text in it for the styles to take effect on the page
    $('<style type="text/css" />').html(theme).appendTo('head');

    //as for the JSON, jQuery converts it into an object 
    //and is passed as an argument as the return data for that promise

    //...everything is now requested, retrieved and prepared...
    //everything else goes under here

});
于 2012-11-05T02:50:06.520 回答
1

CommonJS 模块本身就是 Promise，因为每个工厂只有在定义了需求后才会被调用。

因此，如果您将数据定义为模块，并将代码定义为需要“js”、“css”、“data”的模块，那么这实际上可以直接开箱即用。

或者，您使用 Promise 作为 CommonJS/AMD 之上的抽象，加载 CSS（通过例如 LABJS？）和加载数据（通过 xhr/jsonp）。

于 2012-11-06T07:53:00.060 回答