使用DOM解析來實現PHP模版引擎

liangwent發表於2019-03-02

0. 前言: 傳統模版語法的不利之處

目前市面上有很多PHP的模版引擎，如smarty、blade等。其中大部分都是基於正規表示式將其中的模版語法轉換成PHP程式碼，並進行快取。模版程式碼所經歷的過程如下:

template -> php -> html
複製程式碼

使用正則替換或者直接使用PHP原生有什麼問題呢?以下我們以blade為例來看一些具體例子:

<html>
    <body>
        <div>
        <div class="items" >
            @if (count($records) === 1)
            <p>我有一個記錄！</p>
            @elseif (count($records) > 1)
            <p>我有多個記錄！</p>
            @else
            <p>我沒有任何記錄！</p>
            @endif
        </div>
        </div>
    </body>
</html>
複製程式碼

問題一: 編輯器格式化和語法高亮的問題

如上，我們面臨的第一個問題是html和blade語法混雜在一起。在閱讀邏輯上，我們需要來回的在blade和html之間做轉化。當然，當你熟悉了blade的語法並熟練掌握這個能力的時候，這種轉化並不會對你的閱讀構成障礙。

但是，對於編輯器來說，如果不使用合適的外掛，無論是程式碼高亮還是自動格式化都會產生意想不到結果

問題二: html中渲染class等屬性

其實以上還不是最令人眼花繚亂的,在我有限的工作經歷中，使用PHP渲染html中的class或者其他屬性時，經常會看到如下令人恐怖的程式碼

<html>
    <body>
        <div>
            <ul class="items" >
                <li <?= $cur==1 ? 'class="active"' : ''?>>NO.1</li>
                <li <?= $cur==2 ? 'class="active"' : ''?>>NO.2</li>
                <li <?= $cur==3 ? 'class="active"' : ''?>>NO.3</li>
                <li <?= $cur==4 ? 'class="active"' : ''?>>NO.4</li>
            </ul>
        </div>
    </body>
</html>
複製程式碼

以上還不是最恐怖的，當有的人既不使用<?= ?>又不使用三元運算時...簡直不可想象。

問題三: 公共模版中程式碼程式碼的不完整

對於大部分網頁的頭部和尾部,我們單獨抽離出來以供複用。對於blade這種支援類似插槽的模版引擎,情況並不算太糟，但對於不支援類似特性的模版引擎，如下的程式碼也是非常常見

#./header.phtml 標頭檔案
<html>
    <body>
        <div class="nav">

        </div>
<div class="content">
複製程式碼

#./bottom.phtml 尾檔案
        </div>
        <div class="bottom">

        </div>
    </body>
</html>
複製程式碼

如上的問題在於什麼呢，每個部分模版都不是標籤閉合的,每一部分並不完整。在獨立模版存在非常多的情況下，正確的讓html標籤閉合也成為開發負擔之一。

好了，說完了這麼多問題，我們來想一想是否有解決的辦法。要知道以前前端js程式碼合併也是基於正則，但是新的三大框架都是基於dom解析來實現。那如果說，我們在寫php渲染頁面的時候也可以和Vue一樣，使用類似如下的語法，是不是就能解決以上的問題呢? 當然本文只是給大家提供一個最基本的思路，和最基礎的實現，僅供娛樂和思路擴充吧。

<!-- ./tpl.html -->
<html>
    <body>
        <div class="title">
            <div p-if="is_author">
                <p>{{ author }}</p>
            </div>
            <div p-else>
                <p>{{ vistor }}</p>
            </div>
        </div>

        <div p-for="(value, idx) in items">
            <p>{{ value }} - {{ idx }}</p>
            <p>{{ value }}</p>
        </div>
    </body>
</html>

複製程式碼

$params = [
    "is_author" => true,
    "author"    => "liangwt",
    "vistor"    => "Welcome",
    "items"     => [
    "A",
    "B",
    "C",
    ],
];

csRender("./tpl.html", $params);
複製程式碼

<!-- out -->
<html>
<body>
    <div class="title">
        <div>
            <p>liangwt</p>
        </div>
        <div>
            <p>Welcome</p>
        </div>
    </div>
    <div>
        <p>A - 0</p>
        <p>A</p>
        <p>B - 1</p>
        <p>B</p>
        <p>C - 2</p>
        <p>C</p>
    </div>
</body>
</html>
複製程式碼

1. DOM基本知識

D: Document 代表裡文件
O: Object 代表了物件
M: Model 代表了模型

DOM把整個文件表示為一棵樹，確切的說是一個家譜樹。家譜樹中我們使用 parent(父)、child(子)、sibling(兄弟)來描述成員之間的關係。對於一個普通的如下的xml來說

<?xml version="1.0" encoding="utf-8"?>

<bookstore>
  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>

  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>

  <book category="web">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>

  <book category="web">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
</bookstore>
複製程式碼

我們可以生成如下的dom樹結構

示例來源於知乎

2. PHP中DomDocument的使用

PHP中原生提供了xml文件解析的擴充，它使用起來非常簡單。網上資料大多介紹基於此擴充的封裝包，因此這裡稍微詳細介紹下。

(1). DOM中的基類節點: The DOMNode class

前面介紹dom樹的時候說過，文件是由不同型別的節點構成的集合，所以DomDocument中絕大多數的類都繼承於此。

它的類屬性除了描述了自身名稱($nodeName)、值($nodeValue)、型別($nodeType)等，還描述了其父節點($parentNode)、子節點($childNodes)、同級節點($previousSibling、$nextSibling)等。

它的類方法除了包括對子節點的插入(appendChild())、替換(replaceChild())、移除(removeChild())之外,還有諸多用於判斷自身屬性的函式。

作為任何型別的節點基類我們需要重點關注它的每一個屬性和方法,參考官方文件。

(2). 整個文件: DOMDocument extends DOMNode

DOMDocument繼承自DOMNode，它代表了整個文件，也是整個文件樹的根結點。其中繼承自基類的屬性$nodeType是XML_DOCUMENT_NODE(9)

我們通常使用它的load*()來建立dom樹,和save*()系列方法將dom轉換成文字

我們的程式碼也是如此開頭和結束

function csRender(string $tpl, array $params)
{
    $dom = new DomDocument("1.0", "UTF-8");
    $dom->loadHTMLFile($tpl);
    // ...
    echo $dom->saveHTML();
}
複製程式碼

(3). 元素節點 DOMElement extends DOMNode

DOMElement繼承自DOMNode，它代表了

之類的標籤，是構成dom結構的基本節點.其中標籤的名字就是節點的屬性tagName，它的$nodeType是XML_ELEMENT_NODE = 1

元素可以包含其他的元素，元素節點中也包含了其他型別的節點。

我們可以使用getAttributeNode() 或者getAttribute() 來獲取元素節點的屬性或者屬性名,使用getElementsByTagName(string $name)獲取元素包含的標籤名$name為的節點.以及使用remove*()和set*()函式來刪除和修改指定屬性

我們在實現上面p-if的時候需要進行判斷if條件是否成立,並在之後刪除掉這個屬性

if ($item->nodeType == XML_ELEMENT_NODE
    && $if_value = $item->getAttribute("p-if") {

    if ($if_result) {
        $item->removeAttribute("p-if");
    }
}
複製程式碼

(4). 屬性節點 DOMAttr extends DOMNode

DOMAttr繼承自DOMNode，它代表了標籤class="one"之類的屬性，如上面所講對元素節點呼叫getAttributeNode()即可獲取此元素的屬性節點。屬性節點的nodeType是XML_ATTRIBUTE_NODE=2

(5). 文字節點 DOMText extends DOMCharacterData

DOMText繼承自DOMCharacterData，DOMCharacterData也是繼承自DOMNode。在dom中它代表了元素節點包含的文字.其中nodeValue屬性就是文字的內容。文字節點的nodeType 是XML_TEXT_NODE = 3

除此之外需要知道的是，文字節點單總是被包含在元素節點中，文字節點的父節點是元素節點。我們通過$elementNode->childNodes即可獲取(如果有文字節點的話)，此函式返回的是 DOMNodeList 型別,它代表節點集合，並實現了Traversable介面

我們在實現mustache語法的時候需要判斷元素的文字節點中是否有{{}}包裹的變數

if ($item->nodeType == XML_TEXT_NODE) {
    $str = preg_replace_callback('/\{\{(.*?)\}\}/', function ($matches) use ($params) {
    // ...處理邏輯
    }, $item->nodeValue);

    $item->nodeValue = $str;
}
複製程式碼

(6). 節點遍歷

以上就是最常用的幾種節點型別了，我們下面講一講如何進行節點遍歷.我們需要基於遍歷去實現樹中節點判斷，然後進行樹操作

我們在上面介紹瞭如何載入一個html文件,其中獲取的變數$dom也是dom樹的根結點

function csRender(string $tpl, array $params)
{
    $dom = new DomDocument("1.0", "UTF-8");
    $dom->loadHTMLFile($tpl);
    traversingtDomNode($dom, $params);
    echo $dom->saveHTML();
}
複製程式碼

擁有一個節點之後如何遍歷它的子節點呢，我們獲取其$domNode->childNodes子屬性進行遍歷即可

function traversingtDomNode($dom, $params){
    foreach ($domNode->childNodes as $item) {
    //...
    }
}
複製程式碼

在遍歷每一個節點過程中，可以通過判斷nodeType來對不同型別節點進行操作。同時如果此節點依舊有子節點，我們繼續把節點放入此函式進行遞迴呼叫

function traversingtDomNode($dom, $params){
    foreach ($domNode->childNodes as $item) {
        if ($item->nodeType == XML_ELEMENT_NODE
        && $if_value = $item->getAttribute("p-if")) {
        // ...
        }

        if ($item->nodeType == XML_ELEMENT_NODE
        && $item->hasAttribute("p-else")) {
        // ...
        }

        if ($item->hasChildNodes()) {
        traversingtDomNode($item, $params);
        }
    }
}
複製程式碼

3. mustache語法實現

{{ key }} 語法實現很簡單，我們只要通過正則拿到{{ key }}中的key值，然後把連著{{ }}一起替換成$params[$key]即可

// ...
if ($item->nodeType == XML_TEXT_NODE) {
    $str = preg_replace_callback('/\{\{(.*?)\}\}/', function ($matches) use ($params) {
        return $params[trim($matches[1])];
    }, $item->nodeValue);
    $item->nodeValue = $str;
}
// ...
複製程式碼

4. if語法實現

<div p-if="is_author">
    <p>{{ author }}</p>
</div>
複製程式碼

if語法實現也很簡單，我們通過$if_value =$item->getAttribute("p-if")獲取屬性值，並通過判斷$params[$if_value]`的值，如果成立，則刪掉屬性，展示此元素節點。如果不成立則刪掉此節點。

// ...
if ($item->nodeType == XML_ELEMENT_NODE && $if_value = $item->getAttribute("p-if")) {
    $if_result = $params[$if_value] ?? false;

    if ($if_result) {
        $item->removeAttribute("p-if");
    } else {
        array_push($elementsToRemove, $item);
    }
}
// ...
複製程式碼

注意這裡面有個小坑: 參考文件中的一條評論:notes: NO.1 在遍歷中移除節點會導致dom樹重構，遍歷終止。所以我們採取將要移除的節點單獨記錄到$elementsToRemove，在迴圈結束後統一移除

    $elementsToRemove = [];
    foreach ($domNode->childNodes as $item) {
        // ..
    }
    foreach ($elementsToRemove as $item) {
        $item->parentNode->removeChild($item);
    }
複製程式碼

5. eles語法實現

<div p-if="is_author">
    <p>{{ author }}</p>

    <div p-if="show_intro">
        <p>{{ intro }}</p>
    </div>
    <div p-else>
        <p>{{ vistor }}</p>
    </div>
</div>
複製程式碼

else 的實現會用到很有意思的技巧，因為else的真值並不取決於它自身，而是取決於和它配對的if的值。注意!是和它配對的if值，如果你想當然的認為是else之前的那個if值可就錯咯。我們看下面這個例子:

<div p-if="is_author">
    <p>{{ author }}</p>
    <div p-if="show_intro_one">
        <p>{{ intro_one }}</p>
    </div>
    <div p-if="show_comment_one">
        <p>{{ comment_one }}</p>
    </div>
    <div p-else>
        <p>{{ comment_two }}</p>
    </div>
    <div p-else>
        <p>{{ intro_two }}</p>
    </div>
</div>
複製程式碼

其中最後一個else屬性的值取決於第一個if "show_intro_one" 的值,即$params[$if_value]的值.那如何才能實現if-else正確的匹配呢，答案就是: 棧。在我們實現括號匹配，if-else匹配得各種匹配問題中，棧是一個非常好的思路。

我們第一步需要在dom樹同一深度給予不同棧，因為if-else的匹配只會發生在同級元素直接，而不會發生在父子元素之間。

第二步自然是每遇到一個if就把值放入對應棧的棧頂。

第三步在遇到else時，從棧頂取出一個值，它的反值即為else的值

foreach ($domNode->childNodes as $item) {
    // 1. 第一步
    $if_stack = [];
    // ...
    if ($item->nodeType == XML_ELEMENT_NODE
        && $if_value = $item->getAttribute("p-if")) {

        $if_result = $params[$if_value] ?? false;
        // 第二步
        array_push($if_stack, $if_result);
        // ...
    }

    if ($item->nodeType == XML_ELEMENT_NODE && $item->hasAttribute("p-else")) {
        // 第三步
        $if_result = array_pop($if_stack);

        if (!$if_result) {
            $item->removeAttribute("p-else");
        } else {
            array_push($elementsToRemove, $item);
        }
    }
}
複製程式碼

6. for語法實現

<div p-for="(value, idx) in items">
    <p>{{ value }} - {{ idx }}</p>
    <p>{{ value }}</p>
</div>
複製程式碼

for的語法實現思路很簡單，把含有屬性p-for屬性的元素所有子節點按照遍歷的陣列迴圈賦值即可。其中稍有難度的就是$params中的值傳遞問題，或者說$params值的作用域問題，如果恰好$params中也有個欄位叫value或者idx，但很明顯在for的子節點中,value和idx應該是區域性作用域，他們需要在每次迴圈開始賦予新值，並在整個迴圈結束後被銷燬.

所以我們讓一個新值$for_runtime_params等於外部$params引數，並在迴圈中繼續遞迴呼叫遍歷函式

if ($item->nodeType == XML_ELEMENT_NODE
    && $for_value = $item->getAttribute("p-for")) {
    preg_match("/\((.*?), (.*?)\) in (.*)/", $for_value, $matches);
    [, $value, $index, $items] = $matches;

    foreach ($params[$items] as $k => $v) {
        $for_runtime_params = $params;
        $for_runtime_params[$value] = $v;
        $for_runtime_params[$index] = $k;

        foreach ($item->childNodes as $el) {
            $e = $el->cloneNode(true);
            if ($e->hasChildNodes()) {
                traversingtDomNode($e, $for_runtime_params);
            }
        }
    }
}
複製程式碼

注意: 和刪除節點一樣，我們在遍歷的過程中也不能插入新節點，他會導致獲取的子節點永遠為空。所以也和刪除一樣單純記錄最後統一插入即可

7. 後記

本文實現肯定還有諸多細節未考慮，但是給大家提供一個不錯的思路。對於未來可以嘗試繼續實現v-class語法，slot功能，components功能，都是相當不錯的

更詳細的實現可以可以檢視我的github: cs-render

同時也歡迎在我的部落格-showthink閱讀更多其他文章

也可以關注我的微博@不會涼的涼涼與我交流

XML 檔案解析實踐 (DOM 解析)
2020-10-02
XML
CI 框架整合 Smarty 模版引擎
2018-10-22
框架
java Freemarker 模版引擎工具類
2022-01-07
Java
React 虛擬Dom 轉成真實Dom 實現原理
2019-04-08
React
Laravel自動依賴解析的實現，其實是PHP對映解析
2021-07-04
LaravelPHP
PHP 使用 Redis 實現分頁
2019-08-13
PHPRedis
Apache 使用fcgi 解析PHP
2018-12-26
ApachePHP
Python tkinter 實現指令碼工具 GUI模版
2020-12-17
Python指令碼GUI
DOM 常用 API 解析
2019-09-22
API
想要更精準的小程式模版訊息推送？我們來幫你實現
2019-04-02
使用Java實現一個JS指令碼引擎
2022-03-12
JavaJS指令碼
[NGX]使用ViewContainerRef來操作Angular中的DOM
2018-05-11
ViewAIAngular
使用JAXP對xml文件進行DOM解析基礎
2021-09-09
XML
Python XML解析之DOM
2018-09-29
PythonXML
dom解析和sax解析的區別
2020-11-05
PHP 使用連結串列實現對映
2019-08-06
PHP
artTemplate模版引擎的簡潔語法的基本用法
2020-10-05
PHP透過DOM操作XML
2021-09-09
PHPXML
實現一個自己的語法解析器與執行引擎
2022-04-12
原始碼解讀預告｜TiFlash DeltaTree 引擎設計及實現解析
2022-05-20
原始碼
使用 Acorn 來解析 JavaScript
2019-03-04
JavaScript
XML DOM 解析器概述
2022-02-26
XML
用PHP來實現二分搜尋樹(BST)
2019-02-25
PHP
解決 Laravel {{ }}與前端 VIM 模版引擎標記衝突
2018-10-13
Laravel前端
自己實現鬥地主引擎
2018-06-05
私聊（PHP 實現）
2019-02-16
PHP
Virtual Dom演算法實現筆記
2019-03-03
演算法筆記
virtual-dom原理與簡單實現
2019-03-04
理解virtual dom的實現細節-snabbdom
2019-01-01
postgresql使用pgagent來實現job功能
2020-11-13
SQL
使用YARP來實現負載均衡
2024-11-25
負載
使用Runtime來實現自己的KVO
2018-04-25
Java使用FreeMarker模版技術動態生成word實踐
2022-06-14
Java
docker使用bind9實現域名解析
2022-11-23
Docker
前端實現旗幟飄動效果系列(Ⅰ)：dom+css實現
2018-07-17
前端CSS
【java設計模式】（10）---模版方法模式（案例解析）
2021-11-01
Java設計模式
[原始碼解析] Pytorch 如何實現後向傳播 (2)---- 引擎靜態結構
2021-10-27
原始碼PyTorch
[原始碼解析] Pytorch 如何實現後向傳播 (3)---- 引擎動態邏輯
2021-10-29
原始碼PyTorch