设计模式 —— 观察者模式

2014年8月31日 chen

观察者（Observer）模式：

　　观察者模式是对象的行为模式，又叫发布-订阅(Publish/Subscribe)模式、模型-视图(Model/View)模式、源-监听器(Source/Listener)模式或从属者(Dependents)模式。

　　观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态上发生变化时，会通知所有观察者对象，使它们能够自动更新自己。

　下面以一个简单的示意性实现为例，讨论观察者模式的结构。

观察者模式

观察者模式所涉及的角色有：

●　　抽象主题(Subject)角色：抽象主题角色把所有对观察者对象的引用保存在一个聚集（比如ArrayList对象）里，每个主题都可以有任何数量的观察者。抽象主题提供一个接口，可以增加和删除观察者对象，抽象主题角色又叫做抽象被观察者(Observable)角色。

●　　具体主题(ConcreteSubject)角色：将有关状态存入具体观察者对象；在具体主题的内部状态改变时，给所有登记过的观察者发出通知。具体主题角色又叫做具体被观察者(Concrete Observable)角色。

●　　抽象观察者(Observer)角色：为所有的具体观察者定义一个接口，在得到主题的通知时更新自己，这个接口叫做更新接口。

●　　具体观察者(ConcreteObserver)角色：存储与主题的状态自恰的状态。具体观察者角色实现抽象观察者角色所要求的更新接口，以便使本身的状态与主题的状态像协调。如果需要，具体观察者角色可以保持一个指向具体主题对象的引用。

案例：

星际争霸中，重工厂的附件可以升级坦克支架。如果有多个重工厂附件时，其中一个升级了坦克支架那么其他几个附件中，坦克支架图片就会消失并且不能升级。

/**
 * @desc 抽象主题角色类
 */
abstract class Subject {
    /**
     * @desc 存放注册对象
     */
    private $_list = array();

    /**
     * @desc 注册对象
     */
    public function attach( iObserver $observer ) {
        $this -> _list[] = $observer;
    }

    /**
     * @desc 注销对象
     */
    public function detach( iObserver $observer ) {

    }

    /**
     * @desc 通知所有注册对象
     */
    public function nodify( iObserver $observer, $option, $status ) {
        foreach( $this -> _list as $key => $val ) {
            if( $val === $observer ) {
                $val -> update( $option, $status );
            } else {
                $val -> update( $option, 1 - $status );
            }
        }
    }

}

/**

* @desc 抽象主题角色类

abstract class Subject {

/**

* @desc 存放注册对象

private $_list = array();

/**

* @desc 注册对象

public function attach( iObserver $observer ) {

$this -> _list[] = $observer;

}

/**

* @desc 注销对象

public function detach( iObserver $observer ) {

}

/**

* @desc 通知所有注册对象

public function nodify( iObserver $observer, $option, $status ) {

foreach( $this -> _list as $key => $val ) {

if( $val === $observer ) {

$val -> update( $option, $status );

} else {

$val -> update( $option, 1 - $status );

}

/**
 * @desc 具体主题角色类
 */
class ConcreteSubject extends Subject {

    /**
     * @desc 改变状态
     */
    public function change( iObserver $observer, $option, $status ) {
        $this -> nodify( $observer, $option, $status );
    }   

}

/**

* @desc 具体主题角色类

class ConcreteSubject extends Subject {

/**

* @desc 改变状态

public function change( iObserver $observer, $option, $status ) {

$this -> nodify( $observer, $option, $status );

}

/**
 * @desc 抽象观察者角色类
 */
interface iObserver {
    /**
     * @desc 改变状态接口
     */
    public function update( $option, $status );
}

/**

* @desc 抽象观察者角色类

interface iObserver {

/**

* @desc 改变状态接口

public function update( $option, $status );

}

/**
 * @desc 具体观察者角色类
 */
class ConcreteObserver implements iObserver {

    public function update( $option, $status ) {
        if( empty( $status ) ) {
            echo "关闭{$option}";
            // ...
            // some code ...
            // ...
        } else {
            echo "升级{$option}";
            // ...
            // some code ...
            // ...
            
        }
    }

}

/**

* @desc 具体观察者角色类

class ConcreteObserver implements iObserver {

public function update( $option, $status ) {

if( empty( $status ) ) {

echo "关闭{$option}";

// ...

// some code ...

// ...

} else {

echo "升级{$option}";

// ...

// some code ...

// ...

}

// 创建监控着
$subject = new ConcreteSubject();

// 创建坦克附件
$ob_one = new ConcreteObserver();
$ob_two = new ConcreteObserver();

// 注册对象
$subject -> attach( $ob_one );
$subject -> attach( $ob_two );

// ob_one 开始升级坦克支架哦
$subject -> change( $ob_one, 'bracket', 1 );

// 创建监控着

$subject = new ConcreteSubject();

// 创建坦克附件

$ob_one = new ConcreteObserver();

$ob_two = new ConcreteObserver();

// 注册对象

$subject -> attach( $ob_one );

$subject -> attach( $ob_two );

// ob_one 开始升级坦克支架哦

$subject -> change( $ob_one, 'bracket', 1 );

设计模式

设计模式 —— 中介者模式

2014年8月19日 chen

所谓中介者模式就是用一个中介对象来封装一系列的对象交互，中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。

通过定义我们可以看出中介者主要是通过中介对象来封装对象之间的关系，使之各个对象在不需要知道其他对象的具体信息情况下通过中介者对象来与之通信。同时通过引用中介者对象来减少系统对象之间关系，提高了对象的可复用和系统的可扩展性。

但是就是因为中介者对象封装了对象之间的关联关系，导致中介者对象变得比较庞大，所承担的责任也比较多。它需要知道每个对象和他们之间的交互细节，如果它出问题，将会导致整个系统都会出问题。所以它比较容易应用也很容易误用。故当系统中出现了“多对多”交互复杂的关系群时，千万别急着使用中介者模式，你首先需要做的就是反思你的系统在设计上是不是合理。

下图是中介者模式的UML结构图：

它主要包含如下几个角色：

Mediator: 抽象中介者。定义了同事对象到中介者对象之间的接口。

ConcreteMediator: 具体中介者。实现抽象中介者的方法，它需要知道所有的具体同事类，同时需要从具体的同事类那里接收信息，并且向具体的同事类发送信息。

Colleague: 抽象同事类。

ConcreteColleague: 具体同事类。每个具体同事类都只需要知道自己的行为即可，但是他们都需要认识中介者。

在中介者模式中中介者对象处于核心地位，因为它定义了整个系统中所有具体同事类之间的关系。在整个系统中它主要承担两个方面的责任。

1、结构上起到中转作用。通过中介者对象对关系的封装，使得具体的同事类不再需要显示的引用其他对象，它只需要通过中介者就可以完成与其他同事类之间的通信。

2、行为上起到协作作用。中介者对同事类之间的关系进行封装，同事类在不需要知道其他对象的情况下通过中介者与其他对象完成通信。在这个过程中同事类是不需要指明中介者该如何做，中介者可以根据自身的逻辑来进行协调，对同事的请求进一步处理，将同事成员之间的关系行为进行分离和封装。

同时由于中介者对对象的关系进行了封装，使得各个同事类之间的耦合减少了，使得他们可以独立改变和复用。

案例：

房东与租客通过房屋中介进行联系。

/**
 * @desc 基类 人，规定必须存在2个方法，联系及获取信息
 */
abstract class Person {
    protected $_name;
    protected $_mediator;

    public function __construct( $name, Mediator $mediator ) {
        $this -> _name = $name;
        $this -> _mediator = $mediator;
    }

    public abstract function contact( $message );
    public abstract function getMessage( $message );
}

 /**
  * @desc 房东 具体实现2个方法
  */
class HouseOwner extends Person {
    public function contact( $message ){
        $this -> _mediator -> contact( $message, $this );
    }

    public function getMessage( $message ) {
        echo $message ;
    }
}

/**
 * @desc 租客 具体实现2个方法
 */
class Tenant extends Person {
    public function contact( $message ){
        $this -> _mediator -> contact( $message, $this );
    }

    public function getMessage( $message ) {
        echo $message ;
    }
}

/**

* @desc 基类人，规定必须存在2个方法，联系及获取信息

abstract class Person {

protected $_name;

protected $_mediator;

public function __construct( $name, Mediator $mediator ) {

$this -> _name = $name;

$this -> _mediator = $mediator;

}

public abstract function contact( $message );

public abstract function getMessage( $message );

}

/**

* @desc 房东具体实现2个方法

class HouseOwner extends Person {

public function contact( $message ){

$this -> _mediator -> contact( $message, $this );

}

public function getMessage( $message ) {

echo $message ;

}

/**

* @desc 租客具体实现2个方法

class Tenant extends Person {

public function contact( $message ){

$this -> _mediator -> contact( $message, $this );

}

public function getMessage( $message ) {

echo $message ;

}

/**
 * @desc 中介基类
 */
abstract class Mediator {
    protected $_houseOwner;
    protected $_tenant;
    public abstract function contact( $message, Person $person );
}

/**
 * @desc 具体实现
 */
class MediatorStructure extends Mediator {

    public function setHouseOwner( HouseOwner $houseOwner ) {
        $this -> _houseOwner = $houseOwner;
    }
    public function setTenant( Tenant $tenant ) {
        $this -> _tenant = $tenant;
    }

    public function contact( $message, Person $person ) {
         if( $person == $this ->_houseOwner ) {
            $this -> _tenant -> getMessage( $message );
         } else {
            $this -> _houseOwner -> getMessage( $message );
         }
    }
}

/**

* @desc 中介基类

abstract class Mediator {

protected $_houseOwner;

protected $_tenant;

public abstract function contact( $message, Person $person );

}

/**

* @desc 具体实现

class MediatorStructure extends Mediator {

public function setHouseOwner( HouseOwner $houseOwner ) {

$this -> _houseOwner = $houseOwner;

}

public function setTenant( Tenant $tenant ) {

$this -> _tenant = $tenant;

}

public function contact( $message, Person $person ) {

if( $person == $this ->_houseOwner ) {

$this -> _tenant -> getMessage( $message );

} else {

$this -> _houseOwner -> getMessage( $message );

}

具体调用

// 创建中介者
$mediator = new MediatorStructure();
// 创建房东
$houseowner = new HouseOwner( 'zhangsan', $mediator );
// 创建租客
$tenant = new Tenant( 'lisi', $mediator );
// 中介关联房东和租客
$mediator -> setHouseOwner( $houseowner );
$mediator -> setTenant( $tenant );

// 房东和租客通过中介联系
$houseowner -> contact( 'Hello' );
$tenant -> contact( 'World' );

// 创建中介者

$mediator = new MediatorStructure();

// 创建房东

$houseowner = new HouseOwner( 'zhangsan', $mediator );

// 创建租客

$tenant = new Tenant( 'lisi', $mediator );

// 中介关联房东和租客

$mediator -> setHouseOwner( $houseowner );

$mediator -> setTenant( $tenant );

// 房东和租客通过中介联系

$houseowner -> contact( 'Hello' );

$tenant -> contact( 'World' );

参考链接：

http://www.cnblogs.com/chenssy/p/3348520.html

设计模式

设计模式 —— 迭代器模式

2014年8月18日 chen

迭代器 (Iterator)模式：迭代器模式提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。

迭代器模式由以下角色组成：

迭代器角色(Iterator)：迭代器角色负责定义访问和遍历元素的接口。

具体迭代器角色(Concrete Iterator)：具体迭代器角色要实现迭代器接口，并要记录遍历中的当前位置。

容器角色(Container)：容器角色负责提供创建具体迭代器角色的接口。

具体容器角色(Concrete Container)：具体容器角色实现创建具体迭代器角色的接口。这个具体迭代器角色与该容器的结构相关。

迭代器设计模式结构如如下：

具体如下：

class CD {
    public $band;
    public $title;
    public $trackList = array();

    public function __construct( $band, $title, $trackList ) {
        $this -> band = $band;
        $this -> title = $title;
        $this -> trackList = $trackList;
    }

    public function addTrack( $track ) {
        $this -> trackList[] = $track;
    }
}


class CDIterator implements Iterator {
    private $_CD = array();
    private $_valid = false;

    public function __construct( CD $CD ) {
        $this -> _CD = $CD;
    }

    public function next() {
        $this -> _valid  = next( $this -> _CD -> trackList ) === false ? false : true;
    }

    public function rewind() {
        $this -> _valid  = reset( $this -> _CD -> trackList ) === false ? false : true;
    }

    public function valid() {
        return $this -> _valid;
    }

    public function current() {
        return current( $this -> _CD -> trackList );
    }

    public function key() {
        return key( $this -> _CD -> trackList );
    }
}

$cd = new CD( '五月天', '第二人生', array(
    '2012', '仓颉', '洗衣机', '歪腰', '干杯', '我不愿 让你一个人', '星空', '三个傻瓜'
) );

$it = new CDIterator( $cd );

$it -> rewind();

while ( $it -> valid() ) {
    print_r( $it -> current() . "\n" );
    $it -> next();
}

class CD {

public $band;

public $title;

public $trackList = array();

public function __construct( $band, $title, $trackList ) {

$this -> band = $band;

$this -> title = $title;

$this -> trackList = $trackList;

}

public function addTrack( $track ) {

$this -> trackList[] = $track;

}

class CDIterator implements Iterator {

private $_CD = array();

private $_valid = false;

public function __construct( CD $CD ) {

$this -> _CD = $CD;

}

public function next() {

$this -> _valid = next( $this -> _CD -> trackList ) === false ? false : true;

}

public function rewind() {

$this -> _valid = reset( $this -> _CD -> trackList ) === false ? false : true;

}

public function valid() {

return $this -> _valid;

}

public function current() {

return current( $this -> _CD -> trackList );

}

public function key() {

return key( $this -> _CD -> trackList );

}

$cd = new CD( '五月天', '第二人生', array(

'2012', '仓颉', '洗衣机', '歪腰', '干杯', '我不愿让你一个人', '星空', '三个傻瓜'

) );

$it = new CDIterator( $cd );

$it -> rewind();

while ( $it -> valid() ) {

print_r( $it -> current() . "\n" );

$it -> next();

}

设计模式

设计模式 —— 解释器模式

2014年8月17日 chen

解释器模式（Interpreter），给定一个语言，定义它的文法的一种表示，并定义一个解释器，用这个解释器使用该表示来解释语言中句子。解释器模式需要解决的是，如果一种特定类型的问题发生的频率足够高，那么可能就值得。

在开篇之前还是要科普几个概念：
抽象语法树：
解释器模式并未解释如何创建一个抽象语法树。它不涉及语法分析。抽象语法树可用一个表驱动的语法分析程序来完成，也可用手写的（通常为递归下降法）语法分析程序创建，或直接client提供。

解析器：
指的是把描述客户端调用要求的表达式，经过解析，形成一个抽象语法树的程序。

解释器：
指的是解释抽象语法树，并执行每个节点对应的功能的程序。

要使用解释器模式，一个重要的前提就是要定义一套语法规则，也称为文法。不管这套文法的规则是简单还是复杂，必须要有这些规则，因为解释器模式就是按照这些规则来进行解析并执行相应的功能的。

enter image description here

案例：

一个计算器。（目前只能加减/或者乘除，并且必须按照一定格式）

接口，让子类必须存在此方法

interface Node {
    public function interpret();
}

interface Node {

public function interpret();

}

主要用于存放数字的类

class ValueNode implements Node {

    private $_value;

    public function __construct( $value ) {
        $this -> _value = $value;
    }

    public function interpret() {
        return $this -> _value;
    }
}

class ValueNode implements Node {

private $_value;

public function __construct( $value ) {

$this -> _value = $value;

}

public function interpret() {

return $this -> _value;

}

符号抽象类。定义规则，存在符号左侧变量及右侧变量。

abstract class SymbolNode implements Node {

    protected $_left;
    protected $_right;

    public function __construct( $left, $right ) {
        $this -> _left = $left;
        $this -> _right = $right;
    }

}

abstract class SymbolNode implements Node {

protected $_left;

protected $_right;

public function __construct( $left, $right ) {

$this -> _left = $left;

$this -> _right = $right;

}

一下是加减乘除操作类

/**
 * @desc 加法
 */
class AddNode extends SymbolNode {
    public function __construct( $left, $right ) {
        parent::__construct($left, $right);
    }

    public function interpret() {
        return $this -> _left -> interpret() + $this -> _right -> interpret();
    }
}

/**
 * @desc 减法
 */
class SubNode extends SymbolNode {
    public function __construct( $left, $right ) {
        parent::__construct($left, $right);
    }

    public function interpret() {
        return $this -> _left -> interpret() - $this -> _right -> interpret();
    }
}

/**
 * @desc 乘法
 */
class MulNode extends SymbolNode {
    public function __construct( $left, $right ) {
        parent::__construct($left, $right);
    }

    public function interpret() {
        return $this -> _left -> interpret() * $this -> _right -> interpret();
    }
}

/**
 * @desc 除法
 */
class DivNode extends SymbolNode {
    public function __construct( $left, $right ) {
        parent::__construct($left, $right);
    }

    public function interpret() {
        return $this -> _left -> interpret() / $this -> _right -> interpret();
    }
}

/**

* @desc 加法

class AddNode extends SymbolNode {

public function __construct( $left, $right ) {

parent::__construct($left, $right);

}

public function interpret() {

return $this -> _left -> interpret() + $this -> _right -> interpret();

}

/**

* @desc 减法

class SubNode extends SymbolNode {

public function __construct( $left, $right ) {

parent::__construct($left, $right);

}

public function interpret() {

return $this -> _left -> interpret() - $this -> _right -> interpret();

}

/**

* @desc 乘法

class MulNode extends SymbolNode {

public function __construct( $left, $right ) {

parent::__construct($left, $right);

}

public function interpret() {

return $this -> _left -> interpret() * $this -> _right -> interpret();

}

/**

* @desc 除法

class DivNode extends SymbolNode {

public function __construct( $left, $right ) {

parent::__construct($left, $right);

}

public function interpret() {

return $this -> _left -> interpret() / $this -> _right -> interpret();

}

计算器类，用户解析表达式，并进行计算。

class Calculator {

    private $_statement;
    private $_node;

    public function build( $statement ) {
        $statement = explode( ' ', $statement );
        $stack = array();

        /**
         * 非符号（即数字）时，创建ValueNode 实例，存放入 $stack 
         * 当符号时，使用 + - * / 方法
         */

        for( $i = 0; $i < count( $statement ); $i++ ) {

            if( $statement[$i] == '+' ) {
                $left = array_pop( $stack );
                $right = new ValueNode( $statement[++$i] );
                array_push( $stack, new AddNode( $left, $right ) );
            } else if( $statement[$i] == '-' ) {
                $left = array_pop( $stack );
                $right = new ValueNode( $statement[++$i] );
                array_push( $stack, new SubNode( $left, $right ) );
            } else if( $statement[$i] == '*' ) {
                $left = array_pop( $stack );
                $right = new ValueNode( $statement[++$i] );
                array_push( $stack, new MulNode( $left, $right ) );
            } else if( $statement[$i] == '/' ) {
                $left = array_pop( $stack );
                $right = new ValueNode( $statement[++$i] );
                array_push( $stack, new DivNode( $left, $right ) );
            } else {
                array_push( $stack, new ValueNode( $statement[$i] ) );
            }

        }

        $this -> _node = array_pop( $stack );
    }

    public function compute() {
        return $this -> _node -> interpret();
    }

}

class Calculator {

private $_statement;

private $_node;

public function build( $statement ) {

$statement = explode( ' ', $statement );

$stack = array();

/**

* 非符号（即数字）时，创建ValueNode 实例，存放入 $stack

* 当符号时，使用 + - * / 方法

for( $i = 0; $i < count( $statement ); $i++ ) {

if( $statement[$i] == '+' ) {

$left = array_pop( $stack );

$right = new ValueNode( $statement[++$i] );

array_push( $stack, new AddNode( $left, $right ) );

} else if( $statement[$i] == '-' ) {

$left = array_pop( $stack );

$right = new ValueNode( $statement[++$i] );

array_push( $stack, new SubNode( $left, $right ) );

} else if( $statement[$i] == '*' ) {

$left = array_pop( $stack );

$right = new ValueNode( $statement[++$i] );

array_push( $stack, new MulNode( $left, $right ) );

} else if( $statement[$i] == '/' ) {

$left = array_pop( $stack );

$right = new ValueNode( $statement[++$i] );

array_push( $stack, new DivNode( $left, $right ) );

} else {

array_push( $stack, new ValueNode( $statement[$i] ) );

}

$this -> _node = array_pop( $stack );

}

public function compute() {

return $this -> _node -> interpret();

}

调用计算

$statement = "3 + 2 + 1 - 1 - 2 - 3 + 999";
$calculator = new Calculator();
$calculator -> build($statement);
$rs = $calculator -> compute();

print_r( $rs );

$statement = "3 + 2 + 1 - 1 - 2 - 3 + 999";

$calculator = new Calculator();

$calculator -> build($statement);

$rs = $calculator -> compute();

print_r( $rs );

一个比简单粗俗的计算器完成。

参考链接：

http://www.cnblogs.com/chenssy/p/3346427.html

http://www.html-js.com/article/2085

设计模式

设计模式 —— 工厂模式

2014年8月16日 chen

工厂方法模式（Factory Method），定义一个用于创建对象的接口，让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。说的通俗一点吧，就是把将工厂类抽象成接口，具体的代工厂去实现此接口，同时把产品类也抽象成接口，再构造具体的产品去实现些接口。

案例：

创建不同类型的灯泡

interface iLight {
    public function turnOn();
    public function trunOff();
}

class TubeLight implements iLight {
    public function turnOn() {
        echo 'TubeLight on';
    }

    public function trunOff() {
        echo 'TubeLight off';
    }
}

class BulbLight implements iLight {
    public function turnOn() {
        echo 'BulbLight on';
    }

    public function trunOff() {
        echo 'BulbLight off';
    }
}

class LightFactory {
    public static function create( $type ) {
        $class = $type . 'Light';
        return new $class();
    }
}

LightFactory::create( 'Tube' ) -> turnOn();

interface iLight {

public function turnOn();

public function trunOff();

}

class TubeLight implements iLight {

public function turnOn() {

echo 'TubeLight on';

}

public function trunOff() {

echo 'TubeLight off';

}

class BulbLight implements iLight {

public function turnOn() {

echo 'BulbLight on';

}

public function trunOff() {

echo 'BulbLight off';

}

class LightFactory {

public static function create( $type ) {

$class = $type . 'Light';

return new $class();

}

LightFactory::create( 'Tube' ) -> turnOn();

工厂模式与建造者模式的类似。但是还是有一些区别的。

建造模式侧重于“装配”、“拼装”…而工厂侧重于“生产”
建造模式的导演，很清楚产生的步骤，因为他把握这生产者的接口（知道生产步骤）而工厂，却不知道，他只知道自己产出产品
建造模式屏蔽的是“装配”的细节，工厂模式则是屏蔽“构造”的细节…（有点晕其实）

建造模式，适用的范围是：

1）当产品对象非常复杂，无法一步到位生产，需要有N个部件拼合才能成行，但是步骤是固定的（重点），不过部件的属性可能不一样（内部表象不一样）

2）产品里面的需要填充的属性，比较难取得，需要另外的生产者进行生产才行，概括起来说就是，建造模式是当产品比较复杂（不能一下子完成），而且生产步骤已经稳定，但是同一个步骤产出的“部件”可能属性不一样！这时候使用建造者模式最好

另一个角度说，建造模式比工厂模式“宏观”，建造模式里面的生产者可以是工厂模式！

CSS

CSS3 —— animation 之 steps方式过渡

2014年8月13日 chen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Step</title>
    <style>
        @-webkit-keyframes step { 
          0% { background-position:0px -0%; }
          100% { background-position:0px -400%; }
        }
        @keyframes step { 
          0% { background-position:0px -0%; }
          100% { background-position:0px -400%; }
        }
        div { 
          height:35px; width:32px;
          -webkit-animation:step 300ms steps(4) infinite; /* infinite为无限次 */
          animation:step 300ms steps(4) infinite; /* steps( 4 ) 分4步执行 */
          background:url( tsj.png );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<!DOCTYPE html>

<head>

<style>

@-webkit-keyframes step {

0% { background-position:0px -0%; }

100% { background-position:0px -400%; }

}

@keyframes step {

0% { background-position:0px -0%; }

100% { background-position:0px -400%; }

}

div {

height:35px; width:32px;

-webkit-animation:step 300ms steps(4) infinite; /* infinite为无限次 */

animation:step 300ms steps(4) infinite; /* steps( 4 ) 分4步执行 */

background:url( tsj.png );

}

</style>

</head>

<body>

</body>

</html>

测试连接

参考：

http://www.gbtags.com/gb/share/3213.htm

设计模式

设计模式 —— 外观模式

2014年8月13日 chen

Facade外观模式，是一种结构型模式，它主要解决的问题是：组件的客户和组件中各种复杂的子系统有了过多的耦合，随着外部客户程序和各子系统的演化，这种过多的耦合面临很多变化的挑战。

GoF《设计模式》中说道：为子系统中的一组接口提供一个一致的界面，Facade模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。

缺点就是，外观模式违反了开闭原则。

案例：

公司的web站点，每晚都要将其库存信息传递至公司内的不同系统。不过它是一个比较老的系统，并且只能处理大写的字符串。

具体操作： CD 对象 -> 属性转大写 -> 传输XML。

class CD {

    public $tracks = array();
    public $band   = '';
    public $title  = '';

    public function __construct( $tracks, $band, $title ) {
        $this -> tracks = $tracks;
        $this -> band = $band;
        $this -> title = $title;
    }
}

/**
 * @desc 转大写类
 */
class CDUpperCase {
    public static function makeString( CD $cd, $type ) {
        $cd -> $type = strtoupper( $cd -> $type );
    }

    public static function makeArray( CD $cd, $type ) {
        $cd -> $type = array_map( 'strtoupper', $cd -> $type );
    }
}

/**
 * @desc 转xml类
 */
class CDMakeXML {

    public static function create( CD $cd ) {

        $doc = new DOMDocument();

        $root = $doc -> createElement( 'CD' );
        $root = $doc -> appendChild( $root );

        $title = $doc -> createElement( 'TITLE', $cd -> title );
        $title = $root -> appendChild( $title );

        $band = $doc -> createElement( 'BAND', $cd -> band );
        $band = $root -> appendChild( $band );        

        $tracks = $doc -> createElement( 'TRACKS' );
        $tracks = $root -> appendChild( $tracks );

        foreach( $cd -> tracks as $track ) {
            $track = $doc -> createElement( 'TRACK', $track );
            $track = $tracks -> appendChild( $track );
        }

        return $doc -> saveXML();
    }

}

class CD {

public $tracks = array();

public $band = '';

public $title = '';

public function __construct( $tracks, $band, $title ) {

$this -> tracks = $tracks;

$this -> band = $band;

$this -> title = $title;

}

/**

* @desc 转大写类

class CDUpperCase {

public static function makeString( CD $cd, $type ) {

$cd -> $type = strtoupper( $cd -> $type );

}

public static function makeArray( CD $cd, $type ) {

$cd -> $type = array_map( 'strtoupper', $cd -> $type );

}

/**

* @desc 转xml类

class CDMakeXML {

public static function create( CD $cd ) {

$doc = new DOMDocument();

$root = $doc -> createElement( 'CD' );

$root = $doc -> appendChild( $root );

$title = $doc -> createElement( 'TITLE', $cd -> title );

$title = $root -> appendChild( $title );

$band = $doc -> createElement( 'BAND', $cd -> band );

$band = $root -> appendChild( $band );

$tracks = $doc -> createElement( 'TRACKS' );

$tracks = $root -> appendChild( $tracks );

foreach( $cd -> tracks as $track ) {

$track = $doc -> createElement( 'TRACK', $track );

$track = $tracks -> appendChild( $track );

}

return $doc -> saveXML();

}

创建实例

$title = 'Waste of a Rib';
$band = 'Never Again';
$tracks = array( 'What It Means', 'Brrr', 'GoodBye' );
$cd = new CD( $tracks, $band, $title );

$title = 'Waste of a Rib';

$band = 'Never Again';

$tracks = array( 'What It Means', 'Brrr', 'GoodBye' );

$cd = new CD( $tracks, $band, $title );

普通调用，如果需求更对那么每次调用的时候都需要写N多行代码。如下：

/********** 繁琐操作 ***********/
CDUpperCase::makeString( $cd, 'title' );
CDUpperCase::makeString( $cd, 'band' );
CDUpperCase::makeArray( $cd, 'tracks' );
print( CDMakeXML::create( $cd ) );
/********** 繁琐操作 ***********/

/********** 繁琐操作 ***********/

CDUpperCase::makeString( $cd, 'title' );

CDUpperCase::makeString( $cd, 'band' );

CDUpperCase::makeArray( $cd, 'tracks' );

print( CDMakeXML::create( $cd ) );

/********** 繁琐操作 ***********/

外观模式，把上面代码封装起来，其他地方调用时候只需一行代码即可。如下：

/********** 外观模式 ***********/

class Facade {
    public static function makeXMLCall( CD $cd ) {
        CDUpperCase::makeString( $cd, 'title' );
        CDUpperCase::makeString( $cd, 'band' );
        CDUpperCase::makeArray( $cd, 'tracks' );
        return CDMakeXML::create( $cd );
    }
}

print_r( Facade::makeXMLCall( $cd ) );

/********** 外观模式 ***********/

/********** 外观模式 ***********/

class Facade {

public static function makeXMLCall( CD $cd ) {

CDUpperCase::makeString( $cd, 'title' );

CDUpperCase::makeString( $cd, 'band' );

CDUpperCase::makeArray( $cd, 'tracks' );

return CDMakeXML::create( $cd );

}

print_r( Facade::makeXMLCall( $cd ) );

/********** 外观模式 ***********/

设计模式

设计模式 —— 委托模式

2014年8月11日 chen

委托模式是软件设计模式中的一项基本技巧。在委托模式中，有两个对象参与处理同一个请求，接受请求的对象将请求委托给另一个对象来处理。委托模式是一项基本技巧，许多其他的模式，如状态模式、策略模式、访问者模式本质上是在更特殊的场合采用了委托模式。委托模式使得我们可以用聚合来替代继承，它还使我们可以模拟mixin。

案例：

MP3文件播放列表，访问者可以选择下载M3U或者PLS格式的播放列表。

class PlayList {

    private $_songs;

    public function __construct() {
        $this -> _songs = array();
    }

    public function addSong( $location, $title ) {
        $this -> _songs[] = array(
            'location' => $location,
            'title' => $title
        );
    }

    public function getM3U() {
        // ...
        // some code
        // ...

        return $m3u;
    }

    public function getPLS {
        // ...
        // some code
        // ...   

        return $pls;
    }

}

class PlayList {

private $_songs;

public function __construct() {

$this -> _songs = array();

}

public function addSong( $location, $title ) {

$this -> _songs[] = array(

'location' => $location,

'title' => $title

);

}

public function getM3U() {

// ...

// some code

// ...

return $m3u;

}

public function getPLS {

// ...

// some code

// ...

return $pls;

}

添加歌曲，通过用户的命令下载播放列表。

$playlist = new PlayList();
$playlist -> add( '/* location */', '/* title */' );
$playlist -> add( '/* location */', '/* title */' );

if( $getType == 'M3U' ) {
    $playlist -> getM3U();
} else {
    $playlist -> getPLS();
}

$playlist = new PlayList();

$playlist -> add( '/* location */', '/* title */' );

if( $getType == 'M3U' ) {

$playlist -> getM3U();

} else {

$playlist -> getPLS();

}

如果说播放列表的格式越来越多了，那么if…else…更多了，那样很不美观和代码冗余。

我们可以委托者模式类解决这个问题。

Playlist是委托者，然后有m3u和pls等的被委托者。

playlist委托者存在一个私有变量存放被委托者，然后我们可以调用被委托者的方法，让用户下载其所要的格式。

class PlayList {

    private $_songs;
    private $_typeObject;

    public function __construct( $type ) {
        $this -> _songs = array();
        $object = "{$type}Playlist";
        $this -> _typeObject = new $object();
    }

    public function addSong( $location, $title ) {
        $this -> _songs[] = array(
            'location' => $location,
            'title' => $title
        );
    }

    public function getPlaylist() {
        $playlist = $this -> _typeObject -> getPlaylist( $this -> _songs );
        return $playlist;
    }

}

class m3uPlaylistDelegate() {
    public function getPlaylist {

        // ...
        // some code
        // ...   

        return $m3u;
    }
}

class plsPlaylistDelegate() {
    public function getPlaylist {

        // ...
        // some code
        // ...   

        return $pls;
    }
}

class PlayList {

private $_songs;

private $_typeObject;

public function __construct( $type ) {

$this -> _songs = array();

$object = "{$type}Playlist";

$this -> _typeObject = new $object();

}

public function addSong( $location, $title ) {

$this -> _songs[] = array(

'location' => $location,

'title' => $title

);

}

public function getPlaylist() {

$playlist = $this -> _typeObject -> getPlaylist( $this -> _songs );

return $playlist;

}

class m3uPlaylistDelegate() {

public function getPlaylist {

// ...

// some code

// ...

return $m3u;

}

class plsPlaylistDelegate() {

public function getPlaylist {

// ...

// some code

// ...

return $pls;

}

调用如下，代码就是如此清晰简洁。

$type = 'pls';
$playlist = new PlayList( $type );
$playlistContent = $playlist -> getPlaylist();

$type = 'pls';

$playlist = new PlayList( $type );

$playlistContent = $playlist -> getPlaylist();

设计模式

设计模式 —— 装饰模式

2014年8月10日 chen

Decorator装饰模式是一种结构型模式，它主要是解决：“过度地使用了继承来扩展对象的功能”，由于继承为类型引入的静态特质，使得这种扩展方式缺乏灵活性；并且随着子类的增多（扩展功能的增多），各种子类的组合（扩展功能的组合）会导致更多子类的膨胀（多继承）。继承为类型引入的静态特质的意思是说以继承的方式使某一类型要获得功能是在编译时。所谓静态，是指在编译时；动态，是指在运行时。

GoF《设计模式》中说道：动态的给一个对象添加一些额外的职责。就增加功能而言，Decorator模式比生成子类更为灵活。

案例：

有2款手机nokia和moto。有基本的打电话和发短信功能。

abstract class Phone {
    public abstract function callNumber();
    public abstract function sendMessage();
}

class NokiaPhone extends Phone {

    public function callNumber() {
        echo 'Nokia phone call somebody';
    }

    public function sendMessage() {
        echo 'Nokia phone send message';
    }

}

class MotoPhone extends Phone {

    public function callNumber() {
        echo 'Moto phone call somebody';
    }

    public function sendMessage() {
        echo 'Moto phone send message';
    }

}

abstract class Phone {

public abstract function callNumber();

public abstract function sendMessage();

}

class NokiaPhone extends Phone {

public function callNumber() {

echo 'Nokia phone call somebody';

}

public function sendMessage() {

echo 'Nokia phone send message';

}

class MotoPhone extends Phone {

public function callNumber() {

echo 'Moto phone call somebody';

}

public function sendMessage() {

echo 'Moto phone send message';

}

使用装饰模式可以为其随意的添加功能。

abstract class Decorator extends Phone {

    private $_phone;

    public function __construct( $phone ) {
        $this -> _phone = $phone;
    }

    public function callNumber() {
        $this -> _phone -> callNumber();
    }

    public function sendMessage() {
        $this -> _phone -> sendMessage();
    }

}

class GPSDecorator extends Decorator {

    public function __construct( $phone ) {
        parent::__construct( $phone );
    }

    public function GPS() {
        echo 'i have GPS';
    }

}

class BlueToothDecorator extends Decorator {
    public function __construct( $phone ) {
        parent::__construct( $phone );
    }

    public function BlueTooth() {
        echo 'i have BlueTooth';
    }
}

abstract class Decorator extends Phone {

private $_phone;

public function __construct( $phone ) {

$this -> _phone = $phone;

}

public function callNumber() {

$this -> _phone -> callNumber();

}

public function sendMessage() {

$this -> _phone -> sendMessage();

}

class GPSDecorator extends Decorator {

public function __construct( $phone ) {

parent::__construct( $phone );

}

public function GPS() {

echo 'i have GPS';

}

class BlueToothDecorator extends Decorator {

public function __construct( $phone ) {

parent::__construct( $phone );

}

public function BlueTooth() {

echo 'i have BlueTooth';

}

增加功能只需实例化一个功能类，并将目标类传入即可。

// moto havae bluetooth
$moto = new BlueToothDecorator( new MotoPhone() );
$moto -> BlueTooth();

// nokia have gps
$nokia = new GPSDecorator( new NokiaPhone() );
$nokia -> GPS();

// nokia have bluetooth too
// $nokia = new BlueToothDecorator( $nokia );
$nokia = new BlueToothDecorator( new GPSDecorator( new NokiaPhone() ) );
$nokia -> BlueTooth();

// moto havae bluetooth

$moto = new BlueToothDecorator( new MotoPhone() );

$moto -> BlueTooth();

// nokia have gps

$nokia = new GPSDecorator( new NokiaPhone() );

$nokia -> GPS();

// nokia have bluetooth too

// $nokia = new BlueToothDecorator( $nokia );

$nokia = new BlueToothDecorator( new GPSDecorator( new NokiaPhone() ) );

$nokia -> BlueTooth();

设计模式

设计模式 —— 建造者模式

2014年8月9日 chen

建造者模式

将一个复杂对象的构造与它的表示分离，使同样的构建过程可以创建不同的表示，这样的设计模式被称为建造者模式。

Builder模式主要用于“分步骤构建一个复杂的对象”。在这其中“分步骤”是一个稳定的乘法，而复杂对象的各个部分则经常变化。

Builder模式主要在于应对“复杂对象各个部分”的频繁需求变动。其缺点在于难以应对“分步骤构建算法”的需求变动。

案例：

设置房子基本框架，有门、窗、墙、地板等。

/**
 * @desc 房子
 */
class House {
    // 房子属性
    private $_door;
    private $_wall;
    private $_window;
    private $_floor;

    public function setDoor( $door ) {
        $this -> _door = $door;
    }

    public function setWall( $wall ) {
        $this -> _wall = $wall;
    }

    public function setWindow( $window ) {
        $this -> _window = $window;
    }

    public function setFloor( $floor ) {
        $this -> _floor = $floor;
    }

    // 展示房子
    public function show() {
        echo $this -> _door . ' ' . $this -> _wall . ' ' . $this -> _window . ' ' . $this -> _floor . "\n";
    }
}

/**

* @desc 房子

class House {

// 房子属性

private $_door;

private $_wall;

private $_window;

private $_floor;

public function setDoor( $door ) {

$this -> _door = $door;

}

public function setWall( $wall ) {

$this -> _wall = $wall;

}

public function setWindow( $window ) {

$this -> _window = $window;

}

public function setFloor( $floor ) {

$this -> _floor = $floor;

}

// 展示房子

public function show() {

echo $this -> _door . ' ' . $this -> _wall . ' ' . $this -> _window . ' ' . $this -> _floor . "\n";

}

假设我们需要造不同风格的房子。需要为其设置不同的属性。如下：

$chineseHouse = new House();
$chineseHouse -> setDoor( 'a' );
$chineseHouse -> setWall( 'b' );
$chineseHouse -> setWindow( 'c' );
$chineseHouse -> setFloor( 'd' );
$chineseHouse -> show();

$chineseHouse = new House();

$chineseHouse -> setDoor( 'a' );

$chineseHouse -> setWall( 'b' );

$chineseHouse -> setWindow( 'c' );

$chineseHouse -> setFloor( 'd' );

$chineseHouse -> show();

这样的代码，很不美观，写起来也很麻烦。

那么建造者模式的用处就来了。

设置一个建造者抽象类。

abstract class Builder {

    private $_house;

    protected $_door;
    protected $_wall;
    protected $_window;
    protected $_floor;

    public function __construct( $house ) {
        $this -> _house = $house;
        $this -> setHouseProperty();
    }

    public function getHouse() {
        return $this -> _house;
    }

    public function setHouseProperty() {
        $this -> _house -> setDoor( $this -> _door );
        $this -> _house -> setWall( $this -> _wall );
        $this -> _house -> setWindow( $this -> _window );
        $this -> _house -> setFloor( $this -> _floor );

        return $this;
    }

}

abstract class Builder {

private $_house;

protected $_door;

protected $_wall;

protected $_window;

protected $_floor;

public function __construct( $house ) {

$this -> _house = $house;

$this -> setHouseProperty();

}

public function getHouse() {

return $this -> _house;

}

public function setHouseProperty() {

$this -> _house -> setDoor( $this -> _door );

$this -> _house -> setWall( $this -> _wall );

$this -> _house -> setWindow( $this -> _window );

$this -> _house -> setFloor( $this -> _floor );

return $this;

}

如果我们需要中国风格的房子我们就继承它，并设置中国风格房子的属性。如下：

class ChineseBuilder extends Builder {

    public function __construct( $house ) {
        $this -> _door = 'a';
        $this -> _wall = 'b';
        $this -> _window = 'c';
        $this -> _floor = 'd';
        parent::__construct( $house );
    }
}

class ChineseBuilder extends Builder {

public function __construct( $house ) {

$this -> _door = 'a';

$this -> _wall = 'b';

$this -> _window = 'c';

$this -> _floor = 'd';

parent::__construct( $house );

}

我们也可以需要日本风格的房子，如下：

class JapaneseBuilder extends Builder {

    public function __construct( $house ) {
        $this -> _door = 'e';
        $this -> _wall = 'f';
        $this -> _window = 'g';
        $this -> _floor = 'h';
        parent::__construct( $house );
    }
}

class JapaneseBuilder extends Builder {

public function __construct( $house ) {

$this -> _door = 'e';

$this -> _wall = 'f';

$this -> _window = 'g';

$this -> _floor = 'h';

parent::__construct( $house );

}

最后使用起来，简单又美观。

$chineseStyle = new ChineseBuilder( new House() );
$japaneseStyle = new JapaneseBuilder( new House() );


$chineseStyle -> getHouse() -> show();
$japaneseStyle -> getHouse() -> show();

$chineseStyle = new ChineseBuilder( new House() );

$japaneseStyle = new JapaneseBuilder( new House() );

$chineseStyle -> getHouse() -> show();

$japaneseStyle -> getHouse() -> show();

老陈是一个普通的文艺二逼青年

月度归档：2014年08月

设计模式 —— 观察者模式

设计模式 —— 中介者模式

设计模式 —— 迭代器模式

设计模式 —— 解释器模式

设计模式 —— 工厂模式

CSS3 —— animation 之 steps方式过渡

设计模式 —— 外观模式

设计模式 —— 委托模式

设计模式 —— 装饰模式

设计模式 —— 建造者模式

For The Dream