html5 / fhtml
FHtml 流畅 HTML 编写
Requires
- php: >=7.0
- html5/template: *
This package is auto-updated.
Last update: 2020-02-05 23:24:16 UTC
README
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-SPACE
和 ENTER
。
特性
- 生成符合 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许可