シンプルなHTMLテンプレートエンジン-jsチュートリアル-php.cn

シンプルなHTMLテンプレートエンジン

小云云

リリース： 2018-02-10 15:00:15

オリジナル

3085 人が閲覧しました

私が以前に使用したテンプレートは ejs と jade (後に pug に名前変更されました) です。前者は使いやすいように設計されており、その構文は HTML に比較的似ています。後者は気の遠くなるようなもので、私の記憶が正しければ、jade にはインデントに基づいてタグの階層関係が判断されるため、インデントに関する厳しい要件があります。この設計では、Python を書くときにほとんど薄氷の上を歩くことになります。キャリパー???) だったので、当時はまだ ejs を開発に使用していました。

ということで、今回はejsの文法仕様にほぼ沿ってLeopardを実装してみました。

ダウンロードして使用してください

これを読んだ後、問題に関する提案やバグを投稿してください。

npm を通じて Leopard をダウンロードすることもできます:

<span style="font-size: 14px;">$ npm install leopard-template<br></span>

ログイン後にコピー

機能

現在、Leopard は次の関数ポイントを実装しています:

ポレーション: テキスト補間と HTML 補間を含む
論理判断: <code>if与else
循环：for循环，可以用来循环输出模板
过滤器：支持在插值里加入过滤器，同时过滤器可以串联使用。引擎内置了两个过滤器，capitalize与reverse。Leopard同时支持自定义过滤器，可以使用Leopard.filter(filter, handler)来全局注册一个过滤器。在过滤器上，Leopard可能跟ejs的不太同，跟Vue的比较相似。

举个栗子

<span style="font-size: 14px;">var Leopard = require('leopard-template')<br>var leo = new Leopard()<br><br>var template = '<% if (isOk) { %>' +<br>  '<span class=\"nickname\"><%= nickname | capitalize %></span>' +<br>  '<% } else { %>' +<br>  '<span class=\"realname\"><%= realname | capitalize %></span>' +<br>  '<% } %>'<br><br>var html = leo.compile(conditions, {<br>  isOk: false,<br>  nickname: 'leo',<br>  realname: 'leopard'<br>})<br><br>// html就是最终编译成功的的html了，可以直接通过document的方法渲染到页面上<br></span>

ログイン後にコピー

性能

其实字符串模板引擎的性能大家都知道的，在现在的硬件条件下，几乎可以说是非常快的。（饱受虚拟DOM服务端渲染性能上不去的孩子哭晕在厕所，鄙人的公司项目就是卡在了这里上不了线）

我做了一个简单的benchmark，循环输出50,000个liifとelse

ループ: for

ループ、出力テンプレートのループに使用できますフィルター: 補間へのフィルターの追加をサポートし、フィルターを連続して使用できます。このエンジンには、capitalize

と

<p class="article fmt article__content">reverse<a href="http://www.php.cn/js-tutorial-386349.html" target="_self"></a></p>

という 2 つの組み込みフィルターがあります。 Leopard

はカスタムフィルターもサポートしています。Leopard.filter(filter, handler)

を使用してフィルターをグローバルに登録できます。フィルターの点では、Leopardは

ejs🎜とは異なる場合がありますが、より🎜Vue🎜に似ています。 🎜🎜🎜🎜🎜たとえば🎜🎜

<span style="font-size: 14px;"># benchmark<br>$ npm run benchmark<br></span>

ログイン後にコピー

🎜🎜パフォーマンス🎜🎜🎜🎜実際、現在のハードウェア条件では、文字列テンプレートエンジンのパフォーマンスは非常に速いと言えるでしょう。 (仮想 DOM サーバーのレンダリングパフォーマンスの低下に苦しんだ子供はトイレで泣いて気を失いました。私の会社のプロジェクトはここでスタックし、オンラインにできませんでした) 🎜🎜🎜🎜簡単なベンチマークを作成し、50,000 アイテムをループアウトしました 🎜🎜li🎜🎜約60ミリ秒かかります。もちろん、🎜Leopard🎜は現在、🎜テンプレート文字列🎜の🎜HTML文字列🎜への解析とコンパイルのみをサポートしているため、ここでのループ出力は文字列コンパイルステップを指します。 🎜🎜

<span style="font-size: 14px;"># unit test<br>$ npm run test<br><br># coverage<br>$ npm run coverage<br></span>

ログイン後にコピー

🎜🎜オープンソース🎜🎜🎜🎜とはいえ、これはホイール作成プロジェクトであり、🎜ejs🎜とほぼ同じなので、本番環境に導入される可能性は低いです(しかも、それらはすべてMVVMフレームワークを使用しています)今) プロジェクトを開発する) ですが、それでもオープンソースプロジェクト 🎜Leopard🎜 の仕様に従って開発したいと考えています。私は 🎜Leopard🎜 用に 100% カバレッジのテストケースを作成しました。コミットを送信するたびに、送信する前にテストを実行して合格します。また、このプロジェクトがあまり水っぽくならないことを願っています。 🎜🎜rrreee🎜関連する推奨事項: 🎜🎜🎜Node.js テンプレートエンジン jade の例の説明🎜🎜🎜🎜 テンプレートエンジン機能を実装する PHP の簡単な例🎜🎜🎜🎜 テンプレートエンジンに基づいた PHP デザインパターンコンテナデプロイメントフレームワーク🎜🎜

以上がシンプルなHTMLテンプレートエンジンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。