特に動的な挿入を行う必要がある場合は、純粋なHTMLの作成はしばしば不便です。
テンプレートビルダーはこの問題を部分的に解決しますが、奇妙な構文を研究し、制限を設け、いくつかのテンプレートを他のテンプレートに入れて再利用する必要があります。一般に、試みは良いですが、何かが正しくありません。
一部のフレームワークにはヘルパーがあります。特に、
Aura.Htmlではこの記事を書くことを余儀なくされました。 ヘルパーの場合、ストーリーは異なります。1つのコマンドで優れたHTMLコードを生成できるため、本来は単純化のために考えられていましたが、ほとんどの場合、特定の用途に合わせて調整されています。
より普遍的な解決策として、派手な構文を発明するのではなく、最も一般的なPHPと使い慣れたプリミティブCSSセレクターを使用することをお勧めします。
少し前に考えて、自転車を見始めました。 自転車は判明し、別の自転車の一部として使用され、その後分離され、何度も更新されました。今ではコミュニティと共有したいと思います。
どのように機能しますか？
アイデアは、できるだけシンプルにすることでした。
h::div('Content')
何が得られますか
<div> Content </div>
これは最も単純な例です。 メソッドの名前はタグで、値は内部で渡されます。 属性を追加する必要がある場合-問題ありません：
h::div( 'Content', [ 'class' => 'some-content' ] )
<div class="some-content"> Content </div>
いずれにしても簡単だと思うかもしれませんが、ここではCSSセレクターが助けになり、ちょっとしたストリートマジックがあります。
h::{'div.some-content'}('Content')
出力は同じになります。 一見奇妙に見えるかもしれませんが、実際には非常に便利です。
Aura.Htmlと比較して
最初にAura.Htmlについて言及しましたが、そこでHTMLが生成される方法とここで比較する価値があります。
Aura.Html（ドキュメントの例）：
$helper->input(array( 'type' => 'search', 'name' => 'foo', 'value' => 'bar', 'attribs' => array() ));
私たちのオプション：
h::{'input[type=search][name=foo][value=bar]'}()
任意のパラメーターを配列に入れることができます。
出力：
<input name="foo" type="search" value="bar">
また、別のオプションはより深刻です。
Aura.Html（ドキュメントの例）：
$helper->input(array( 'type' => 'select', 'name' => 'foo', 'value' => 'bar', 'attribs' => array( 'placeholder' => 'Please pick one', ), 'options' => array( 'baz' => 'Baz Label', 'dib' => 'Dib Label', 'bar' => 'Bar Label', 'zim' => 'Zim Label', ), ))
私たちのオプション：
h::{'select[name=foo]'}([ 'in' => [ 'Please pick one', 'Baz Label', 'Dib Label', 'Bar Label', 'Zim Label' ], 'value' => [ '', 'baz', 'dib', 'bar', 'zim' ], 'selected' => 'bar', 'disabled' => '' ])
ここ
で明示的に使用されていますが、上記の
divを使用した例の
コンテンツのように、タグの内部を渡すために使用できます。 一般的なルールといくつかの特別なルールの両方が使用されます。
出力は同じです：
<select name="foo"> <option disabled value="">Please pick one</option> <option value="baz">Baz Label</option> <option value="dib">Dib Label</option> <option selected value="bar">Bar Label</option> <option value="zim">Zim Label</option> </select>
特殊加工
すべてのタグは一般的な処理ルールに従いますが、利便性のために追加のデザインを持つタグがいくつかあります。
例：
h::{'input[name=agree][type=checkbox][value=1][checked=1]'}()
<input name="agree" checked type="checkbox" value="1">
selectと同じように機能
し 、
値はvalueにあり、送信された配列と同じ名前の要素が一致すると、
checkedが設定されます 。
入力の使用と
入力の特別な処理の別の例
[type = radio] ：
h::{'input[type=radio]'}([ 'checked' => 1, 'value' => [0, 1], 'in' => ['Off', 'On'] ])
<input type="radio" value="0"> Off <input checked type="radio" value="1"> On
コードをできるだけ一般的で予測可能なものにするための
ラベルラッパーは特に追加されていません。
配列を処理する必要がある場合
これはおそらく、ネスト制御とともに最も頻繁に使用されるオプションです。これは、データが配列の形でどこかから来ることが多いためです。
配列を処理するには、値の代わりに直接渡すことができます：
h::{'tr td'}([ 'First cell', 'Second cell', 'Third cell' ])
または、最も単純な場合に余分な角かっこを省略します
h::{'tr td'}( 'First cell', 'Second cell', 'Third cell' )
出力：
<tr> <td> First cell </td> <td> Second cell </td> <td> Third cell </td> </tr>
配列の各要素は個別に処理されます。つまり、文字列だけでなく一部の属性を送信することは完全に合法ですが、場合によっては非常に巨大に見えます。
h::{'tr.row td.cs-left[style=text-align:left;][colspan=2]'}( 'First cell', [ 'Second cell', [ 'class' => 'middle-cell', 'style' => 'color:red;', 'colspan' => 1 ] ], [ 'Third cell', [ 'colspan' => false ] ] )
呼び出しで属性も指定された場合-
クラスと
スタイルが展開され、残りは上書きされ、論理値が
falseの属性は削除されます。
<tr class="row"> <td class="cs-left" colspan="2" style="text-align:left;"> First cell </td> <td class="cs-left middle-cell" colspan="1" style="text-align:left;color:red;"> Second cell </td> <td class="cs-left" style="text-align:left;"> Third cell </td> </tr>
CSSセレクターには馴染みのない魔法の杖を使用して（これは唯一の例外です）、ネストレベルの処理方法を制御できます。
h::{'tr| td'}([ [ 'First row, first column', 'First row, second column' ], [ 'Second row, first column', 'Second row, second column' ] ])
<tr> <td> First row, first column </td> <td> First row, second column </td> <tr> <tr> <td> Second row, first column </td> <td> Second row, second column </td> <tr>
データベースまたは他のストレージから配列を取得する場合、そのような配列を直接使用すると便利です。これは、特別な
挿入属性に渡すことで実行
できます。
$array = [ [ 'text' => 'Text1', 'id' => 10 ], [ 'text' => 'Text2', 'id' => 20 ] ]; h::a( '$i[text]', [ 'href' => 'Page/$i[id]', 'insert' => $array ] )
<a href="Page/10"> Text1 </a> <a href="Page/20"> Text2 </a>
すべての属性を1行で記述できます。
$array = [ [ 'id' => 'first_checkbox', 'value' => 1 ], [ 'id' => 'second_checkbox', 'value' => 0 ], [ 'id' => 'third_checkbox', 'value' => 1 ] ]; h::{'input[id=$i[id]][type=checkbox][checked=$i[value]][value=1]'}([ 'insert' => $array ])
<input id="first_checkbox" checked type="checkbox" value="1"> <input id="second_checkbox" type="checkbox" value="1"> <input id="third_checkbox" checked type="checkbox" value="1">
そして、これはすべて拡張できます
このクラスは、環境に関係なく使用できる、何にも結び付けられていない一般的なHTMLルールのみを表します。
ただし、より複雑なルーチン操作の実装を簡素化する場合があります。
たとえば、フロントエンドで多くのUIkit要素を使用しています。たとえば、スイッチには特別に準備されたHTMLが必要です。
元の
入力処理コードをコピーして少し編集することにより、次の結果を得ることができます。
h::radio([ 'checked' => 1, 'value' => [0, 1], 'in' => ['Off', 'On'] ])
<span class="uk-button-group" data-uk-button-radio=""> <label class="uk-button uk-active" for="input_544f4ae475f58"> <input checked="" id="input_544f4ae475f58" type="radio" value="1"> On </label> <label class="uk-button" for="input_544f4ae475feb"> <input id="input_544f4ae475feb" type="radio" value="0"> Off </label> </span>
pre_processingメソッドをオーバーライドし、タグをレンダリングする直前に属性の任意の処理を実装することもできます。たとえば、
data-title属性がある場合、クラスをハングアップして、ホバーで要素にツールチップを取得します。
使用の利点
HTMLは、タグを閉じないままにすることなく生成されます。
どこでも、一般的な処理ルールが使用されます。これは論理的で非常にすばやく記憶され、その逆よりもはるかに便利です。
Webコンポーネントを含め、絶対に任意のタグで使用できます（サンプルは作成しませんが、サンプルは多数あります）。
依存関係はありません。これはただの静的クラスであり、それ以上ではないため、任意に継承および再定義/展開することができます。
出力は通常の行であり、次のクラス呼び出しの入力で使用される、絶対に任意のコードと一緒に簡単に使用できます。
どこで入手して読むか
これにはおそらく十分な例があります。
GitHubソースコードまた、使用のすべてのニュアンスとサポートされているすべての設計の詳細な説明が記載されたドキュメントもあります。
composerを使用するか、単にファイルをクラスに接続することで配置できます。
機能の継承の例計画
それでも何も壊さずに
__callStatic（）をリファクタリングする必要があります）
Zephirに書き直して、PHPの拡張機能を作成するのは素晴らしいことです（これは夢のようですが、いつか私もそれを取るでしょう）。