README

简介

什么是Matisse？

Matisse是一个针对PHP web应用程序的组件化模板引擎。

什么是组件？

组件是参数化、可组合和可重用的渲染逻辑、领域逻辑和标记的单位，您可以将它们组装和配置以创建视觉界面并提供功能给应用程序。

Matisse与其他模板引擎有何不同？

与其他任何模板引擎一样，Matisse通过将源（模板）文档与视图模型中的数据相结合来生成HTML文档。

但与大多数其他PHP模板引擎不同，这些引擎只是渲染由文本/标记和用PHP或自定义DSL编写的代码混合而成的模板，Matisse从称为组件的构建块中组装用户界面。它还尽可能地将逻辑从模板中分离出来，因此允许有<强>编程和展示逻辑的清晰分离。

Matisse模板非常<强>简洁和易读，仅由干净的HTML和额外的组件标签以及绑定表达式组成。

最后，使用Matisse制作的应用程序不是基于MVC（模型视图控制器）的。Matisse推广<强>MVVM（模型、视图、视图模型）架构，具有单向或<强>双向数据绑定。

它与其他竞争方案有何相似之处？

一些概念可能让您联想到AngularJS、React或Web Components，它们是客户端框架。

Matisse结合Electro框架，将许多这些概念带到了服务器端，但以更实用、更简单、更快速和更方便的方式，允许您在不处理JavaScript、ES6、TypeScript、AJAX、REST API、模块加载器、转换器、文件监视器和复杂的构建工具链的情况下编写复杂的Web应用程序。只需编写代码，切换到浏览器，刷新一下，即可立即看到您所做的更改。然后无缝部署到生产环境中。

Matisse的价值主张是什么？

Matisse允许您从可组合的构建块中快速创建复杂的应用程序。

它通过使用组件显著减少了编写PHP代码的需要，这些组件不仅可以渲染视觉界面，还可以提供处理数据、领域逻辑和用户交互的内建功能。

实际上，使用Matisse，您的整个应用程序可以由组件组成，在许多抽象级别上，从底层设计元素和小部件开始，逐步嵌套更多和更多高级抽象概念和结构，直到您能够使用自己的自定义、HTML兼容的DSL（领域特定语言）编写应用程序的用户界面。

通过实践，您的模板将非常简洁、易读、语义化和表达，但仍然足够灵活，可以容纳任何类型的自定义HTML来处理特定需求。

通过减少代码并重用和共享功能块，您可以在项目和项目之间提高生产率。

Matisse通过允许设计人员轻松创建自己的组件（无需编写代码），并将它们组装成功能应用原型，从而优化了设计师和程序员之间的工作流程，这些原型可以通过程序员进行最小程度的重写转换为工作原型，并且可以稍后返回给设计人员进行进一步开发，同时保持对他们的完全理解。

马蒂斯还能自动化许多网络开发者需要执行的繁琐任务，通过减少编写样板代码的需求，自动管理资源（脚本和样式表）、依赖、库安装和集成、为生产构建和优化等。

马蒂斯不仅仅是一个模板引擎，它还是一个应用程序的架构框架，以及一种不同的开发方式。

安装

要在您的应用程序上安装此插件，请在终端中 cd 到您的应用程序目录，并输入

workman install plugin electro-modules/matisse

为了正确运行，请勿直接使用Composer安装此包。

概述

马蒂斯是一个功能强大的模板系统，解释其所有功能超出了本Readme的范围。

我们将为您提供对其主要概念和功能的小概览，以便您对其有一个大致的了解，以及它如何有助于快速从可组合的构建块中创建复杂的Web应用程序。

模板

马蒂斯模板是HTML文本文件，其中除了常见的HTML标签（始终小写）外，以大写字母开头的特殊标签指定动态组件。

示例

<h1>Some HTML text</h1>
<form>
  <Input name=field1 value={myVar}/>
  <For each=record of={data}>
    <Header><ul></Header>
    <li>Item {record.name}</li>
    <Footer></ul></Footer>
    <Else>There are no items.</Else>
  </For>
</form>

注意：编写模板时，应使用HTML 5语法编写HTML标记，而组件标签必须使用XML语法。这意味着标签必须始终关闭，即使标签没有内容（您可以使用自闭合标签语法：<Component/>）。不过，与XML不同，属性值不需要用引号括起来。

组件

在上面的示例中，Input是一个组件，而不是常见的input HTML元素。它是在服务器上处理的，并且它生成将替换结果HTML文档中其标签的HTML标记。

For是另一个组件。它为记录列表（数组）中的每个记录重复一个标记块。当有数据时，For会写入标题（如果指定），然后是可重复的内容，然后是页脚（如果指定）。如果没有数据，则仅输出Else子标签的内容。

属性

组件属性由HTML标签属性表示（例如，For标签的each和of属性）。

您应使用属性来定义具有标量值（例如字符串或数值）的属性。

属性的语法是name="value"、name='value'或name=value（后者只能在值没有空格时使用）。

布尔属性（具有true或false值的属性）可以不指定值来定义。例如：<Tag readonly/>表示true，而仅有的<Tag/>（缺少属性）表示false。

子标签

子标签，像标签一样，也是大写的，但它们不代表组件；它们代表封装组件的属性。

在上面的示例中，For组件的可选内容部分使用子标签定义：Header、Footer和Else标签。

当属性值是HTML标记时，请使用子标签。注意，子标签的标记内容可以定义额外的组件。

混合HTML和XML标记

再次以上面的示例为例，注意如何仅在<Footer>标签内关闭<ul>标签，这似乎违反了模板的正确HTML标记嵌套结构。实际上，模板是有效的，生成的HTML输出也是有效的。这是因为，对于马蒂斯来说，所有小写HTML标签只是纯文本，没有任何特殊含义。所有位于组件标签（以大写字母开头）之间的文本都被转换为尽可能少的文本组件。

因此，上述示例的真正DOM（由马蒂斯解析）是（伪代码）：

<Text value="<h1>Some HTML text</h1><form>"/>
<Input name=field1 value={myVar}/>
<For each=record of={data} header="<ul>" footer="</ul>" else="There are no items.">
  <Text value="<li>Item "/>
  <Text value={record.name}/>
  <Text value="</li>"/>
</For>
<Text value="</form>"/>

数据绑定

可以从视图模型或组件属性自动将数据应用于模板上的特定位置。这称为将“数据绑定”到模板。

要绑定数据，您使用“数据绑定表达式”，这些表达式用方括号括起来。

示例

<SomeComponent value={record.name}/>

如果您需要在包含括号的JavaScript块中插入绑定表达式，您需要在每个括号（不是绑定表达式的一部分）后面始终插入一个换行符。

示例

<script>
if (x>y) {
  alert("Hello {name}, how are you?");
}
</script>

在这个例子中，脚本第一行的括号没有被误认为是绑定表达式分隔符，因为它后面紧接着是一个换行符。

表达式语法

表达式的语法与PHP表达式不同。例如，访问对象或数组的属性使用点操作符，而不是[]或->操作符。

表达式还可以定义一系列过滤器，以对值应用多个转换。管道操作符|分隔表达式上的过滤器。表达式最左侧部分的值将从左到右流动，前一个过滤器的结果被传递到下一个过滤器。过滤器也可以有额外的参数。

示例

<SomeComponent value={record.date|datePart|else 'No date'}/>

（反）转义输出

出于安全原因，绑定表达式始终HTML编码（转义）它们的输出。

但是，如果您真的需要输出原始标记，可以使用*过滤器。

示例

<div>{content|*}</div>

绑定组件属性

在复合组件（那些有自己模板的组件）中，您可以使用@运算符绑定到组件（拥有模板的组件）的属性。

示例

<SomeComponent value={@someProperty}/>

您可以在下面的“宏”部分看到更多此类绑定的示例。

实现自己的组件

每个组件标签都被转换成相应PHP类的实例。当模板被渲染时，每个类的实例负责生成相应组件的HTML表示，以及可选的（嵌入式或外部）JavaScript代码和样式表引用或嵌入式CSS样式。

最小组件示例

这是您可以实现的最低、最简单的组件

use Matisse\Components\Base\Component;

class HelloWorld extends Component
{
  protected function render ()
  {
    echo "Hello World!";
  }
}

您可以从模板中这样调用这个组件

<HelloWorld/>

or

<HelloWorld></HelloWorld>

这将渲染

Hello World!

or

Hello World!

具有属性的组件

让我们使我们的组件输出文本可参数化

use Matisse\Components\Base\Component;
use Matisse\Properties\Base\ComponentProperties;

class MessageProperties extends ComponentProperties
{
  public $value = '';
}

class Message extends Component
{
  const propertiesClass = TextProperties::class;

  protected function render ()
  {
    echo $this->props->value;
  }
}

您可以从模板中这样调用这个组件

<Message value="some text"/>

or

<Message>
  <Value>some other text</Value>
</Message>

这将渲染

some text

or

some other text

宏

组件也可以通过模板文件使用纯标记定义，而不需要任何PHP代码。这些模板在概念上类似于参数化宏，因此它们被称为宏组件或简单地称为宏。

更高级的组件

这个模板定义了一个实现可定制面板的宏组件

<Macro name=Panel defaultParam=content>
  <Param name=type type=string default="box-solid box-default"/>
  <Param name=title type=string/>
  <Param name=content type=content/>
  <Param name=footer type=content/>

  <div class="panel box {@type}">
    <If {@title}>
      <div class="box-header with-border">
        <h3 class="box-title">{@title}</h3>
      </div>
    </If>
    <div class="box-body">
      {@content|*}
    </div>
    <If {@footer}>
      <div class="box-footer">
        {@footer|*}
      </div>
    </If>
  </div>
</Template>

然后您可以像这样创建此组件的实例

<Panel type="info" title="My title">
  <h1>Welcome</h1>
  <p>Some text here...</p>
  <Footer>Some footer text...</Footer>
</Panel>

渲染时，模板将生成以下HTML标记

<div class="panel box box-info">
  <div class="box-header with-border">
    <h3 class="box-title">My title</h3>
  </div>
  <div class="box-body">
    <h1>Welcome</h1>
    <p>Some text here...</p>
  </div>
  <div class="box-footer">
    Some footer text...
  </div>
</div>

视图模型

您可以将视图模型中的值绑定到模板中。

例如，给定以下视图模型

$model = ['footerText' => 'Some footer text...'];

您可以这样调用上面定义的相同组件

<Panel type="box-info" title="My title">
  <h1>Welcome</h1>
  <p>Some text here...</p>
  <Footer>{footerText}</Footer>
</Panel>

生成的输出将与上一个示例中的输出相同。

另请参阅

如果您想查看一个使用Bootstrap组件的丰富集合，您可以查看Matisse Components插件。

许可证

Electro框架是开源软件，根据MIT许可证授权。

electro-modules / matisse

维护者

详细信息