html5/fhtml

此包已被放弃且不再维护。没有建议的替代包。

FHtml 流畅 HTML 编写

0.2 2016-08-22 14:58 UTC

This package is auto-updated.

Last update: 2020-02-05 23:24:16 UTC


README

68747470733a2f2f7472617669732d63692e6f72672f6465726d6174746865732f4648746d6c2e737667

FHtml - 流畅 HTML

PHP7 的流畅 HTML 生成器 - 版本 0.2 - 2016-08-23 - 由 Matthias Leuffen 编写

在您的 PHP 代码中生成正确且安全的 HTML 代码可能会导致头疼。使用 FHtml 的流畅 API 将为您节省大量本应花在阿司匹林上的钱。

它包含一个 @-属性解析器,用于轻松且无痛地编写;您不需要在引号字符串内使用引号('")。

示例?查看启动程序

启动程序 - 查看 FHtml 在行动

echo fhtml("input @type=text @name=firstName @value=?", $_POST["firstName"]);

是的 - 不需要双引号即可生成有效的和适当的转义 xhtml

<!-- Output: -->
<input type="text" name="firstName" value="Some Value"/>

使用流畅 API 生成结构

echo fhtml("div @class=style1 @style=display:block;width:100%")
        ->h1()->text("Hi there!")->end()
        ->p()
            ->input("@type=text @value=?", $someUnescapedValue);

是的:您的 PHP 代码比原始 html 更短!并且正确的缩进也得到了处理

<!-- Output: -->
<div class="style1" style="display:block;width:100%">
    <h1>Hi There!</h1>
    <p>
        <input type="text" value="<html encoded content of $someUnescapedValue>"/>
    </p>
</div>

您是否曾经编写过一个带有预选值的 <select> 框?这是 FHtml 的方法

echo fhtml("select @name=select1")->options($optionsArr, $_POST["select1"]);

使用 IDE(PhpStorm)? FHtml 在所有层上提供完整的代码补全。停止输入 - 只需按 CTRL-SPACEENTER

特性

  • 生成符合 XHTML 标准的 HTML5 代码
  • 快速编写,无需引号
  • 完整的 IDE 支持(在 JetBrains PhpStorm 上测试过)
  • 利用 PHP7 返回/参数声明
  • 自动检测与 I18n 插件兼容的多个 API
  • 由 TravisCI 单元测试和 CI

安装

FHtml 可在 packagist.com 作为 composer 包使用

composer require html5\fhtml

或直接添加到您的 composer.json

    require: {
        "html5/fhtml": "0.2"
    }

提示:使用 composer upgrade --prefer-dist 来省略单元测试和开发文件

错误报告

请报告错误、愿望和反馈

用法

@-属性

FHtml 在 elem() 方法(或任何直接标签方法,如 div()span())上解析单个字符串输入并解析它。

要注入不安全或未正确转义的值,请使用 ?-占位符结构

不要这样做

$t->input("@type=text @value=$userInput"); // <- Don't do that!

使用自动转义数组结构,用 ? 作为占位符,并将原始值作为附加参数添加

$t->input("@value=?", $userInput); // <-- Right way: Will escape the value

插入文本节点

要将纯文本插入到元素中,请使用 text($text) - 方法。参数 1 中的文本将被 html 转义。

echo fhtml("span")->text("Some text here!");

将生成

<span>Some text here!</span>

结束元素

您可以使用 end() 方法跳回到父元素。

跳转标记

您可以使用as(<跳转标记>)方法定义一个可以通过goto(<跳转标记>)从任何地方跳转的元素。


fhtml()->body()->as("body-elem")
    ->div()
        ->div()
->goto("body-elem")
    ->p();

示例将<p>元素添加到<body>元素中。

从数组生成<select>选项

使用options(array $options, string $preselect)方法动态创建带预选值的select选项

假设您有一个用于select字段的键值映射数组

$options = [
    "foo" => "Foo Apples",
    "bar" => "Bar Bananas",
    "baz" => "Batzen for Cats"
];

只需将它们设置为options()的第一个参数,并将Post中提交的值放入第二个参数

echo fhtml("select @name=sel1")->options($options, $_POST["sel1"]);

将生成

<select name="sel1">
    <option value="foo">Foo Apples</option>
    <option value="bar" selected="selected">Bar Bananas</option>
    <option value="baz">Batzen for Cats</option>
</select>

API替代

这些示例执行完全相同的操作。选择您最喜欢的API

echo fhtml("input @type=text @name=name1 @value=?", $_POST["name1"]);
echo fhtml()->input("@type=text @name=name1 @value=?, $_POST["name1"]);
echo fhtml()->input(["@type=text @name=name1 @value=?, $_POST["name1"]]);

echo fhtml()->elem("input @type=text @name=name1 @value=?, $_POST["name1"]);
echo fhtml()->elem(["input @type=text @name=name1 @value=?, $_POST["name1"]]);

我更喜欢使用最短的

echo fthml()->input("@type=text @name=name1 @value=?", $_POST["name1"]);

相关项目

如果您喜欢FHtml,您可能对我的其他项目感兴趣

  • html5/template:inline-template组件的angular-js / phptal实现
  • html5/htmlreader:一个快速且简单的HTML5标记器,不使用libxml。(简单 === 好用;如果您曾经尝试在没有libxml操作元素的情况下解析HTML)

作者

由Matthias Leuffen于2016年编写 leuffen.de

许可

MIT许可