最近、私はテストタスクを開発していたので、JSテンプレートを使用してみることにしました。
結果は次のとおりです。
1）.htaccessを使用してURLを解析し、必要なHTMLページを返すことにより、ダウンロードが開始されます。
2）ブラウザはJavaScriptサーバーからロードします。
3）最初の初期化を開始します：テンプレートファイル（.skin）と必要な言語のファイル（.lang-たとえば、XML形式）の読み込み。
4）データをロードし、ロードされたテンプレートを使用してブラウザにレンダリングします。
5）キーストローク、リンクなどを処理します。 （おそらく、別のトピックで前後の処理について説明します:)）
6）必要に応じて、サーバーにリクエストを送信して新しいデータを受信します。
1. AJAXモジュール
XML / JSONを受信し、指定されたJS関数にさらに引き裂くために送信するためのモジュール。 必要に応じて、複数の連続したリクエストを実行できます。関数 ajax_load（url、パーサー、パー、次）{この機能を使用して、メインページをリロードせずにサーバーからデータをロードします。
var req、ab、done = 0;
this .request = function （）{
if （window.XMLHttpRequest）
ajaxRequest = new XMLHttpRequest（）;
else if （window.ActiveXObject）{
ajaxRequest = new ActiveXObject（ "Msxml2.XMLHTTP" ）;
if （！ajaxRequest）
ajaxRequest = new ActiveXObject（ "Microsoft.XMLHTTP" ）;
}
return ajaxRequest;
}
this .ReqStatus = function （）{
if （req.readyState == 4）{
clearTimeout（ab）;
if （req.status == 200）{
パーサー（req、par）;
if （次）
ajax_load（次[0]、次[1]、次[2]、次[3]）;
} その他
alert（ "AJAXエラー：\ n" + req.statusText + "\ n" + url）;
}
}
if （！url）
return parcer（par）;
req = this .request（）;
req.onreadystatechange = this .ReqStatus;
req.open（ "GET" 、url、 true ）;
req.send（ null ）;
ab = window.setTimeout（ function （）{req.abort（）;}、10000）;
return req;
} *このソースコードは、 ソースコードハイライターで強調表示されています。
入力-URL 、 リクエスト処理用のJS関数、関数用の 追加パラメーター 、[ 次の順次リクエスト用のURL 、 JS関数 、 追加パラメーター 、[ URL ... ]]
2.スキンモジュール
パラメータ付きテンプレートをHTMLに変換するためのモジュール。関数 Skin（）{
var that = this ;
this .skin = new Array（）;
this .trace = function （file）{
var f、x;
var rx = / <！SKIN '（[\ w \ d] +）' >（[\ s \ S] *）<！END '\ 1' > / gim
f = that.skin [ファイル] .match（rx）;
for （ var i in f）{
x = rx.exec（f [i]）;
that.skin [ファイル+ "。" + x [1]] = x [2];
that.trace（ファイル+ "。" + x [1]）;
that.skin [ファイル] = that.skin [ファイル] .replace（f [i]、 '' ）;
}
}
this .use = function （html）{
var str;
{
if （！（str = html.match（/％（[\ w \ d。] +）％/ gim）））
休憩 ;
for （ var i in str）{
var tp = str [i] .replace（/％/ gi、 '' ）;
if （that.skin [tp]）
html = html.replace（str [i]、that.skin [tp]）;
他に
html = html.replace（str [i]、 '' ）;
}
} while （1）;
return html;
}
this .redraw = function （window、html）{
if （！ document .getElementById（window））
アラート（ 「ID付きのERR +ウィンドウ」 ）;
document .getElementById（ウィンドウ）.innerHTML = that.use（html）;
}
} *このソースコードは、 ソースコードハイライターで強調表示されています。
モジュールには次の機能があります。
trace-次の形式の文字列から追加のパターンを生成します。
<！ SKIN ' pattern_name_1 ' > ... ... <！ END 'pattern_name_1' >
それらを％template_name_1％、％template_name_1.name_of_pattern_name％、％template_name_2％に変換しています。
use-テンプレート内のパラメーターの置換。 テンプレートのパラメーターは％parameter_name％に保存されます。
redraw-変換されたテンプレートを要素に書き込みます。HTMLidを使用して目的の要素を識別します。
3.パターンの使用
オンラインストアの一部を取得します。 ユーザーがいたかどうかだけを表示して、表形式で情報を出力します。たとえば、テンプレート（ main.skin ）を次のようにします。
<！ スキン 「ボディ」 >言語インターフェースを備えたXMLファイル（ rus.xml ）：
< div id =“メニュー” >
< span class = "goods_name" onclick = "ShowInfo（）;" > ％LANG.INFO％ </ span >
< span class = "goods_name" onclick = "ChangeLang（ 'rus'）" > ％LANG.RUSSIAN％ </ span >
< span class = "goods_name" onclick = "ChangeLang（ 'eng'）" > ％LANG.ENGLISH％ </ span >
</ div >
< div id = "main" >
<！ スキン 「ウェルカム」 >
<！ SKIN 'FIRST' > ％LANG.WELCOME_NEW％ <！ 「最初」で終了 >
<！ SKIN 'DATE' > ％DAY％。％MONTH％。％YEAR％ <！ 終了 「日付」 >
<！ SKIN 'LAST' > ％LANG.WELCOME_OLD %% SKIN.WELCOME.DATE％ <！ END 'LAST' >
<！ 「ウェルカム」の終了 >
</ div >
...
<！ スキン 「オーダー」 >
< テーブル クラス = "価格" 幅 = "500ピクセル" >
％PRICES％
<！ SKIN 'PIECE' > < tr id = "％GOODS_ID％" > < td class = "order_name" > ％GOODS.NUM％。 ％GOODS.NAME％ </ td > < td > ％GOODS.PRICE％ </ td > </ tr > <！ 「ピース」の 終わり >
</ 表 >
<！ 「注文」の終了 >
<！ スキン 「ローディング」 >
％LANG.LOADING％
<！ 「ロード」の終了 >
...
<！ END 'BODY' > *このソースコードはSource Code Highlighterで強調表示されました。
<？ xml バージョン = "1.0" encoding = "windows-1251" ？ > < オブジェクト >次に、テンプレートをブートストラップしてコントロールを転送するJSコードを作成します（ main.js ）：
< 言語 > rus </ 言語 >
< word name = "ENCODING" > windows-1251 </ word >
< word name = "INFO" >情報</ word >
< word name = "SUPPORT" >お問い合わせ</ / word >
< word name = "ENGLISH" >英語</ word >
< word name = "RUSSIAN" >ロシア語</ word >
< word name = "WELCOME_NEW" >ようこそ、新しいユーザー。 </ word >
< word name = "WELCOME_OLD" >あなたの最後の訪問は</ word >
< word name = "LOADING" >サイトベースへの接続が進行中です</ word >
</ オブジェクト > *このソースコードは、 ソースコードハイライターで強調表示されました。
//テンプレートのオブジェクトを作成します
var skins = new Skin（）;
// XML言語テンプレートの形式でロードされたテンプレートに追加する％LANG.xxxxxx％
関数 SetLanguageXML（req）{
var r = req.responseXML.getElementsByTagName（ "word" ）、i;
for （i = 0; i <r.length; i ++）
skins.skin [ 'LANG。' + r [i] .attributes.getNamedItem（ "name" ）.value] = r [i] .firstChild.nodeValue;
}
//ロードされたテンプレートを％SKIN.xxxxxx％で解析
関数 TraceResponse（req）{
skins.skin [ 'SKIN' ] = req.responseText;
skins.trace（ 'SKIN' ）;
}
//言語をロードし、テンプレートをロードし、この後、初期化に進みます
ajax_load（ "rus.xml" 、SetLanguageXML、 null 、[ "main.skin" 、TraceResponse、 null 、[ null 、RedrawAll]]）; *このソースコードは、 ソースコードハイライターで強調表示されました。
初期化後にブラウザウィンドウにテンプレートを表示する欠落している関数と、テンプレートonclickで使用される関数を追加します。
// onclickによって言語を変更するための関数多くの場合、テンプレートエンジンを使用すると、「実行可能な」テンプレートを作成できるため、解析が非常に難しくなります。 ここでは、Javascriptを使用して簡単に実装できます。
関数 ChangeLang（lang）{
// rus.xmlとeng.xmlがある場合、別の言語に切り替えるには、言語ファイルの再起動のみが必要です。
ajax_load（lang + ".xml" 、SetLanguageXML、 null 、[ null 、RedrawAll]）;
}
//初期化中に初期ページを再生成する関数
関数 RedrawAll（req）{
// id = 'body'の要素はhtmlで宣言する必要があると言わなければなりません。 たとえば、<div id = 'body'> </ div>。
skins.redraw（ 'body' 、skins.skin [ 'SKIN.BODY' ]）;
DrawWelcome（）;
}
// Cookieを操作するための関数
関数 createCookie（名前、値、日）{
if （days）{
var date = new Date（）;
date.setTime（date.getTime（）+（days * 24 * 60 * 60 * 1000））;
var expires = "; expires =" + date.toGMTString（）;
}
else var expires = "" ;
document .cookie = name + "=" + value + expires + "; path = /" ;
}
関数 readCookie（名前）{
var nameEQ = name + "=" ;
var ca = document .cookie.split（ ';' ）;
for （ var i = 0; i <ca.length; i ++）{
var c = ca [i];
while （c.charAt（0）== '' ）c = c.substring（1、c.length）;
if （c.indexOf（nameEQ）== 0） return c.substring（nameEQ.length、c.length）;
}
nullを 返し ます 。
}
//ようこそ画面を印刷します;）
関数 DrawWelcome（）{
var date、t;
//クッキーはありますか？ その後、すでにユーザーがいました。 この情報をいつ読んで表示するか
if （t = readCookie（ 'date' ））{
日付= 新しい日付。
date.setTime（t * 1000）;
skins.skin [ 'DAY' ] = date.getDate（）;
skins.skin [ 'MONTH' ] = date.getMonth（）;
skins.skin [ 'YEAR' ] = date.getFullYear（）;
show = skins.skin [ 'SKIN.BODY.WELCOME.LAST' ];
} else {
//サイトで初めて-Cookieを作成し、他の情報を表示する場合
日付= 新しい日付。
createCookie（ 'date' 、parseInt（date.getTime（）/ 1000）、7）;
show = skins.skin [ 'SKIN.BODY.WELCOME.FIRST' ];
}
skins.redraw（ 'main' 、show）;
} *このソースコードは、 ソースコードハイライターで強調表示されています。
//サーバーからダウンロードし、info.xmlを明確な形式で印刷します（onclick関数）この場合、 info.xmlファイルは次の形式で生成する必要があります。
関数 ShowInfo（）{
skins.redraw（ 'main' 、skins.skin [ 'SKIN.BODY.LOADING' ]）;
ajax_load（ "info.xml" 、DrawInfo）;
}
関数 DrawInfo（req）{
var i;
var p = req.responseXML.getElementsByTagName（ " pricelist " ）;
//製品リストをゼロにします
skins.skin [ ' PRICES ' ] = "" ;
skins.skin [ 'GOODS.NUM' ] = 1;
for （i = 0; i <p.length; i ++）{
//テンプレートのパラメーターを設定します
skins.skin [ 'GOODS.NAME' ] = p [i] .getElementsByTagName（ "name" ）[0] .firstChild.nodeValue;
skins.skin [ 'GOODS.PRICE' ] = p [i] .getElementsByTagName（ "price" ）[0] .firstChild.nodeValue;
skins.skin [ 'GOODS.ID' ] = p [i] .getElementsByTagName（ "id" ）[0] .firstChild.nodeValue;
//製品のリストに追加し、テーブルの完成（レンダリング）パーツ
skins.skin [ ' PRICES ' ] + = skins.use（skins.skin [ 'SKIN.BODY.ORDER.PIECE' ]）;
skins.skin [ 'GOODS.NUM' ] ++;
}
skins.redraw（ 'main' 、skins.skin [ 'SKIN.BODY.ORDER' ]）;
} *このソースコードは、 ソースコードハイライターで強調表示されています。
<？ xml バージョン = "1.0" encoding = "windows-1251" ？ > < オブジェクト >そして最後に、 index.html 。 はい、私は間違っていませんでした、すなわちhtml：
< 価格表 >
< id > 1 </ id >
< name >パン</ name >
< 価格 > 12 </ 価格 >
</ 価格表 >
< 価格表 >
< id > 2 </ id >
< name >スイカ</ name >
< 価格 > 200 </ 価格 >
</ 価格表 >
< 価格表 >
< id > 3 </ id >
< name >ジャガイモ</ name >
< 価格 > 32 </ 価格 >
</ 価格表 >
</ オブジェクト > *このソースコードは、 ソースコードハイライターで強調表示されました。
< html > < head >
< meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251» >
</ 頭 >
< body > < div id = 'body' > </ div >
< script type = "text / javascript" src = "main.js" > </ script >
</ body > </ html > *このソースコードは、 ソースコードハイライターで強調表示されました。
実際の例は、 zcn.ru / marketにあります。
4.このアプローチの欠点と利点
欠点はほとんどありませんが、非常に重要です。-追加のツールを導入せずにURLを操作できない。
-戻るキーと進むキーを使用することはできません。 著者がエミュレーションを提供しなかった場合。
-検索エンジンは、JavascriptとAJAXを解析する方法を知りません。
-ユーザーのJSが無効になる確率。
これらの問題と解決方法については、ここで述べました-habrahabr.ru/blog/webdev/44753.html 、このため私はそれらに焦点を合わせません。
プラスも重要です。
-非常に多く（適切に最適化されている場合）、サーバーの負荷が軽減されます。
-サイトの外観を変更するためにPHPコードを変更する必要はありません-ccs / javascriptおよびテンプレートのみ。
-テンプレートとハンドラーの透明でかなり明確なコード。 新しい「ページ」を追加するのは非常に簡単です。
-さまざまな設定の簡単な変更、他のXMLファイルの簡単なアップロード。 言語、通貨（ドル、摩擦）など。ページをリロードせずに。