龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

基于Dojo实现MVC模式下的Ajax应用

时间:2013-03-06 14:58来源:未知 作者:admin 点击:
分享到:
本人要实现项目中的一项应用是控制服务端返回来的音频、文字在客户端播放时的同步,相信都看到过baidu的歌曲试听吧,声文同步且支持拖放同步,此次实现多它一个功能,那就是点

本人要实现项目中的一项应用是控制服务端返回来的音频、文字在客户端播放时的同步,相信都看到过baidu的歌曲试听吧,声文同步且支持拖放同步,此次实现多它一个功能,那就是点哪一句就播哪一句(当然我不是为了播放歌曲).简要说我在和服务器的交互中使用JSON(javascript object notation)传输数据,服务端用Newtonsoft的.Net组件处理JSON数据序列化,至于具体的JSON格式那就你自己定义了,例如(最简单的):

{ 
      Media : [{
      text : "......",
      start : "...",
            end : "...."
         },  ....]
         }

至于js下的MVC实现,或许许多人这样认为“js仅仅是个脚本而已”,大概应是Ajax的出现改观了许多人对js的看法,其实用js可以写出完全面向对象的程序,因为js支持面向对象语言的几大重要特性,应是一直以来大家所见到的js脚本给大家造成了不好的印象,js原本就是面向对象的语言(我们见到许多由它写成的结构化的程序).看一下这篇文章,我的实现也是受它启发,延伸一点的就是引用Dojo的事件订阅、发布机制.

说一下上述陈述功能的具体的实现,在model方面实现首先实现一个容器型的model,解析JSON数据并拥有当前句信息、所有句信息(数组)、设定当前句方法:

ContainerModel:

dojo.lang.declare('ContainerModel',null,{
    initializer : function(jsonData)
    {
        var jsonObj=dojo.json.evalJson(jsonData);
        var sentences=new Array();
        for(var key in jsonObj.Sentences)
        {
            var sentenceObj=new SentenceModel(key,jsonObj.Sentences[key]);
            sentences.push(sentenceObj);
        }
        this._sentences=sentences;
        this._url=jsonObj.MediaUrl;
        this._selectedSentence = sentences[0]
    },
    
    getSentences : function () {
        return [].concat(this._sentences);
    },

    addItem : function (sentence) {
        this._sentences.push(sentence);
    },    

    setSelected : function (sentence) {
        this._selectedSentence = sentence;
    },
    
    reset : function (){
        this._selectedSentence = this._sentences[0];
    }
});
精彩图集

赞助商链接