README

注意： [只读] 熊猫 UI 包的子树拆分

DOM 包允许您轻松地操作 DOM 元素。

• 介绍
• 安装
  • 通过 composer
• DOM
  • DOM 处理器
  • DOM 工厂
  • 扩展 DOM

介绍

熊猫 UI DOM 组件是一个后端 UI 处理器/渲染器引擎，它能够以更结构化的方式生成包括 XML 内容。

此组件扩展了语言本身提供的正常 DOM 结构，包括以下类：

• DOMNode
• DOMDocument
• DOMElement

这正是此组件如此强大的主要原因，它通过使用现有组件提供额外、更快和更智能的功能。

此包能够快速且轻松地使用 DOM 结构创建 HTML 页面。一些功能包括：

• 从 PHP 操作 DOM
• 创建 DOM 元素的 DOM 工厂

安装

通过 composer

将以下行添加到您的 composer.json 文件中

"panda/dom": "^3.1"

DOM

DOM 处理器

我们构建了具有可扩展性和可配置性的 UI 组件。因此，我们插入处理程序和工厂，这些处理程序和工厂可以通过提供的接口进行替换。

为了能够以任何方式操作 DOM 元素，包括我们创建的元素以及我们可以从文档中检索的元素（使用 xpath），我们必须创建一个独立的结构化的处理程序，它可以操作 DOM 而不需要实际成为它的一部分。

仅使用原生函数构建 DOM 树可能是一个痛苦的过程，这就是我们创建 DOMHandler 的原因，用单行函数调用来替换多行功能。

DOMHandler 负责对 XML 文档应用简单的 DOM 操作，足够通用，适用于所有文档类型。以下是一些示例

添加属性

use Panda\Ui\Dom\Handlers\DOMHandler;

// Normal DOMElement way
// The same way for get and remove
// Where $element is a DOMElement object
$element->setAttribute($name = 'id', $value = 'id_value');


// Using DOMHandler
$handler = new DOMHandler();

// Set an attribute
$handler->attr($element, $name = 'id', $value = 'id_value', $validate = false);

// Get an attribute
$handler->attr($element, $name = 'id');

// Remove an attribute
$handler->attr($element, $name = 'id', $value = null);

前面的示例可能没有说明多少，但是随着更多功能的介绍，我们有以下函数可用

• attr(DOMElement &$element, $name, $value = '', $validate = false);
• attrs(DOMElement &$element, $value = []);
• appendAttr(DOMElement &$element, $name, $value);
• data(DOMElement &$element, $name, $value = []);
• nodeValue(DOMElement &$element, $value = null);
• append(DOMElement &$parent, &$child);
• prepend(DOMElement &$parent, &$child);
• remove(DOMElement &$element);
• replace(DOMElement &$old, &$new);
• evaluate(DOMDocument $document, $query, $context = null);

DOM 工厂

在用 DOMPrototype 和 DOMItem 描述了结构之后，我们现在介绍 DOM 工厂。DOM 工厂用于通过简单的调用创建 DOM 项，无需创建额外的对象，如 DOMDocument 或 DOMHandler。这些工厂并不取代容器功能，只是提供创建所需所有元素的接口。

DOM 工厂类是最小形式的工厂，它提供了一个用于构建简单 DOMElement 的公共函数，即 buildElement() 函数。DOM 工厂期望使用 setDOMDocument() 函数设置 DOMPrototype，以便能够创建所需的所有元素。

主要可以通过 DOMPrototype 访问工厂，我们将其作为依赖项在构造函数中提供。文档负责初始化工厂并将其连接到当前文档。

use Panda\Ui\Dom\Handlers\DOMHandler;
use \Panda\Ui\Dom\Factories\DOMFactory;
use \Panda\Ui\Dom\DOMPrototype;

// Create a handler instance
$handler = new DOMHandler();

// Create a new factory instance
$factory = new DOMFactory();

// Create a document and provide the handler and factory
$document = new DOMPrototype($handler, $factory);


// Get the factory and build an element
$document->getDOMFactory()->buildElement($name = 'div', $value = 'value');

// Document uses the above function with a 'facade' function called create:
$document->create($name = 'div', $value = 'value');

扩展 DOM

该组件有两个基类，它们扩展了 PHP 对象

DOMItem

class DOMItem extends DOMElement
{
}

DOMPrototype

class DOMPrototype extends DOMDocument
{
}

这两个对象都使用两个基本接口来处理整个功能，并且像观察者一样站立在那里。这些是 DOMHandler 和 DOMFactory 接口。

DOMPrototype

DOMPrototype对象是XML文档（以及HTML文档）的基对象。它提供了一些基本功能，其余的功能由DOMHandler和DOMFactory处理。

DOMPrototype对象具有以下功能

• create($name = 'div', $value = '')
• append($element);
• evaluate($query, $context = null);
• find($id, $nodeName = '*');
• getXML($format = false);

上述函数支持基本文档对象。然而，您可以使用DOMHandler执行更多任务，并使用DOMFactory对象创建更多元素。

use Panda\Ui\Dom\Handlers\DOMHandler;
use \Panda\Ui\Dom\Factories\DOMFactory;
use \Panda\Ui\Dom\DOMPrototype;

// Create the document
// Using a container here would make the call a lot easier
$DOMHandler = new DOMHandler();
$DOMFactory = new DOMFactory();
$document = new DOMPrototype($DOMHandler, $DOMFactory);

// Create the root element and append it to the document
$root = $document->create($name = 'root', $value = '');
$document->append($root);

// Create an element and append it to the root
$element = $document->create($name = 'child', $value = 'This is a root child.');
$root->append($element);

DOMItem

创建DOM元素的基本根元素是DOMItem基本对象。DOMItem扩展了给定的PHP DOMElement功能，并提供了更少的代码来操作项的方法。该对象支持以下功能

• attr($name, $value = '', $validate = false);
• attrs($value = []);
• appendAttr($name, $value);
• nodeValue($value = null);
• append(&$element);
• appendTo(&$element);
• prepend(&$element);
• prependTo(&$element);
• remove();
• replace($element);

DOMItem构造函数接受一个DOMPrototype（文档），以便它可以与之关联，并且可以被客户端处理（否则它将是一个只读对象）。文档本身需要一个DOMHandler。DOMItem使用此DOMHandler通过所有之前的函数来操作自身。基本上，所有这些函数都是由DOMHandler而不是DOMItem本身处理的。

use \Panda\Ui\Dom\DOMPrototype;
use \Panda\Ui\Dom\DOMItem;

// Create the document to associate the DOMItem with
$document = new DOMPrototype(new DOMHandler(), new DOMFactory());

// Create the item
$item = new DOMItem($document, $name = 'div', $value = '');

// Update the item
$item->attr('name', 'item_name');
$item->attr('title', 'item_title');

// Append item to document
$document->append($item);

每个创建的DOMItem都被附加到给定的文档中，以便我们可以对其进行编辑。