nawawishkid/ui-factory

PHP 用户界面设计系统

维护者

详细信息

github.com/nawawishkid/ui-factory

主页

源代码

问题

安装: 19

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 0

0.1.1 2018-10-27 06:06 UTC

Requires

  • php: >=7.0

Requires (Dev)

MIT 4914464a12ea4d32ad93e9dc723cc4380b9f89db

uiuser interfacedesign system

This package is auto-updated.

Last update: 2024-09-27 19:32:17 UTC

README

我了解到了 '抽象工厂模式' 并因此创建了此仓库 :D

通过 composer 下载 composer require nawawishkid/ui-factory:dev-master

这是一个工具，可以帮助我们编写可重用的用户界面组件，并且可以无限地调整创建的组件，例如，我们编写了卡片组件，但当我们再次使用它时，我们可能将其改为按钮（当然，没有人这样做，只是举个例子）调整的灵活性取决于我们如何编写组件。

UI Factory 的使用分为两个主要部分：首先是 创建和使用 组件，其次是 调整 创建的组件。

1. 创建和使用组件

我们可以通过两种方式创建组件：

  1. 编写继承自 UIFactory\Component 类的类，或者
  2. 从 Base 类创建新的对象

1.1 继承 Component 类

让我们先看看已经编写好的 Button 组件类的总体情况，可以直接使用。

<?php

namespace BootstrapUI;

use UIFactory\Component;

class Button extends Component
{
    public function markup($props) : string
    {
        return '<button class="btn btn-primary">Click me!</button>';
    }
}

这只是使用了 Bootstrap 作为 CSS 库的基本组件。
但是，如果我们只是写这个，就不需要去扩展其他类来麻烦，只需将 markup 字符串放入全局函数中即可。

function button() {
    return '<button class="btn btn-primary">Click me!</button>';
}

那么，让我们再看看下面的 Button 类。

class Button extends Component
{
    private $props = [
        'label' => 'Click me!'
        'class' => 'btn btn-primary'
    ];

    public function markup($props) : string
    {
        return (
<<<HTML
<button class="$props->class">
    $props->label
</button>
HTML
        );
    }
}

在上面的代码中，$props 是我们组件的属性，直接对应于 Button 的属性。那么 $props 是什么？它是一个用来存储组件设置的数组。
接下来是 markup 方法，用于返回我们组件的 HTML markup 字符串。这个方法返回的字符串将被用于 echo 以在页面上显示结果。
仅此而已，你就能想出来 $props 和 markup 是如何一起工作的了。简单来说，$props 是一个存储组件零件的仓库，而 markup 是一辆车。一些部件上贴有标签，说明将使用仓库中的哪些零件来调整。
我们只需将要用到的零件准备好放在仓库中，然后将车调整好，贴上便签说明要调整什么，这就是 UI Factory 的任务。
使用这个按钮只需这样做：

<?php

use BootstrapUI\Button;

$button = new Button();

HTML 输出

<button class="btn btn-primary">Click me!</button>

1.2 从 Base 类创建对象

<?php

use UIFactory\Components\Base;

$button = new Base();
$button->addProps([
            'label' => 'Click me!',
            'class' => 'btn btn-primary'
        ])
        ->addMarkup(function($props) {
            return "<button class=\"$props->class\">$props->label</button>";
        })
        ->render();

嗯... 就是这样，没有必要解释，结果与上面的 Button 类完全相同。

那么，什么时候应该扩展 Component 类或创建 Base 对象呢？

2. 调整

<?php

use BootstrapUI\Button;

$btn = new Button([], 0);
$btn->render(); // default

$btn->editProps([
        'label' => "Don't click me!",
        'class' => 'btn-dont-click'
    ])
    ->render();

HTML 输出

<button class="btn btn-primary">Click me!</button>
<button class="btn btn-primary btn-dont-click">Don't click me!</button>

属性越多，调整的灵活性就越大！555

这里就是了，可能会有人问，“工厂在哪里？”是的，前面所说的所有内容都没有涉及到工厂，尽管有 Factory.php 文件，但这是因为它还没有完成。哼，可能会在下一个版本中开发。目前还不稳定。

未来功能

  • 能够将属性重置为其默认值