ホームページ >ウェブフロントエンド >jsチュートリアル >シンプルなHTMLテンプレートエンジン
私が以前に使用したテンプレートは 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><span style="font-size: 14px;">if</span>
与<span style="font-size: 14px;">else</span>
循环:<span style="font-size: 14px;">for</span>
循环,可以用来循环输出模板
过滤器:支持在插值里加入过滤器,同时过滤器可以串联使用。引擎内置了两个过滤器,<span style="font-size: 14px;">capitalize</span>
与<span style="font-size: 14px;">reverse</span>
。Leopard同时支持自定义过滤器,可以使用<span style="font-size: 14px;">Leopard.filter(filter, handler)</span>
来全局注册一个过滤器。在过滤器上,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个<span style="font-size: 14px;">li</span>
ifと<em>else</em>
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 サイトの他の関連記事を参照してください。