脚本模拟事件机制，基于MVP重写声文同步（without dojo lib）

资料：cab与mvp模式 http://www.agilelabs.cn/blogs/wind_tower/archive/2006/01/26/626.aspx
Fowler MVP模式 http://www.martinfowler.com/eaaDev/ModelViewPresenter.html

之前一篇文章中用dojo的事件订阅、发布机制实现了声文同步效果，相关信息可以参考http://www.cnblogs.com/sharplife/archive/2006/08/22/483476.aspx 由于项目需要，改用了轻量级的客户端库prototype，抛弃dojo的事件机制，因此重写声文同步的实现，顺面利用昨天晚上时间总结一下，我下面的介绍的实现中用到些prototype库中元素，但其实可以很方便的改成完全native的js实现。

对于实现中涉及的传输数据的json模型可以参见之前的文章，这次实现采用mvp模式，说的明了些与mvc模式的不同处就是完全解除了model、view之间的耦合，也即model和view可以相互不知道对方的存在，用presenter控制器实现view、model的交互、更新(和之前的实现功能上是一致肯定会有许多相似处)。

//AudioUtil class
2var AudioUtil=Class.create();
3//ParagraphModel class
var ParagraphModel=Class.create();

//SentenceModel class
var SentenceModel=Class.create();
//ParagraphPresenter class
2var ParagraphPresenter=Class.create();
3//ParagraphView class
2var ParagraphView=Class.create();
3ParagraphView.prototype= initialize:function(sens,container) $A(container.childNodes).each(function(node) container.removeChild(node);
7 });
8 container.innerHTML='';
9 container.innerText='';
10
11 var span = document.createElement("span");
12 var br=document.createElement("br");
13 var _this=this;
14 sens.each(function(sen) if(!(/^\|\|。$/.test(sen._jsonSentence.SentenceText))) var sp=span.cloneNode(false);
17 sp.id=sen.id;
18 sp.appendChild(document.createTextNode(sen._jsonSentence.SentenceText));
19 sp.appendChild(br.cloneNode(false));
20 container.appendChild(sp);
21
22 sp.onclick=_this.onCick.bind(_this,sen);
23 sp.ondblclick=_this.onDbClick.bind(_this,sen);
24 }
25 });
26 this.select(sens[0]);
27 },
28 select:function(sen) var cur=$$('span.current')[0];
30 if(cur)
31 Element.removeClassName(cur,'current');
32 var ele=$(sen.id);
33 if(ele)
34 Element.addClassName(ele,'current');
35 },
36 onCick:function(e) this.select(e);
38 if(this.click!=Prototype.emptyFunction)
39 this.click(e);
40 },
41 click:Prototype.emptyFunction,
42 onDbClick:function(e) if(this.dbClick!=Prototype.emptyFunction)
44 this.dbClick(e);
45 },
46 dbClick:Prototype.emptyFunction
47};
ParagraphView的首要任务是根据传入的sentence数据及html元素将model展现在web页面上，其中完成了各sentence在web页面上的单双击触发ParagraphView的click、dbclick事件（将各自本身sentence对象做参数传入）的操作。

demo效果截图就不放了，实现一般的声文同步（如歌词秀应该不成问题），总结一下，本次实现并没有过多考虑js在ie上的memory leak问题，本实现用了n多js closure，想是循环引用是免不了的了，优化应该有许多可以做吧，就先说到这了（没做较大段落文本的测试）。
[回应下之前的文章，现在js的开发、调试环境越来越好了，而RIA的解决方案也增多了]