DemoObserver

Observer Mode Demo

by everdom

HTML

<html>
<head>
    <title>Demo</title>
    <meta http-equiv="content-type" content="text/html;charset=gbk">
</head>
<body>
</body>
</html>

JavaScript

//被观察者接口
function IObserverable()
{
}
IObserverable.prototype={
    addObserver:
        function(observer){},
    removeObserver:
        function(observer){},
    notify:
        function(){}
};
//观察者接口
function IObserver()
{
}
IObserver.prototype={
    update:
        function(){}
};

//方块类接口
function IBox()
{
}
IBox.prototype=new IObserver();

//方块1
function Box1($element)
{
    this.$element=$element;
}
Box1.prototype=new IBox();
Box1.prototype.update=function(){
    this.$element.animate(
    {
        marginLeft:"+300px"
    },1000)
    .animate(
    {
        marginLeft:"0px"
    },100);
};

//方块2
function Box2($element)
{
    this.$element=$element;
}
Box2.prototype=new IBox();
Box2.prototype.update=function(){
    this.$element.animate({
        opacity:"hide",
        borderWidth:"10px"
    },1000, "swing", function(){
        $(this).css({
            marginLeft:"100px"
        });
    });
    this.$element.animate({
        opacity:"show",
        borderWidth:"20px"
    },1000,"swing");
    this.$element.animate({
        opacity:"hide",
        borderWidth:"2px",
        marginLeft:"0px"
    },1000,"swing",function(){
        $(this).fadeIn(1000);
    });
};

//方块3
function Box3($element)
{
    this.$element=$element;
}
Box3.prototype=new IBox();
Box3.prototype.update=function(){
    this.$element.animate({
        width:"900px",
        height:"100px"
    },1000)
    .delay(500)
    .animate({
        width:"100px",
        height:"100px"
    },1000);
};

//按钮类
function Button($element)
{
    this.observers=new Array();
}
Button.prototype=new IObserverable();
Button.prototype.addObserver=function(observer){
    this.observers.push(observer);
};
Button.prototype.removeObserver=function(observer){
    this.observers.remove(observer);
};
Button.prototype.notify=function(){
    for(var i=0; i<this.observers.length; i++)
    {
        this.observers[i].update();
    }
};

//演示函数
function demoObserver()
{
    var $box1=SimpleFactory.createBox("box1",{
  ...