Requirements describe

In complex projects, the server (the data interface implementation side) will split the interface into a relatively fine-grained interface, so as to facilitate reuse in more places. When the split interface is combined in the front end, usually a block needs to request 5 or 6 interfaces or even more interface requests to get the desired data. Excessively many data requests will lead to slow rendering of the block, especially on the mobile end. In order to improve this situation, some new interfaces have been developed on the server side to combine the interfaces needed for the front end, but the development and maintenance are not very good, we should automate this process

Train of thought

Analogy to the idea of the CDN Combine file, the front end dynamically combines interfaces on request, and the back end has a service interface dedicated to handling the Combine interface. In this process, we can agree on the data format of the front and back end

convention

Suppose we want to request the following two interfaces

Interface: users/list parameter: status=1 name=xl interface: users/role parameter: id=20

We assume that the client will combine the above two interfaces and send a request to the server in the following format

API/Combine parameter apis=[{url:'users/list', body:{status:1, name:xl}},{url:'users/role', body:{id:20}}]

The server implements a fixed API/Combine interface. After receiving the above data, the server internally requests the corresponding interface and returns the following data format after receiving the data

{
    'users/list':{data:{},ok:true},
    'users/role':{data:{},ok:true}
}

Application in MAGIX

var Service = Magix.Service.extend(function(bag, callback) { var bags = bag.get('bags', []); // When the Combine interface is enabled, all requests will combine, and the bag object to request will be placed inside the bags array in Magix var data = []; for (var i = 0; i < bags.length; i++) { var params = bags[i].get('params'); // Data. Push ({url: bags[I]. Get ('url'), body: params}); } $.ajax({ url: 'api/combine', data: 'apis=' + JSON.stringify(data), dataType: 'json', type:'post', success: function(responseData) { for (var i = 0; i < bags.length; I ++) {var url = bags[I].get('url'); var d = responseData[url]; If (d) {bags[I].set('data', d); if (d) {bags[I].set('data', d); }} callback(); }}); }); Service.add([{ name: 'list', url: 'users/list', cache: 100000 }, { name: 'role', url: 'users/role' }]);

use

var s1 = new Service();
s1.all('list', function(err, list) {
    console.log(err, list);
});
setTimeout(function() {
    var s = new Service();

    s.all(['list', 'role'], function(err, list, role) {
        console.log(err, list, role);
    });
}, 6000);

Compatible with all previous functions and caches, which require the back-end to work according to the convention. The convention is not to follow the rules described above, but can be defined by itself, just need to handle it in magix.service.extend

Magix is a block management framework: https://github.com/thx/magix/… Address of the project: https://github.com/thx/magix welcome star with the fork