Webの開発により、フロントエンドアプリケーションはますます複雑になり、バックエンドベースのJavaScript（node.js）も出現し始めました。この時点で、JavaScriptはより大きな期待を持って配置されています。同時に、JavaScript MVCのアイデアも人気があります。データとインターフェイスの分離の最も重要な部分として、JavaScriptテンプレートエンジンは、開発者からますます注目を集めています。過去1年間、オープンソースコミュニティで開花しました。 Twitter、Taobao、Sina Weibo、Tencent QQ Space、Tencent Weiboなどの大規模なWebサイトで見ることができます。
この記事では、最も単純な例コードを使用して、既存のJavaScriptテンプレートエンジンの原則を説明します。これには、JavaScriptテンプレートエンジンアートテンプレートの新世代の特性実装原則が含まれます。それらについて一緒に話し合うことを歓迎します。
ArtTemplateはじめに
ArtTemplateは、JavaScriptテンプレートエンジンの新世代です。プリコンパイルを使用してパフォーマンスを定性的に飛躍させ、JavaScriptエンジンの機能を最大限に活用し、フロントエンドとバックエンドの両方でパフォーマンスを非常に優れたものにします。 Chromeの下でのレンダリング効率テストでは、よく知られているエンジンの口ひげとマイクロTMPLの25倍と32倍です。
パフォーマンスの利点に加えて、デバッグ機能も言及する価値があります。テンプレートデバッガーは、レンダリングエラーをトリガーし、テンプレートの執筆中に不注意なデバッグの痛みを解決し、開発効率を高め、単一のテンプレートのエラーによるアプリケーション全体のクラッシュを回避するテンプレートステートメントを正確に見つけることができます。
ArtTemplateこれはすべて1.7kb（GZIP）で実装されています！
JavaScriptテンプレートエンジンの基本
各エンジンには、テンプレート構文、構文解析、可変割り当て、および文字列スプライシングとは異なる実装方法がありますが、重要なレンダリングの原則は、JavaScript文字列を動的に実行することです。
JavaScript文字列の動的実行に関して、この記事では、テンプレートコードの一部を例として使用します。
これは非常にシンプルなテンプレートの書き込みであり、「」はClosetagです（論理ステートメントクローズドタグ）。 Opentagに「=」が続くと、変数のコンテンツが出力されます。
HTMLステートメントと可変出力ステートメントは直接出力され、解析された文字列は似ています。
構文分析が完了した後、レンダリング方法は通常返されます。
レンダリングテスト：
上記のレンダリング方法では、テンプレート変数割り当てはステートメントを使用し、文字列スプライシングはArrayのプッシュ方法を使用してIE6および7のパフォーマンスを改善します。JQUERY著者が開発したマイクロテンプレートエンジンTMPLは、この方法の典型的な代表です。http：//ejohn.org/blog/javascript-micro-templination/を参照してください。
原則の実装から、解決すべき2つの問題が従来のJavaScriptテンプレートエンジンに残っていることがわかります。
1。パフォーマンス：テンプレートエンジンをレンダリングするとき、それはそれを実装するために関数コンストラクターに依存します。 eval、setimeout、およびsetintervalと同様に、関数はテキストを使用してJavaScriptの解析エンジンにアクセスする方法を提供しますが、この方法でJavaScriptを実行するパフォーマンスは非常に低いです。
2。デバッグ：ダイナミック実行文字列であるため、デバッガーがエラーに遭遇した場合、デバッガーはエラーソースをキャッチできず、テンプレートのバグデバッグが非常に痛くなります。フォールトトレランスを実行しないエンジンでは、ローカルテンプレートがデータの例外のためにアプリケーション全体をクラッシュさせることさえある場合、テンプレートの数が増えるとメンテナンスコストが劇的に増加します。
ArtTemplate効率の秘密
1。事前にコンパイルされました
上記のテンプレートエンジンの実装原則では、テンプレート変数が割り当てられるため、各レンダリングには、変数割り当てを完了するためにJavaScript文字列の動的コンパイルが必要です。ただし、ARTTEMPLATEの編集と割り当てプロセスは、レンダリングの前に完了します。レンダリングは「Precompilation」と呼ばれます。 ArtTemplateテンプレートコンパイラは、いくつかの簡単なルールに従ってすべてのテンプレート変数を抽出し、レンダリング関数のヘッドでそれらを宣言します。この関数は次のようです。
この自動生成された関数は、手書きのJavaScript関数のようなものです。同じ数の実行で、CPUとメモリの両方の使用量が大幅に削減され、パフォーマンスはほぼ限界に達しています。
ArtTemplateの多くの機能は、Sandbox仕様やカスタム構文などの事前縮小された実装に基づいていることに言及する価値があります。
2。より高速な文字列追加方法
多くの人々は、アレイプッシュメソッドが文字列が +=よりも速くスプライスされると誤って考えています。これはIE6-8ブラウザのみであることを知っておく必要があります。実際の測定では、最新のブラウザが += = = Array Pushメソッドを使用し、V8エンジンでは +=メソッドを使用すると、配列のスプライシングよりも4.7倍高速であることが示されています。したがって、ArtTemplateは、JavaScriptエンジンの特性に従って2つの異なる文字列スプライシング方法を採用します。
ArtTemplateデバッグモードの原則
フロントエンドテンプレートエンジンは、バックエンドテンプレートエンジンとは異なります。これは動的な解析であるため、デバッガーは間違ったライン番号を見つけることができません。 ArtTemplateを使用すると、テンプレートデバッガーは、レンダリングエラーをスローするテンプレートステートメントを正確に見つけることができます。
ARTTEMPLATEは、エラーキャプチャの2種類をサポートします。1つはエラー（レンダリングエラー）をレンダリングし、エラー（構文エラー）をコンパイルします。
1。レンダリングエラー
通常、レンダリングエラーは、テンプレートのデータエラーまたは変動エラーによって引き起こされます。レンダリングするとき、通常のテンプレート実行効率に影響を与えることなく、デバッグモードに入り、テンプレートを再コンパイルします。テンプレートコンパイラは、テンプレート行の切断に基づいて行番号を記録し、コンパイルされた関数は似ています。
実行プロセス中にエラーが発生すると、例外テンプレートに対応する行番号がすぐにスローされ、テンプレートデバッガーは、行番号に従ってテンプレートに対応する対応するステートメントをチェックし、コンソールに印刷します。
2。コンピレーションエラー
コンピレーションエラーは、一般に、資格のないネスト、未知の構文などのテンプレート構文エラーです。ArtTemplateは完全な語彙分析を実行しないため、エラーソースの位置を決定することは不可能であり、発達者の元のテキストのエラー情報とソースコードのみを出力できます。