基於dojo實現mvc 模式下的ajax應用
好象誰也沒料到我在專案中做起了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資料並擁有當前句資訊、所有句資訊(陣列)、設定當前句方法,
本人要實現的其中一項應用是控制服務端返回來的音訊、文字在客戶端播放時的同步,相信都看到過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
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->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];
}
});
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->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];
}
});
ItemModel
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->dojo.lang.declare('ItemModel',null,{
initializer : function(id,sentence)
{
this._id=id;
this._jsonSentence=sentence;
dojo.event.topic.subscribe("/PositionChange", this, this.invokeActive);
},
invokeActive : function(currentPos){
//if curPos between this.startTime and this.endTime pulish:
if(this._jsonSentence.StartTime<=currentPos && this._jsonSentence.EndTime>currentPos)
dojo.event.topic.publish("/MeInvoked", this);
},
clickActive : function(){
dojo.event.topic.publish("/MeClicked",this);
}
});
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->dojo.lang.declare('ItemModel',null,{
initializer : function(id,sentence)
{
this._id=id;
this._jsonSentence=sentence;
dojo.event.topic.subscribe("/PositionChange", this, this.invokeActive);
},
invokeActive : function(currentPos){
//if curPos between this.startTime and this.endTime pulish:
if(this._jsonSentence.StartTime<=currentPos && this._jsonSentence.EndTime>currentPos)
dojo.event.topic.publish("/MeInvoked", this);
},
clickActive : function(){
dojo.event.topic.publish("/MeClicked",this);
}
});
另一個model代表上述的一句的資訊,包含text、startTime、endTime,並且訂閱“/positionChange”事件(後面據mediaplayer定時釋出),同時定義兩方法(此處會於View中用dojo.event的connect將其連於特定的使用者事件)用於釋出當前物件被啟用的事件,於view中同時會為controller訂閱此物件啟用所釋出的事件,controller處理時會重新整理container model的當前項同時更新view的表現(如新增樣式),其中view物件除了為其他物件進行一些事件連線、訂閱外,其render方法負責將container model的所有項render成特定的html元素(如span),其中決定model的顯示形式,
Viewer - Controller
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->/**//**
* a container view class to render on the webpage
*/
dojo.lang.declare('MainView',null,{
initializer : function(model,controller,elements){
this._model=model;
this._controller=controller;
this._elements=elements;
dojo.event.topic.subscribe("/MeInvoked", this._controller, this._controller.proccessInvoke);
dojo.event.topic.subscribe("/MeClicked", this._controller, this._controller.proccessClick);
},
render : function(){
var div = this._elements.div;
//remove children
for(var i=0;i<div.childNodes.length;i++)
{
div.removeChild(div.childNodes[i]);
}
div.innerHTML="";
div.innerText="";
var items = this._model.getSentences();
for (var key in items) {
var span = document.createElement("span");
span.id=items[key]._id;
span.appendChild(document.createTextNode(items[key]._jsonSentence.Sentence));
span.appendChild(document.createElement("br"));
div.appendChild(span);
if(key==0)
dojo.html.addClass(document.getElementById(this._model._selectedSentence._id),"selected");
dojo.event.connect(span, 'onclick', items[key], 'clickActive');
}
}
});
/**//**
* a common controller class,
* execute some utilities operations.
*/
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.getElementB
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->/**//**
* a container view class to render on the webpage
*/
dojo.lang.declare('MainView',null,{
initializer : function(model,controller,elements){
this._model=model;
this._controller=controller;
this._elements=elements;
dojo.event.topic.subscribe("/MeInvoked", this._controller, this._controller.proccessInvoke);
dojo.event.topic.subscribe("/MeClicked", this._controller, this._controller.proccessClick);
},
render : function(){
var div = this._elements.div;
//remove children
for(var i=0;i<div.childNodes.length;i++)
{
div.removeChild(div.childNodes[i]);
}
div.innerHTML="";
div.innerText="";
var items = this._model.getSentences();
for (var key in items) {
var span = document.createElement("span");
span.id=items[key]._id;
span.appendChild(document.createTextNode(items[key]._jsonSentence.Sentence));
span.appendChild(document.createElement("br"));
div.appendChild(span);
if(key==0)
dojo.html.addClass(document.getElementById(this._model._selectedSentence._id),"selected");
dojo.event.connect(span, 'onclick', items[key], 'clickActive');
}
}
});
/**//**
* a common controller class,
* execute some utilities operations.
*/
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.getElementB
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/12639172/viewspace-434691/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Dojo Spreadsheet Widget - 基於Ajax的ExcelExcel
- MVC模式在Java Web應用程式中的實現MVC模式JavaWeb
- AJAX基於ASP.NET MVCASP.NETMVC
- 改善Dojo應用程式的初始下載時間
- 基於"堆"的底層實現和應用
- 實現基於Nuxt.js的SSR應用UXJS
- 基於Promise實現對Ajax的簡單封裝Promise封裝
- 基於 Redis 實現分散式應用限流Redis分散式
- MVC模式的PHP實現(3) (轉)MVC模式PHP
- 關於jQuery在Asp.Net Mvc 框架下Ajax檔案上傳的實現jQueryASP.NETMVC框架
- 基於Ajax的應用程式架構彙總(一) (轉自CSDN)架構
- 實現MVC基礎框架MVC框架
- 基於jQuery的AjaxjQuery
- Unity 揹包系統的完整實現(基於MVC框架思想)UnityMVC框架
- MVC驗證09-使用MVC的Ajax.BeginForm方法實現非同步驗證MVCORM非同步
- 最簡單最實用的ajax(一)基礎通用ajax
- ajax應用實現iframe高度自適應程式碼例項
- AJAX實現檔案下載----
- 基於Python和TensorFlow實現BERT模型應用Python模型
- Go實戰 | 基於本地記憶體的快取的應用及實現Go記憶體快取
- AJAX框架的選擇:ECHO2, GWT, DOJO, PROTOTYPE, JQUERY框架jQuery
- 醫療線上OLAP場景下基於Apache Hudi 模式演變的改造與應用Apache模式
- 用java實現基於http協議的網路檔案下載JavaHTTP協議
- 《基於MVC的javascript web富應用開發》中的一些函式MVCJavaScriptWeb函式
- Blazor Web 應用如何實現Auto模式BlazorWeb模式
- 基於 Flink 流計算實現的股票交易實時資產應用
- 應用Promise封裝Ajax實踐Promise封裝
- React元件應用於Spring MVC工程React元件SpringMVC
- 實現一個簡單的基於 WebAssembly 的圖片處理應用Web
- 基於 socket.io 快速實現一個實時通訊應用
- BizWorks 應用平臺基於 KubeVela 的實踐
- Egret應用開發實踐(03) MVC 模組化具體實現MVC
- Ajax的原理和應用
- 四種流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的對比框架jQueryJS
- 申通的雲原生實踐之路:如何實現應用基於容器的微服務改造?微服務
- 聊天室應用開發實踐(二):實現基於 Web 的聊天室Web
- go 基於gin-vue 構建一套mvc開發應用GoVueMVC
- 基於HTML5實現的Heatmap熱圖3D應用HTML3D