基于dojo实现mvc 模式下的ajax应用
2006-08-22 16:30
330 查看
建议:了解mvc、ajax、至于dojo鉴于其强大及易用性可以边学边用
好象谁也没料到我在项目中做起了client端ajax应用,不过还好我也感兴趣,幸好一直以来应用.net的同时也做过尝试,其原理还是很好理解的,至于ms的atlas我就没太多接触了,反正感觉基于client js库自己来ajax要自由、灵活多了,至于client的有助于ajax应用的pure js库也蛮多的,此次项目组选用dojo库(大概由于其强大又开源吧).
本人要实现的其中一项应用是控制服务端返回来的音频、文字在客户端播放时的同步,相信都看到过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数据并拥有当前句信息、所有句信息(数组)、设定当前句方法,
/**//**
dojo.lang.declare('MainController',null, initializer : function(model) this._model=model;
},
displaySentence : function() //actual method
dojo.event.topic.publish("/DisplaySentence",this._model._selectedSentence._jsonSentence);
},
proccessInvoke : function(sentence) //proccess details
this.proccessRightShow(sentence);
},
proccessClick : function(sentence) //proccess details
this.proccessRightShow(sentence);
//set player pos(start,end)
setPlayerPos(sentence._jsonSentence.StartTime);
},
proccessRightShow : function(sentence) //lighten sentence and show sentence on the right
if(this._model._sentences[0]==sentence || this._model._selectedSentence!=sentence)
//change origin selectedSentence's css
dojo.html.removeClass(document.getElementById(this._model._selectedSentence._id),"selected");
this._model.setSelected(sentence);
//change new current selectedSentence's css
dojo.html.addClass(document.getElementById(this._model._selectedSentence._id),"selected");
document.getElementById(parseInt(this._model._selectedSentence._id/1.2)).scrollIntoView(true);
//pass sentence to show in right in another func
this.displaySentence();
}
}
});
大概模式如下:
图中对象初始化会subscribe合适的事件以待事件publish时进行处理,其中虚线表示一次用户点击处理,而自由线表示随播放进行处理文本同步(如加亮当前项)的过程,此过程在播放过程中持续进行。其实,事件发布并非图中所示指向特定对象(图中为了容易理解),是谁订阅谁处理,有AOP的意味!
相信有了这些,让这个模型运行起来是没问题了吧,忙中抽闲和大家分享,另外dojo的require不要忘了
dojo.require('dojo.lang.*');
dojo.require("dojo.event.*");
dojo.require("dojo.event.topic");
dojo.require("dojo.html.*");
dojo.require("dojo.json");
dojo.require("dojo.io.*");
脚本的开发还是比较困难的,从开发环境、或从其控制来讲,正如Pragmatic Programmer中所说的,“不完美的系统、荒谬的时间标度、可笑的工具、还有不可能实现的需求--在这样一个世界上,让我们安全‘驾驶’”!
好象谁也没料到我在项目中做起了client端ajax应用,不过还好我也感兴趣,幸好一直以来应用.net的同时也做过尝试,其原理还是很好理解的,至于ms的atlas我就没太多接触了,反正感觉基于client js库自己来ajax要自由、灵活多了,至于client的有助于ajax应用的pure js库也蛮多的,此次项目组选用dojo库(大概由于其强大又开源吧).
本人要实现的其中一项应用是控制服务端返回来的音频、文字在客户端播放时的同步,相信都看到过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数据并拥有当前句信息、所有句信息(数组)、设定当前句方法,
/**//**
dojo.lang.declare('MainController',null, initializer : function(model) this._model=model;
},
displaySentence : function() //actual method
dojo.event.topic.publish("/DisplaySentence",this._model._selectedSentence._jsonSentence);
},
proccessInvoke : function(sentence) //proccess details
this.proccessRightShow(sentence);
},
proccessClick : function(sentence) //proccess details
this.proccessRightShow(sentence);
//set player pos(start,end)
setPlayerPos(sentence._jsonSentence.StartTime);
},
proccessRightShow : function(sentence) //lighten sentence and show sentence on the right
if(this._model._sentences[0]==sentence || this._model._selectedSentence!=sentence)
//change origin selectedSentence's css
dojo.html.removeClass(document.getElementById(this._model._selectedSentence._id),"selected");
this._model.setSelected(sentence);
//change new current selectedSentence's css
dojo.html.addClass(document.getElementById(this._model._selectedSentence._id),"selected");
document.getElementById(parseInt(this._model._selectedSentence._id/1.2)).scrollIntoView(true);
//pass sentence to show in right in another func
this.displaySentence();
}
}
});
大概模式如下:
图中对象初始化会subscribe合适的事件以待事件publish时进行处理,其中虚线表示一次用户点击处理,而自由线表示随播放进行处理文本同步(如加亮当前项)的过程,此过程在播放过程中持续进行。其实,事件发布并非图中所示指向特定对象(图中为了容易理解),是谁订阅谁处理,有AOP的意味!
相信有了这些,让这个模型运行起来是没问题了吧,忙中抽闲和大家分享,另外dojo的require不要忘了
dojo.require('dojo.lang.*');
dojo.require("dojo.event.*");
dojo.require("dojo.event.topic");
dojo.require("dojo.html.*");
dojo.require("dojo.json");
dojo.require("dojo.io.*");
脚本的开发还是比较困难的,从开发环境、或从其控制来讲,正如Pragmatic Programmer中所说的,“不完美的系统、荒谬的时间标度、可笑的工具、还有不可能实现的需求--在这样一个世界上,让我们安全‘驾驶’”!
相关文章推荐
- 实现采用客户/服务器通信模式,基于TCP网络通信协议的多客户端简单应用之案例分析
- MVC应用的数据建模(基于Dojo)
- Struts——基于J2EE 的 web 形式 MVC 模式实现
- 使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- 模型-视图-控制器(MVC)模式在ajax中的应用
- MVC模式在.NET框架中的应用与实现
- MVC中基于Ajax和HTML5实现文件上传功能
- Centos7编译lamp基于fpm模式的应用WordPress,实现多虚拟主机
- 基于LVS的NAT模式实现PHP应用
- 基于Spring MVC+Hibernate+Spring Security+Mysql 的B/S应用系统平台设计与实现
- 使用 Adobe AIR 和 Dojo 开发基于 Ajax 的 Mashup 应用 - 转贴
- 基于mvc三层架构和ajax技术实现最简单的文件上传
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- 2.1、Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职
- mvc基于 ajax实现菜单下拉列表
- 实现采用客户/服务器通信模式,基于TCP网络通信协议的多客户端简单应用
- ASP.NET MVC 学习笔记-2.Razor语法 ASP.NET MVC 学习笔记-1.ASP.NET MVC 基础 反射的具体应用 策略模式的具体应用 责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用 C#读取XML文件的基类实现
- 基于WebForm实现Front Controller MVC模式
- python编程(基于订阅模式的mvc实现)