大家好，本人在开发中为了让页面能组件化(可能跟那个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里边的方法了
所以我想问下有没有好一点的写法。。
解决方案
$.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. });