Shulou(Shulou.com)06/02 Report--

Based on Dojo how to achieve MVC mode of Ajax applications, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

I want to achieve an application in the project is to control the synchronization of audio and text returned by the server when playing on the client. I believe all have seen baidu song audition, audio and text synchronization and support drag-and-drop synchronization, this time to achieve one more function, that is to play whatever sentence is clicked (of course I am not to play the song). In a nutshell, I use JSON (javascript object notation) to transfer data in my interaction with the server, and the server uses the .net component of Newtonsoft to handle JSON data serialization. As for the specific JSON format, you can define it yourself, for example (the simplest):

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

As for the implementation of MVC under js, perhaps many people think that "js is just a script". It is probably that the emergence of Ajax has changed many people's view of js. In fact, you can write completely object-oriented programs with js, because js supports several important features of object-oriented languages. It should be the js scripts that you have seen all the time have created a bad impression on everyone. Js is originally an object-oriented language (we see a lot of structured programs written by it). Take a look at this article, my implementation is also inspired by it, an extension is to refer to Dojo event subscription and publishing mechanism.

Let's talk about the specific implementation of the above statement function. In the aspect of model, we first implement a container-type model, parse JSON data and have current sentence information, all sentence information (array), and set the current sentence method:

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.StartTimecurrentPos)

Dojo.event.topic.publish ("/ MeInvoked", this)

}

ClickActive: function () {

Dojo.event.topic.publish ("/ MeClicked", this)

}

});

Another model represents the information of the above sentence, including text, startTime, endTime, and subscribes to the "/ positionChange" event (published regularly later according to mediaplayer), and defines two methods (here it will be connected to a specific user event in View with the connect of dojo.event) to publish the event that the current object is activated, and subscribe to the event published by the activation of this object for controller in view During controller processing, the current item of container model is refreshed and the performance of view is updated (such as adding styles). In addition to making some event connections and subscriptions for other objects, the render method of view object is responsible for render all items of container model into specific html elements (such as span), which determines the display form of 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 iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.