README

组件是指将HTML生成代码（例如，模板）、样式和脚本从网页的某个部分收集在一起，并放在同一个文件夹中的情况。

组件解决以下问题

组件的显式合约。每个组件都必须有描述其外观和工作方式的说明。
样式隔离。当样式单独编写并放置在输出之外（即通常的做法）时，它们是为了组件开发的环境编写的。当将组件移到另一个环境（例如，从页面内容到右侧栏）时，样式经常损坏。此外，从总的层叠样式表中提取单独组件的样式很困难。将组件样式移到单独的文件应该根除在样式中使用上下文。
防止CSS类冲突。每个组件都使用唯一的根CSS类，所有样式都从该类编写。
简化开发者对样式和脚本的访问 - 它们与模板放在一起。

要创建组件，需要编写一个PHP类，该类将是访问组件所有功能的入口点。也就是说，这个类应该有

绘制组件的方法，例如 render() 或 html()
getCssPath() 和 getJsPath() 方法，它们返回组件css和js文件的路径
组件的css和js文件仅用于聚合器构建器。

如何在项目中使用模块

首先需要在 composer.conf 中连接模块并更新 composer。

之后，可以创建第一个组件。例如，在项目中创建一个名为 Components/HeaderComponent 的文件夹，并将以下文件放入其中

HeaderComponent.php

<?php

namespace Components\HeaderComponent;

use OLOG\Component\ComponentTrait;
use OLOG\Component\InterfaceComponent;

class HeaderComponent implements InterfaceComponent
{
    use ComponentTrait;

    static public function render()
    {
        $_component_class = \OLOG\Component\GenerateCSS::getCssClassName(__CLASS__);

        ?>
        <h1 class="<?= $_component_class ?>">PAGE HEADER</h1>
        <?php
    }
}

styles.less

._COMPONENT_CLASS {
  font-size: 24px;
  background-color: #eee;
}

scripts.js - 空的

然后需要在聚合器中注册组件。在配置中添加以下部分

$conf['component_classes_arr'] = [
    HeaderComponent::class
];

并允许在配置中构建JS和CSS文件

$conf[\OLOG\Component\ComponentConstants::MODULE_NAME] = new \OLOG\Component\ComponentConfig(true, true);

之后，可以执行构建器。执行构建器最简单的方法是将它包含在 index.php 中，这样聚合器将在每次网站请求时重新构建。

<?php

require_once '../vendor/autoload.php';

\OLOG\ConfWrapper::assignConfig(\PHPComponentsDemo\ComponentsDemoConfig::get());

\OLOG\Component\GenerateCSS::generateCSS();
\OLOG\Component\GenerateJS::generateJS();

\PHPComponentsDemo\DemoLayout\DemoLayoutComponent::render();

最后在模板中连接准备好的聚合器

<link href="/assets/common.css" rel="stylesheet"/>

附加功能

组件特质

包含 getCssPath() 和 getJsPath() 方法的默认实现 - 它们分别返回组件类所在文件夹中 styles.less 和 scripts.js 的路径。即如果将此特质连接到组件类，则只需在类中实现渲染方法。

样式封装（组件类的唯一标识符）

可以在样式文件中使用常量 _COMPONENT_CLASS - 构建器将替换为组件类的编码名称。该值在所有组件中是唯一的，可以用作组件根容器的CSS类名。

相同的编码类名在组件生成代码中也可用，通过 \OLOG\Component\GenerateCSS::getCssClassName(CLASS) （用于将此类指定为根容器）。

组件实例的唯一标识符

可以通过 \OLOG\Component\GenerateJS::generateComponentInstanceId() 在组件生成代码中获得。

可以用于为组件容器分配唯一的id，以便在js中访问容器。

o-log / php-components

维护者