本人要實(shí)現(xiàn)項(xiàng)目中的一項(xiàng)應(yīng)用是控制服務(wù)端返回來的音頻、文字在客戶端播放時(shí)的同步，相信都看到過baidu的歌曲試聽吧，聲文同步且支持拖放同步，此次實(shí)現(xiàn)多它一個(gè)功能，那就是點(diǎn)哪一句就播哪一句（當(dāng)然我不是為了播放歌曲）.簡(jiǎn)要說我在和服務(wù)器的交互中使用JSON(javascript object notation)傳輸數(shù)據(jù)，服務(wù)端用Newtonsoft的.Net組件處理JSON數(shù)據(jù)序列化，至于具體的JSON格式那就你自己定義了，例如(最簡(jiǎn)單的)：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、柳河網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

至于js下的MVC實(shí)現(xiàn)，或許許多人這樣認(rèn)為“js僅僅是個(gè)腳本而已”，大概應(yīng)是Ajax的出現(xiàn)改觀了許多人對(duì)js的看法，其實(shí)用js可以寫出完全面向?qū)ο蟮某绦颍驗(yàn)閖s支持面向?qū)ο笳Z言的幾大重要特性，應(yīng)是一直以來大家所見到的js腳本給大家造成了不好的印象，js原本就是面向?qū)ο蟮恼Z言（我們見到許多由它寫成的結(jié)構(gòu)化的程序）.看一下這篇文章,我的實(shí)現(xiàn)也是受它啟發(fā)，延伸一點(diǎn)的就是引用Dojo的事件訂閱、發(fā)布機(jī)制.

說一下上述陳述功能的具體的實(shí)現(xiàn)，在model方面實(shí)現(xiàn)首先實(shí)現(xiàn)一個(gè)容器型的model,解析JSON數(shù)據(jù)并擁有當(dāng)前句信息、所有句信息（數(shù)組）、設(shè)定當(dāng)前句方法：

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];
    }
});

ItemModel：

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);

    }

});

另一個(gè)model代表上述的一句的信息，包含text、startTime、endTime，并且訂閱“/positionChange”事件（后面據(jù)mediaplayer定時(shí)發(fā)布），同時(shí)定義兩方法（此處會(huì)于View中用dojo.event的connect將其連于特定的用戶事件）用于發(fā)布當(dāng)前對(duì)象被激活的事件，于view中同時(shí)會(huì)為controller訂閱此對(duì)象激活所發(fā)布的事件，controller處理時(shí)會(huì)刷新container model的當(dāng)前項(xiàng)同時(shí)更新view的表現(xiàn)(如添加樣式)，其中view對(duì)象除了為其他對(duì)象進(jìn)行一些事件連接、訂閱外，其render方法負(fù)責(zé)將container model的所有項(xiàng)render成特定的html元素（如span）,其中決定model的顯示形式：

Viewer - Controller：

/**
 * 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.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.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();
        }
    }
});

大概模式如下：

圖中對(duì)象初始化會(huì)subscribe合適的事件以待事件publish時(shí)進(jìn)行處理，其中虛線表示一次用戶點(diǎn)擊處理，而自由線表示隨播放進(jìn)行處理文本同步（如加亮當(dāng)前項(xiàng)）的過程，此過程在播放過程中持續(xù)進(jìn)行。其實(shí),事件發(fā)布并非圖中所示指向特定對(duì)象(圖中為了容易理解),是誰訂閱誰處理,有AOP的意味！

相信有了這些，讓這個(gè)模型運(yùn)行起來是沒問題了吧，忙中抽閑和大家分享，另外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.*");

腳本的開發(fā)還是比較困難的，從開發(fā)環(huán)境、或從其控制來講，正如Pragmatic Programmer中所說的，“不***的系統(tǒng)、荒謬的時(shí)間標(biāo)度、可笑的工具、還有不可能實(shí)現(xiàn)的需求－－在這樣一個(gè)世界上，讓我們安全‘駕駛’”！

【編輯推薦】

1. AJAX和XmlHttpRequest下的Web開發(fā)
2. 淺談Ajax在ASP.Net中的使用
3. 使用AJAX擴(kuò)展器自定義控件

當(dāng)前題目：基于Dojo實(shí)現(xiàn)MVC模式下的Ajax應(yīng)用
網(wǎng)址分享：http://uogjgqi.cn/article/cosgcje.html