电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 基于 Dojo toolkit 实现 web2.0 的 MVC 模式-2 抽象 dojo widget 的共性 [打印本页]

作者: look_w 时间: 2018-8-23 20:50 标题: 基于 Dojo toolkit 实现 web2.0 的 MVC 模式-2 抽象 dojo widget 的共性

第二部分抽象 dojo widget 的共性，实现可复用的 MVC在上一章中，我们列举了一个 dojo 的 widget 特性，那么我们是否可以对 widget 在进一步的提取出共性，提高 widget 的可复用性，答案是肯定的。
图 1. dojo 实现 mvc

使用 dojo 实现 mvc使用 widget 作为展示层的，可以很好的将页面元素很好的封装和重用。但是在 web 应用开发中页面展示层往往需要和服务器端的数据进行交互，在 web2.0 技术的支援下，我们可以使用 ajax 将页面元素的改变反应的服务器端进行处理，然后将返回结果通过在页面中预先定义的回调函数进行性展示。然后大量的回调函数将会破坏展示层的良好的封装。使得代码晦涩难懂。因此我们需要在 web2.0 应用中实现 MVC 模式，将模型改变，以及视图的自动刷新进行封装，已取得更好的复用性。
清单 11. VIEW.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

if (!dojo._hasResource["taas._base.View"]) {
dojo._hasResource["taas._base.View"] = true;
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.provide("taas._base.View");
dojo.declare("taas._base.View",null,{
_model:null,
_taasSrcPath:dojo.moduleUrl("taas",""),
responseObject:null,
refresh:function(object){
   this.responseObject = object;
   if(this.updateView!=undefined&&typeof this.updateView=="function"){
   this.updateView(this.responseObject);
   }
},
_bindModel:function(dataModel){
   this._model = dataModel;
}
});
}

清单中的程序定义了抽象的 view. 其中 _model 为为抽象 view 所关联的数据模型。
bindModel 方法将视图与数据模型进行关联。Refresh 方法提供当模型改变时，模型可以调用的用于刷新视图的方法。在 Refresh 函数中判断是否存在 updateView 函数如果存在就调用该函数。updateView 函数用于用于自定义的视图如何进行刷新。
清单 12. MODEL.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

if (!dojo._hasResource["taas._base.DataModel"]) {
dojo._hasResource["taas._base.DataModel"] = true;
dojo.provide("taas._base.DataModel");
dojo.declare("taas._base.DataModel",null,{
_views:null,
uri:null,
constructor : function(uri){
   this._views = new Array();
   this.uri = uri;
},
registerView:function(view){
   view.bindModel(this);
   this._views.push(view);
},
unRegisterView : function (view){
   var i = this._views.indexOf(view);
      if(i > 0)
         this._views.slice(i,1);
},
notifyViews : function (json){
   for(var i = 0; i < this._views.length; i++)
      {
   this._views.refresh(json);
      }
}
});
}

清单中代码为抽象的 model. 它使用了 registerView,unRegisterView notifyViews 来进行与视图的通信。registerView 函数可以让 model 绑定一个视图，unRegisterView 函数可以让 model 解绑定一个视图，notifyViews 函数，用于通知该模型所绑定的所有视图进行刷新。
清单 13. Controller.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

if (!dojo._hasResource["taas._base.Controller2"]) {
dojo._hasResource["taas._base.Controller2"] = true;
dojo.provide("taas._base.Controller2");
dojo.declare("taas._base.Controller2",null,{
});
taas._base.Controller2.remoteUpdate = function (dataModelUri,topic,formId){
  dojo.info("taas._base.Controller2 deprecated, use taas._base.Controller instead, 1.0")
_topic = topic;
_dataModelUri = dataModelUri;
_formId = formId;
_form = dojo.byId(_formId);
var doResponse = function (responseText){
   dojo.publish(_topic,[responseText]);
};
dojo.xhrGet({
   url: _dataModelUri,
   preventCache: true,
   form:_form,
   handleAs: "text",
   method:"get",
   load: doResponse
});
}
}

清单中的代码为 Controller 类，主要负责与服务器端的 servlet 通信。获取服务器端的数据更新，并将更新后的数据通知到页面模型层。
使 widget 继承 view. 很简单，只需要在 declare 中申明该 widget 继承与 view 就可以了。
清单 15. updateView.

1
2
3

taas.layout.LinkPane.prototype.updateView = function(json) {
alert(“this view has been updated”);
}

清单中的代码实现了自定义的视图刷新规则 updateView，该函数被动态绑定到 LinkPane widget 对象中。
清单 16. ProjectList 模型 .

1
2
3
4
5

function ProjectList(uri) {
this.uri = uri;
}
ProjectList.prototype = new taas._base.DataModel(this.uri);
Var projectListModel = new ProjectList(“http://localhost:8080/servlet/ProjectManagement”)

清单中的代码从 DataModel 抽象对象中派生出 ProjectList 对象模型以供 LinkPane 使用。
清单 17. 模型与视图绑定 .

1 2	var myLinkPane = new taas.layout.LinkPane({},”linkpane01”). projectListModel.registerView(myLinkPane);

清单 18. controller 与远程 servlet 通信 .

1
2
3
4

清单中代码假设我们在页面中使用了一个 button，button 的 onclick 事件调用 controller 的 remoteUpdate 方法与 Model 中对应的 servlet 通讯。
图 2 程序执行过程。Sequence 图。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)