使用PHP製作樣版引擎-極簡範例2,使用 Decorator 裝飾者(包裝器)模式

改編上一個範例,將極簡樣版修改成使用 Decorator 裝飾者(包裝器)模式來設計

先做一個抽象類別,用來規範繼承者的行為

abstract class IShowHtml
{
    protected $html;
    abstract public function getHtml();
}

製作基本 Html Head 區塊

class Header extends IShowHtml
{
    public function __construct()
    {
        $this->html = null;
    }

    public function getHtml()
    {
        $fmat = <<<HTML
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
    <title>極簡頁面</title>
HTML;
        return $fmat;
    }
}

製作第 1 個組件,HeaderJs 位於 Head 區塊裡的 JavaScript 腳本

class HeaderJs extends IShowHtml
{
    public function __construct(IShowHtml $htmlNow)
    {
        $this->html = $htmlNow;
    }

    public function getHtml()
    {
        $fmat = <<<HTML

    <script type='text/javascript' src=''></script>

HTML;
        return $this->html->getHtml().$fmat;
    }
}

製作第 2 個組件,內容區 Body

class Body extends IShowHtml
{
    public function __construct(IShowHtml $htmlNow)
    {
        $this->html = $htmlNow;

    }

    public function getHtml()
    {
        $fmat = <<<HTML

</head>
<body>
Hi,這是極簡頁面的測試
HTML;
        return $this->html->getHtml().$fmat;
    }
}

製作第 3 個組件,頁尾 Footer

class Footer extends IShowHtml
{
    protected $footer;

    public function __construct(IShowHtml $htmlNow)
    {
        $this->html = $htmlNow;
    }

    public function getHtml()
    {
        $fmat = <<<HTML

</body>
</html>
HTML;
        return $this->html->getHtml().$fmat;
    }
}

這裡是客戶端程式碼,注意裝飾包裝的方法 wrapComponent(),也可以在這裡面加入 Css 區塊等,但要注意順序

class Client
{
    private $basicHtml;

    public function __construct()
    {
        $this->basicHtml = new Header();
        $this->basicHtml = $this->wrapComponent($this->basicHtml);
        echo $this->basicHtml->getHtml();
    }

    private function wrapComponent(IShowHtml $component)
    {
        $component = new HeaderJs($component);
        $component = new Body($component);
        $component = new Footer($component);
        return $component;
    }
}

$worker = new Client();

Browser結果

Hi,這是極簡頁面的測試 

查看原始碼

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
    <title>極簡頁面</title>
    <script type='text/javascript' src=''></script>

</head>
<body>
Hi,這是極簡頁面的測試
</body>
</html>