高機能JavaScriptテンプレートエンジンの実装原理を詳しく解説_javascriptスキル

Web の発展に伴い、フロントエンド アプリケーションはますます複雑になり、バックエンド ベースの JavaScript (Node.js) も登場し始めており、JavaScript に対する期待も高まっています。 、同時に JavaScript MVC のアイデアも普及し始めています。データとインターフェースの分離における最も重要な部分として、JavaScript テンプレート エンジンはここ 1 年で開発者からますます注目を集めており、Twitter、淘宝網、新浪などで使用されるようになりました。 Weibo、Tencent QQ Zone、Tencent Weibo などの大きな Web サイトで見ることができます。

この記事では、最も単純なサンプル コードを使用して、新世代の JavaScript テンプレート エンジン artTemplate の機能実装原理を含む、既存の JavaScript テンプレート エンジンの原理を説明します。

アートテンプレートの紹介

artTemplate は、新世代の JavaScript テンプレート エンジンであり、プリコンパイルを使用してパフォーマンスの質的向上を実現し、JavaScript エンジンの特性を最大限に活用して、フロントエンドとバックエンドの両方で非常に優れたパフォーマンスを実現します。 。 Chrome でのレンダリング効率テストでは、よく知られたエンジンである Mustache と micro tmpl のそれぞれ 25 倍と 32 倍でした。

パフォーマンス上の利点に加えて、デバッグ機能も言及する価値があります。テンプレート デバッガーは、レンダリング エラーの原因となったテンプレート ステートメントを正確に特定できるため、テンプレートの作成プロセス中にデバッグできないという問題が解決され、開発がより効率的になり、単一のテンプレート エラーによるアプリケーション全体のクラッシュが回避されます。

artTemplate これはすべて 1.7kb(gzip) にあります!

JavaScript テンプレート エンジンの基本原則

各エンジンには、テンプレート構文、構文解析、変数割り当て、文字列の結合などの異なる実装方法がありますが、重要なレンダリング原則は依然として JavaScript 文字列の動的実行です。

JavaScript 文字列の動的実行に関して、この記事では例としてテンプレート コードを使用します。

これは非常にシンプルなテンプレートの書き方で、「」がcloseTag（論理文の終了タグ）でopenTagの後に「=」が続くと変数の内容が出力されます。

HTML ステートメントと変数出力ステートメントは直接出力され、解析された文字列は次のようになります。

構文解析が完了すると、通常はレンダリング メソッドが返されます。

レンダリングテスト:

上記の render メソッドでは、テンプレート変数の割り当てに with ステートメントを使用し、文字列の結合に配列プッシュ メソッドを使用して、IE6 および 7 でのパフォーマンスを向上させています。jQuery 作者の john が開発したマイクロ テンプレート エンジン tmpl は、その典型的な例です。このメソッドの代表者については、http://ejohn.org/blog/javascript-micro-template/

を参照してください。

原理的な実装から、従来の JavaScript テンプレート エンジンには解決すべき 2 つの問題があることがわかります。

1. パフォーマンス: テンプレート エンジンは、レンダリング時に関数コンストラクターに依存します。関数 (eval、setTimeout、setInterval など) は、テキストを使用して JavaScript 解析エンジンにアクセスする方法を提供しますが、この方法で JavaScript を実行するパフォーマンスは異なります。は非常に低いです。

2. デバッグ: これは動的実行文字列であるため、エラーが発生した場合、デバッガーはエラーの原因をキャプチャできず、テンプレート BUG のデバッグは非常に困難になります。フォールト トレランスのないエンジンでは、ローカル テンプレートによってデータの異常が発生し、アプリケーション全体がクラッシュする可能性もあります。テンプレートの数が増えると、メンテナンス コストが大幅に増加します。

artTemplate の効率の秘密

1. プリコンパイル

上記のテンプレート エンジンの実装原則では、テンプレート変数に値を割り当てる必要があるため、各レンダリングでは変数の割り当てを完了するために JavaScript 文字列の動的なコンパイルが必要になります。ただし、artTemplate のコンパイルと割り当ての処理はレンダリング前に完了します。この方法は「プリコンパイル」と呼ばれます。 artTemplate テンプレート コンパイラーは、いくつかの単純なルールに従ってすべてのテンプレート変数を抽出し、レンダリング関数の先頭で宣言します。この関数は次のようなものです:

この自動生成関数は、手書きの JavaScript 関数と同様に、同じ実行回数でも CPU 使用量とメモリ使用量が大幅に削減され、パフォーマンスは限界に近くなります。

artTemplate の多くの機能は、サンドボックス仕様やカスタム構文などのプリコンパイルされた実装に基づいていることに言及する価値があります。

2. より高速な文字列追加方法

多くの人は、文字列を連結する配列プッシュメソッドが = よりも速いと誤解しています。これは IE6 ～ 8 ブラウザーでのみ行われることを知っておく必要があります。実際の測定によると、最新のブラウザーで = を使用する方が配列プッシュ方式より高速であり、v8 エンジンでは = を使用する方が配列スプライシングより 4.7 倍高速です。したがって、artTemplate は、JavaScript エンジンの特性に基づいて 2 つの異なる文字列結合メソッドを使用します。

artTemplate デバッグ モードの原理

フロントエンド テンプレート エンジンはバックエンド テンプレート エンジンとは異なり、動的に解析されるため、デバッガーはエラー行番号を見つけることができません。artTemplate は、テンプレート デバッガーがテンプレートを正確に見つけることができるようにする賢い方法を使用します。レンダリング エラーの原因となったステートメント (:

など)

artTemplate は 2 種類のエラー キャプチャをサポートしています。1 つはレンダリング エラー (Render Error) とコンパイル エラー (Syntax Error) です。

1. レンダリングエラー

レンダリング エラーは通常、テンプレート データ エラーまたは変数エラーによって発生します。レンダリング中にエラーが発生した場合にのみ、通常のテンプレートの実行効率に影響を与えることなく、デバッグ モードに移行してテンプレートが再コンパイルされます。テンプレート コンパイラは、テンプレートの改行文字に従って行番号を記録し、コンパイルされた関数は次のようになります:

実行中にエラーが発生すると、例外テンプレートに対応する行番号が直ちにスローされ、テンプレート デバッガーは行番号に基づいてテンプレートに対応するステートメントをチェックし、それをコンソールに出力します。

2. コンパイルエラー

コンパイル エラーは通常、修飾されていないネストや不明な構文などのテンプレート構文エラーです。 artTemplate は完全な字句解析を実行しないため、エラー ソースの場所を特定することはできず、開発者が判断できるようにエラー メッセージの元のテキストとソース コードを出力することしかできません。