jquery关于异步load多个页面的问题

Question

大家好，本人在开发中为了让页面能组件化(可能跟那个web component概念挺像，我也在学vue.js之类的，但学的十分懵逼),把页面分成几部分，每个部分单独写在不同的html文件，每个html文件包含其对应的html,css和js。
这样当我加载一个页面的不同部分的时候我是这样写的:

$(元素1).load(地址1,function(){
    $(元素2).load(地址2,function(){
        $(元素3).load(地址3,function(){
    
        })
    })
})

这个写法运行之后，每个文件的js代码都能运行，但是这种多重嵌套方式我感觉看起来不太美观，而且里边的回调方法一旦报错，浏览器调试工具也没法追踪得了错误。
我试着想用$.when().done()来管理:

$.when(
    $(元素1).load(地址1);
).done(function(){
    方法
    $(元素2).load(地址2);
})

但是这样写像是没等when里边执行完就执行done里边的方法了
所以我想问下有没有好一点的写法。。

Answer 1

$.when(
    $('#dom1').load('url1')
).done(function(){
    //方法
    $('#dom2').load('url2');
})

通过查jquery API得知$('#dom1').load('url1')返回不是Deferred对象，而是$('#dom1')。因为$.when需要传Deferred对象，意味着 $('#dom1').load('url1')不能作为$.when传参。

---

推荐使用Q.js: A promise library for JavaScript

    function loadAsync(dom,url){
        var defer = Q.defer();
        $.load(dom,url,function(){
            defer.resolve();
        });        
        return defer.promise;
    }
    loadAsync('#dom1','url1').then(function(){
        return loadAsync('#dom2','url2');
    }).then(function(){
        return loadAsync('#dom3','url3');
    }).then(function(){
        //do something you like.
    });