基于Prototype实现对象级别Observer模式

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> 

 

js 代码

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());
    }
}

• testObserver.zip (552 Bytes)
• 描述: testObserver.htm
• 下载次数: 51

分享到：

GWT开发利器之Cypal Studio for GWT | 第一个ActionScript MySQL Driver：asSQL ...

• 2007-06-06 18:48
• 浏览 3178
• 评论(6)
• 论坛回复 / 浏览 (6 / 4929)
• 分类:Web前端
• 查看更多

评论

6 楼 sp42 2007-06-06  

Oh～God Bless you,guys,
--至少在AJAX时代里，还允许我们名正言顺地玩一下js.再看看一个command模式的小小实现，嘻嘻～
先定义一个Command对象，代码如下：

function Command(obj) {
    var commandObj = obj;       // save the reference of working object
    var oldProp = new Object(); // save old properties 
    
    // set new properties and save old properties
    this.Do = function() {
        for (var o in this) {
            oldProp[o] = commandObj[o];
            commandObj[o] = this[o];
        }
    }
    
    // restore old properties
    this.Undo = function() { 
        for (var o in oldProp) {
            commandObj[o] = oldProp[o];
        }

        delete oldProp;
        oldProp = new Object();
    }
}

如果要调用，这样写就可以了：

// "mc" is an object that has _alpha and _x attributes

var com = new Command(mc);
com._alpha = 20;
com._x = 200;
com.Do();
// do something...
// remember to save this Command somewhere...

// now, undo it! 
com.Undo();

5 楼 jianfeng008cn 2007-06-06  

想对自己说好好学学设计模式吧，那是思想而不是单纯的code，无论你是js java lisp 还是smalltalk。

4 楼 radar 2007-06-06  

sp42 写道

radar 写道

http://yuiblog.com/blog/2007/01/17/event-plan/
http://developer.yahoo.com/yui/docs/CustomEvent.js.html

yui早就以这来设计组件了,看看yui,yui-ext充满了event.
yui-ext对其进行一定的扩展.

另外dojo.connect更是用的有点走火魔了。

yui-ext的observable简直就是我的最爱，没办法--太sexy了
－－我甚至把它应用在服务端的JS(asp)

s
其实没必要把obserbable看的那么神秘高深的.
都是被java害苦的,其实对于很多动态语言来说,这不算什么.

aop其实也是这样,在java,c#中,aop好象是救世主一样,在很多动态语言中,什么aop什么的,语言级别就支持了.

还有设计模式,在动态语言眼中, 小kiss啦.

尤其是在服务器端,选择太多了.


感叹一声,和我一样,生长在java,c#阳光下的coder

3 楼 sp42 2007-06-06  

radar 写道

http://yuiblog.com/blog/2007/01/17/event-plan/
http://developer.yahoo.com/yui/docs/CustomEvent.js.html

yui早就以这来设计组件了,看看yui,yui-ext充满了event.
yui-ext对其进行一定的扩展.

另外dojo.connect更是用的有点走火魔了。

yui-ext的observable简直就是我的最爱，没办法--太sexy了
－－我甚至把它应用在服务端的JS(asp)

2 楼 radar 2007-06-06  

http://yuiblog.com/blog/2007/01/17/event-plan/
http://developer.yahoo.com/yui/docs/CustomEvent.js.html

yui早就以这来设计组件了,看看yui,yui-ext充满了event.
yui-ext对其进行一定的扩展.

另外dojo.connect更是用的有点走火魔了。

1 楼 sp42 2007-06-06  

Observer 100%是整个ajax中最为sex的一个