Question

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

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

WHEN（加载了js模块饼图）和（蓝色主题css加载）和（航空公司统计数据json已加载）

然后（绘制图表）

我找到了许多实现AMD的库，以及许多实现promises的库，但没有一个库可以组合模块加载和promises，如上例所示。这是可能的，是否有任何库已经实现了这个？

我需要客户端JavaScript。

Answer 1

jQuery可以通过promises执行此操作。这只是修改代码的问题。

假设您拥有代码和所有实时in the same domain或跨域，服务器allows CORS，我们将使用.ajax()加载每个代码。然后我们将使用.when()来检测何时加载了所有的promise，并.then()添加我们的回调来执行所有的promises解析。

//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

});

Answer 2

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

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

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

是否可以将模块加载实现为承诺？

2 个答案: