私はもともと、ArtTemplateソースコードの以前の分析のリリースを共有したかったのですが、1年後、私はそれを見つけることができなかったので、その時点で分析テンプレートエンジンの原則を試してみる必要がありました。
ライティングテンプレートエンジンはあなたと共有され、記念碑を残し、当時いくつかのテンプレートエンジンがあったことを思い出しました。
ここで言及されているJSテンプレートエンジンは、ネイティブJavaScriptの構文を使用しているため、PHPのネイティブテンプレートエンジンに似ています。
フロントエンドテンプレートエンジンの役割？
1.フロントエンドの開発を簡単にすることができます+dom構造を生成するために文字列を使用する必要はありませんが、1つの要素（内部のHTMLテンプレート）、または変数（保存されたテンプレート）、または1つのテンプレートファイル
2。カップリングを維持し、削減するのは簡単です。
3。テンプレートが.tplに似たファイルである場合、ブラウザを使用して保存できます。 .tplファイルに関しては、キャッシュだけでなく、モジュールローダーになることもできます。
.tplをモジュールとして使用すると、ファイルをオンデマンドでロードできます。
4。待ってください
フロントエンドテンプレートエンジンの原理？
原則は非常に単純です。オブジェクト（データ） +テンプレート（変数を含む） - >文字列（HTML）
フロントエンドテンプレートエンジンを実現する方法は？
テンプレートを解析することにより、単語メソッドに従って、テンプレートは関数に変換され、関数が呼び出され、オブジェクト（データ）が渡され、出力文字列（HTML）が渡されます。
（もちろん、特定のものはコードに依存します）
このようなものです：
次のようにコードコードをコピーします。
var tpl = '私は<％= name％>、<％= age =>
var obj = {
名前：「Loveseee」、
年齢：24
};
var fn = engine.compile（tpl）;
var str = fn（obj）;
例：
次のようにコードコードをコピーします。
<！doctype html>
<html>
<head>
<メタhttp-equiv = "content-type" content = "text/html; charset = utf-8">
<Title> Ice Demo </title>
<スクリプトsrc = "/javascripts/jquery/jquery-1.7.2.js"> </scrip>
<スクリプトsrc = "/javascripts/ice/ice.js"> </script>
<body>
<div id = "content"> </div>
</body>
<script type = "text/html" id = "tpl">
<div>ここにレンダリング結果があります：</div>
<％= this.title（）;％>
<テーブルボーダー= 1>
<％for（var i = 0、tl = this.trs.length、tr; i <tl; i ++）{％>
<％
tr = this.trs [i];
if（tr.sex === "female"）{
％>
<tr>
<td> <％= tr.name ;;
</tr>
<％}％>
<％}％>
</table>
<img src = "<％= this.href％>">
<％= this.include（ 'tpl2'、this）;
</script>
<script type = "text/html" id = "tpl2">
<div>ここにレンダリング結果があります：</div>
<％= this.print（ 'welcom to Ice Template'）;％>
<テーブルボーダー= 1>
<％for（var i = 0、tl = this.trs.length、tr; i <tl; i ++）{％>
<％
tr = this.trs [i];
if（tr.sex === "MALE"）{
％>
<tr>
<td> <％= tr.name ;;
</tr>
<％}％>
<％}％>
</table>
<img src = "<％= this.href％>">
</script>
<スクリプト>
var test = [
{名前：「目に見えないキラー」、年齢：29、セックス：「男性」}、
{名前：「ソラ」、年齢：22、セックス：「男性」}、
{name： "fesyo"、age：23、sex： "female"}、
{名前：「ラブボ」、年齢：18、セックス：「男性」}、
{name： "izaki"、age：25、sex： "men"}、
{名前：「あなたは理解していません」、年齢：30歳、セックス：「女性」}
]
// var html = ice（ "tpl"、{
// TRS：TRS、
// href： "http://images.vevb.com/type4.jpg"
//}、{
// title：function（）{{
// return "<p>これはビューヘルパーを使用したコードピース出力</p>" "
//}
//}）;
var elem = document.getElementById（ 'tpl'）;
var tpl = elem.innerhtml;
var html = ice（tpl、{
TRS：TRS、
HREF：「http://images.vevb.com/type4.jpg」
}、{
タイトル：function（）{
return "<p>これは、ビューからコードを使用するコードです</p>" ""
}
}）;
console.log（html）;
$（ "#content"）。
</script>
</html>
簡単な実装：
次のようにコードコードをコピーします。
（function（win）{
//テンプレートエンジンルーティング機能
var ice = function（id、content）{
氷を返します[
typeof content === 'object' render '：'コンパイル '
] .Apply（ICE、議論）;
};
Ice.version = '1.0.0';
//テンプレート構成
var iconfig = {
Opentag： '<％'、
Closetag： '％>'
};
var isenewengine = !! prototype.trim;
//テンプレートキャッシュ
var icache = ice.cache = {};
//補助関数
var ihelper = {
含める：function（id、data）{
return render（id、data）;
}、
印刷：function（str）{
strを返します。
}
};
//プロトタイプ継承
var iextend = object.create ||。
関数fn（）{};
fn.prototype = object;
新しいfnを返します。
};
//テンプレートコンパイル
var icompile = ice.compile = function（id、tpl、options）{
var cache = null;
id &&（cache = icache [id]）;
if（cache）{
キャッシュを返します。
}
// [id |
if（typeof tpl！== 'string'）{
var elem = document.getElementbyid（id）;
options = tpl;
if（elem）{
// [id、options]
options = tpl;
tpl = elem.value ||。
} それ以外 {
// [TPL、オプション]
tpl = id;
id = null;
}
}
options = option || {};
var render = iparse（tpl、options）;
id &&（icache [id] = render）;
レンダリングを返します。
};
//テンプレートレンダリング
var Arenender = ice.rener = function（id、data、options）{
return icompile（id、options）（data）;
};
var iforeach = array.prototype.foreach？
関数（arr、fn）{
arr.foreach（fn）
}：
関数（arr、fn）{
for（var i = 0; i <arr.length; i ++）{
fn（arr [i]、i、arr）
}
};
//テンプレート分析
var iparse = function（tpl、options）{
var html = [];
var js = [];
vargingag = options.opentag ||。
var closetag = options.closetag ||。
//ブラウザの採用によって異なるスプライシング文字列戦略に応じて
var置換= isneweengine
[var out = ''、 "out+="; ";
：[var out = []、line = 1; "、" out.push（ "、"）;参加する （''）; "];;
//関数本文
var body =置換[0];
iforeach（tpl.split（opentag）、function（val、i）{{{
if（！val）
戻る;
}
var parts = value（closetag）;
var head = parts [0];
var foot = parts [1];
var len = parts.length;
// html
if（len === 1）{
body + =交換[3] + html.length +交換[4];
html.push（head）;
} それ以外 {
if（head）{
//コード
//スペースを削除します
head = head
.replace（/^/s+|/s+$/g、 ''）
.replace（/[/n/r]+/s*/、 ''）
//出力ステートメント
ifad.indexof（ '='）=== 0）{{
head = head.substring（1）.ruplace（/^[/s]+| [/s;]+$/g、 ''）;
ボディ + =交換[1] +ヘッド +交換[2];
} それ以外 {
ボディ += head;
}
body += 'line += 1;';
js.push（head）;
}
// html
if（foot）{
_foot = foot.replace（/^[/n/r]+/s*/g、 ''）;
if（！_foot）{
戻る;
}
body + =交換[3] + html.length +交換[4];
html.push（foot）;
}
}
}）;
body = "var render = function（data）{ice.mix（this、data）; try {" "
+ボディ
+交換[5]
+ "} catch（e）{ice.log（ 'rend error：'、line、 'line'）; ic.log（ '無効なステートメント：'、js [line-1]）;
+ "var proto = render.prototype = iextend（ihelper）;"
+ "Ice.mix（proto、options）;"
+ "return function（data）{return new render（data）.result;};" ;;;;;;;;;;
var render = new function（ 'html'、 'js'、 'iextend'、 'ihelper'、 'options'、body）;
return render（html、js、iextend、ihelper、options）;
};
ice.log = function（）{{
if（typeof console === 'underfined'）{{
戻る;
}
var args = array.prototype.slice.call（arguments）;
console.log.apply && console.log.apply（console、args）;
};
//オブジェクトをマージします
ice.mix = function（ターゲット、ソース）{
for（ソースのvarキー）{
if（source.hasownproperty（key））{
ターゲット[key] = source [key];
}
}
};
//関数を登録します
Ice.On = function（name、fn）{
ihelper [name] = fn;
};
//キャッシュをクリアします
ICE.CLEARCACHE = function（）{
icache = {};
};
//構成を変更します
ice.set = function（name、value）{
iconfig [name] = value;
};
//露出インターフェイス
ifofモジュール！
module.exports = template;
} それ以外 {
win.ice = ice;
}
}）（window）;