在AJAX程序中实现互斥揭秘
时间:2009-11-5来源:站长资讯网 点击:次
富Internet应用程序集成
由于Mutex所处理的线程(虚拟的或者非虚拟的)数量是动态变化的,所以可以确定一个基本事实:无法通过像浏览器为各个浏览器事件分配单独的线程那样的方式来获得线程标识符。这里做了一个类似的假定,那就是每个完整的事件处理程序组成一个完整的临界区。基于这些假定,每个事件处理函数都可以转变成一个command对象,并使用Mutex对其进行管理。当然,如果未将代码明确组织成事件处理函数,那么将需要重构。换句话说,不是直接在HTML事件属性中进行逻辑编码(例如:onclick=‘++var‘),而是调用事件处理函数(例如:onclick=‘FOO()‘和function FOO(){++var;})。
清单5. 使用了非同步事件处理程序的示例web页面
<html>
<script language="JavaScript">
function newState(){
if (XMLreq.readyState==4) processReply();
}
function requestData(){
...set up asynchronous XML request...
XMLreq.onreadystatechange = newState;
...launch XML request...
}
function processReply(){
var transformedData = ...process data to HTML...
OutputArea.innerHTML = transformedData + "<br>";
}
function clearArea(){
OutputArea.innerHTML = "cleared<br>";
}
</script>
<body onload="requestData();">
<input type="button" value="clear" onclick="clearArea()">
<div id="OutputArea"/>
</body>
</html>
例如,假设有三个事件处理程序函数,它们操纵清单5所示的共用数据。它们处理页面加载事件、单击按钮事件和来自XML请求的应答事件。页面加载事件发出某个异步请求来要求获取数据并指定请求-应答事件处理程序,该处理程序处理接收到的数据,并将其加载到共用数据结构。单击按钮事件处理程序也影响共用数据结构。为了避免这些事件处理程序发生冲突,可以通过清单6所示的Mutex将它们转变成command并加以调用(假设JavaScript include文件mutex.js中包含Map和Mutex)。注意,虽然可以使用优美的类继承机制来实现Command子类,但是该代码说明了最简单的方法,该方法仅需要全局变量NEXT_CMD_ID。
清单6. 转化为同步事件处理程序的web页面
<html>
<script src="mutex.js"></script>
<script language="JavaScript">
function requestData (){
new Mutex(new RequestDataCmd(),"go"); }
function processReply(){
new Mutex(new ProcessReplyCmd(),"go"); }
function clearArea (){
new Mutex(new ClearAreaCmd(),"go"); }
function newState (){
if (XMLreq.readyState==4) processReply(); }
var NEXT_CMD_ID = 0;
function RequestDataCmd(){
this.id = ++NEXT_CMD_ID;
this.go = function(){
...set up asynchronous XML request...
XMLreq.onreadystatechange = NewState;
...launch XML request...
}
}
function ProcessReplyCmd(){
this.id = ++NEXT_CMD_ID;
this.go = function(){
var transformedData = ...process data to HTML...
OutputArea.innerHTML = transformedData + "<br>";
}
}
function ClearAreaCmd(){
this.id = ++NEXT_CMD_ID;
this.go = function(){
OutputArea.innerHTML = "cleared<br>"; }
}
</script>
<body onload="requestData();">
<input type="button" value="clear" onclick="clearArea()">
<div id="OutputArea"/>
</body>
</html>
已经通过Mutex将这三个事件处理程序函数转变为调用它们的初始逻辑(当前都被预包装于command类中)。各个command类定义一个独特的标识符和一个包含临界区逻辑的方法,从而满足了command接口的要求。
结束语
借助于AJAX和RIA,构建复杂的动态用户界面的推动力正在促使开发人员使用先前与胖GUI客户端紧密联系的设计模式(例如:模型-视图-控制器)。随着视图和控制器的定义模块化,且每一个都带有自己的事件和事件处理程序(除了共用数据模型),发生冲突的机率成倍提高。通过把事件处理逻辑封装到Command类中,不仅可以使用Wallace变体,而且为提供丰富的撤消/重做功能、脚本编写界面和单元测试工具创造了条件。
.
分页: [
1] [
2]
TAG:
AJAX 揭秘 程序