Prototype框架提供了基于JavaScript语言的面向对象风格的AJAX库,使编写动态WEB程序成为可能。基于Prototype的Scriptaculous的流行就是一个很好的证明。<o:p></o:p>
<o:p></o:p>Prototype封装了Form、Element和Event,并为Form提供了Observer模式以便于进行事件管理和减少依赖。<o:p></o:p>
问题:<o:p></o:p>
<o:p></o:p>Prototype设计了两种Observer,一种基于Timeout,一种基于事件。但无法支持普通对象级别的Observer。例如在调用A对象的X 方法之后触发B对象的Y方法。本文将尝试一种在对象级别实现Observer的方式。<o:p></o:p>
分析: <o:p></o:p><o:p></o:p>Observer模式实现在“被观察者”的行为发生变化时,向多个对象(观察者)发生消息(并由该对象完成Update操作)。面向对象语言借助Interface实现Observer模式。如Java中的java.util.Observable相当于Subject(被观察者),而java.util.Observer接口的实现者(观察者)完成Update操作。
上述方式对于降低类之间依赖不错。但是我们必须从特定的类继承或实现特定的接口。Observer消息触发方式导致问题也需要考虑。详见:http://www.microsoft.com/china/MSDN/library/architecture/patterns/esp/DesObserver.mspx?mfr=true<o:p></o:p>
当然,我们可以在JavaScript中按照上述结构实现Observer会导致更多问题,例如如何实现接口编程?即使这个问题很容易解决,无论从理解和使用上这种模式都不太方便、不够直接。<o:p></o:p>
设计:<o:p></o:p>
再次聚焦Observer模式并观察它的核心,会发现如何实现消息触发是关键。一旦ConcreteSubject对象拥有ConcreteObserver的引用,在消息触发时就可以直接调用后者的Update方法。<o:p></o:p>
<o:p></o:p>
代码执行顺序:<o:p></o:p>
在concreteSubject的对象内部:<o:p></o:p>
if(this.stateChanged())<o:p></o:p>
concreteObservers.update(this,args);<o:p></o:p>
再看我的问题:在调用A对象X方法之后调用B对象的Y方法。<o:p></o:p>
在A对象内部:<o:p></o:p>
this.X();<o:p></o:p>
B.Y();<o:p></o:p>
<o:p></o:p>动态语言特性支持在Runtime时刻改变对象(数据和行为)。考虑引入对象Observer及方法register。用户期望A对象的X方法调用后触发B对象Y方法时,将A对象、X方法名称和期望的动作(B.Y)传入register方法,然后在该方法中改写X的行为。<o:p></o:p>
A. _$_X = A.X;<o:p></o:p>
A.X = {this._$_X(); B.Y();}<o:p></o:p>
<o:p></o:p>
同时增加unregister方法设法恢复A对象的行为(X方法)。<o:p></o:p>
<o:p> </o:p>
代码:<o:p> </o:p>
- var StringBuffer = Class.create();
- StringBuffer.prototype = {
- emptyString:"",
- initialize:function(){
- this.data=[];
- },
- clear:function(){
- this.data.length=0;
- },
- append:function(){
- for(var i=0,len=arguments.length;i
- this.data[this.data.length]=arguments[i];
- }
- return this;
- },
- toString:function(){
- return this.data.join(this.emptyString);
- }
- };
- var Observer = Class.create();
- Observer.prototype = {
- initialize:function(){
- },
- /**
- * register the action to the object's method
- * @param {Object} object
- * @param {String} method
- * @param {String} action
- */
- register:function(object,method,action){
- if(!object || !method || !action || method == typeof String || action == typeof String)return;
- //checks whether the method is existed.
- var f = object[method];
- if(!f)return;
- //copy, rename the method and replace it as a new method.
- var _$_f = "_$_"+method;
- if(!object[_$_f]){
- object[_$_f] = f;
- object[method]= this.createFunction(method,action);
- }
- },
- /**
- * unregister the action from the object's method
- * @param {Object} object
- * @param {Object} method
- */
- unregister:function(object,method){
- if(!object||!method)return;
- var _$_f = "_$_"+method;
- if(object[_$_f]){
- object[method] = null;
- object[method] = object[_$_f];
- object[_$_f] = null;
- }
- },
- /**
- * create a new function that invokes both the method and the action
- * @param {String} method
- * @param {String} action
- */
- createFunction:function(method,action){
- var sb = new StringBuffer();
- sb.append("this[\"_$_",method,"\"]();\r",action);
- return new Function(sb.toString());
- }
- }