JSテンプレート実装方法_JavaScriptスキル-jsチュートリアル-php.cn

JSテンプレート実装方法_JavaScriptスキル

WBOY

リリース： 2016-05-16 17:38:19

オリジナル

1230 人が閲覧しました

概要

JS を使用して DOM をレンダリングする場合、通常は文字列を使用して DOM を作成し、それを親要素に添付します。添付された DOM が動的で揮発性の場合、関数内に多くのロジックを記述する必要があります。それが制御の実装プロセス中にある場合、これによってもたらされる問題はさらに深刻になります。

この問題に対する一般的な解決策は、テンプレートを使用し、それらを構成アイテムとしてコントロールに渡し、データとレンダリングを分離することです。具体的な実装方法は以下のとおりです。

文字列置換。通常のマッチングを使用してデータを文字列に置き換えます。
レンダリング関数。この関数は文字列を返します。
文字列内の関数を実行できるテンプレートエンジン (組み込みまたはカスタム)

代理

文字列の置換は、テンプレートを実装する最も簡単な方法です。具体的な実装を見てください。

1. 置換関数を定義します

コードをコピーコードは次のとおりです:

/**

* 文字列内のフィールドを置き換えます。

* @param {String} str テンプレート文字列

* @param {Object} o json データ

* @param {RegExp} [regexp] 文字列に一致する正規表現

関数置換(str,o,regexp){

return str.replace(regexp || /\?{([^{}] )}/g, function (match, name) {

return (o[名前] === 未定義) '' : o[名前];

});

}

2. 構成アイテムを使用します:

コードをコピーコードは次のとおりです。

var config = {

データ: {値: '123',テキスト:'abc'},

テンプレート: '{text}'

};

3. DOM を作成するプロセスでは、次のように呼び出します。

コードをコピーコードは次のとおりです。

var str = replace(template,data) ;

$(str).appendTo('body');

上記の例を通じて、データと文字列の分離が完了しました。これにより、現在の JS フレームワークのほとんどがこの方法でテンプレートを提供できます。

これに基づいて、次の拡張機能を作成できます。興味がある場合は、自分で実装できます。

1. パラメータ名の代わりに数字を使用します:

「{0}」など

2. オブジェクト属性のネストされた使用:

「{obj.name}」など

利点: 実装が簡単で理解しやすい。

欠点: 単純なデータ構造のみを実行でき、ループや条件文を処理できません。

レンダリング方法(Render)

レンダリング関数で非常に複雑なロジックを処理し、レンダリング関数をパラメーターとして構成アイテムに渡すことができます。

設定項目:

コードをコピーコードは次のとおりです。

var config = {

データ: [{値 : '0',テキスト:'abc'},{値 : '1',テキスト:'bcd'}],

レンダラー: function(obj){

if(obj.value === '0'){

obj.text を返す;

}その他{

return ' ' obj.text ' ';

}

};

使用時:

コードをコピーコードは次のとおりです。

for(var i = 0; i< data.length ; i ){

var obj = data[i],

str = config.renderer(obj);

$(str).appendTo('body');

}

これは、ループや条件文を扱う場合に最適なソリューションです。

利点: 比較的シンプルな実装、柔軟な実装、複雑なデータ構造に対応可能、デバッグが簡単

欠点:

レンダリング機能は設定項目なのでわかりにくいです。
機能が長いと設定項目が肥大化します。
各シーンは独自のレンダリング関数を実装する必要があります。

テンプレートエンジン (XTemplate)

すべての JS UI ライブラリには強力なテンプレートエンジンがあり、テンプレートエンジンには次の関数を実装する必要があります。

1. 文字列の交換

2. 複雑なステートメント、条件、ループを処理する

3. 組み込み関数を使用する

4. ユーザーがカスタム関数を渡すことを許可します

現在、テンプレートエンジンには 2 つの一般的な実装方法があります:

1. 正規表現を使用して文字列を分析し、特別なステートメントロジックを実行し、対応するデータを置き換えます

KISSY テンプレートの例を見てみましょう:

'こんにちは、{{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}。'

上記はループや条件文を扱えるテンプレートです。

2. 文字列の構文解析を実行し、構文ツリーを生成し、対応するタグまたはデータを置き換えます。

Ext の xtemplate の使用方法は次のとおりです:

コードをコピーコードは次のとおりです。

var tpl = new Ext.XTemplate(
'

{name} の好きな飲み物:

'、
''、
'

',
''
);
tpl.overwrite(panel.body, data);

利点: 強力な機能と高い柔軟性

短所: 使い方が複雑で、理解するのがさらに困難です。デバッグは簡単ではありません。

問題について考える

1. コントロール内でテンプレートを使用すると、データと DOM を分離できます。ただし、コントロールに多数のテンプレートが含まれる場合、ユーザーの作業負荷が増大し、デバッグが困難になるため、バランスを考慮する必要があります。

2. 多数のコントロールが同じテンプレートと同じデータ構造を使用する場合、各コントロールを個別に構成するのは不便です。より良い解決策は、親コントロールがテンプレートを構成できるようにすることです。

JSテンプレート実装方法_JavaScriptスキル

概要

代理

レンダリング方法(Render)

テンプレート エンジン (XTemplate)

問題について考える

テンプレートエンジン (XTemplate)