requirejs模块化设计中对于异步回调函数,怎么处理较好?

比如我要做一个H5页面,有一些动画效果,同时带音频播放
目前我有一个app模块为主要逻辑。有一个sound模块用来初始化音频。

我是使用SoundManager 2这个音频库来初始我的音频,需要的使用方法如下。

//sound.js
define(["SoundManager"],function(sm2){
    var mySound;

    sm2.soundManager.setup({
        url:'js/sm2/swf/',
        onready: function() {
            mySound = sm2.soundManager.createSound({ 
                url: 'sound/sound1.mp3',
                autoLoad: true
            });
        }
    });

    return {
        mySound:mySound
    };
});

但是实际上 onready方法是在音频开始加载后才异步执行的。这使得我在app中获取到的mySound是undefined。

//app.js
define(["sound"], function(sound) {
        var mySound = sound.mySound;// undefined
});

于是我改成在return的时候这样写

//sound.js修改后的return
return{
    getMySound:function(){
        return mySound;
    }
};

然后在app中使用的时候每次都是如下:

//app.js
define(["sound"], function(sound) {
    var mySound = sound.getMySound();
    if(typeof mySound !== 'undefined'){
        //doSometing()...
    }
});

我的模块化设计思路是不是有问题?在这种回调下怎么设计要好一些?

而且如果我要在mySound加载成功后再执行一些任务,就只能到sound.js中去做了。但是我又想把类似的任务放到app.js里。

如果在普通模式下。可能我是习惯了不断的回调深渊了,现在接触模块化设计有点不够灵光。

原文阅读

"文章为作者独立观点, 不代表老订阅立场"

本站作者

每日荐书

在不完美的世界力求正常——读《公司的坏话》

书名:《公司的坏话》

作者:李天田(脱不花妹妹)

出版社:北京大学出版社

赞助商

广告