Ext.template分析


テンプレートといえば、FreeMakerを思い出す人が多いです.テンプレートとは?テンプレートは前に与えられた形で作られます.この事前に与えられた形がテンプレートです.プログラム開発上のテンプレートはちょっと違っていますが、全く同じではありません.
     例えば、私はページで誰かの情報を表示したいです.
 
<div style=”….”>  </div><div style=”….”>1983-09-24</div>
 
    これは内容です.多くの時間が私たちに必要なのはname、birthdayの二つの部分だけです.王さんや李さんなど違う人に対しては、毎回この内容を完全に書き換えます.まず煩雑です.修正も面倒です.スタイルは統一されています.一つだけ修正すれば統一的に修正できるといいですね.テンプレートができて、静的で不変な内容をテンプレートにして、動的な変化の内容を補間(${})という形で挿入します.私たちが必要な内容を構成します.ここまで言えば、JSPはテンプレートです.
      名詞を統一するために、ここでは動態変化の内容を補間と呼びます.静的に不変な内容をテンプレート静的な部分といいます.補間と静的な部分からなる全体をテンプレートの内容といいます.テンプレートの内容の補間を実際の値に適用した場合、テンプレート生成内容と呼びます.
     今からExt.Templateについて話しましょう.Javascriptテンプレートについては、最終的な結果としてブラウザに表示されるコンテンツが生成されます.表示されている内容については、まず考え方が書式です.テンプレートの静的な部分はデッドフォーマットで書いてもいいですが、この補間部分はどうすればいいですか?例えば、生年月日は1983-09-24ではなく、1983年9月24日を採用したいです.このようなフォーマット変換には、各Libに共通の関数があります.今の問題はこれらの関数を導入するということですか?実はいくつかの通用しないフォーマットの転換があって、この部分は業務のロジックに関連します.例えば、王さん、私たちはnameの補間部分を王さんに変えたいです.あるいは王さん、これは性別と関係があります.このフォーマットの変換コードはユーザーが自分で書くしかないです.では、どうやって加入しますか?1.1 Templateオブジェクトを構築するExt.Templateは上記の問題を解決するものである.その補間記号は{}を採用しています.
 
{name[:][format][(params)]}。
 
[]表現はオプションです.二つの部分に分けることができます.第一部分は着信ダイナミック値のnameで、第二部分は呼び出しフォーマット関数です.
 
この関数は、Ext.util.Formatの関数であっても良いし、自分が書いた関数であってもいいし、自分が書いた関数については、このTemplateのインスタンスに登録します.関数の最初のパラメータはデフォルトのバックグラウンドから入ってきたもので、nameの値です.Ext.util.Formatの関数としては、ellipsi(10)のように、関数名だけでいいです.Ext.util.Format.ellipsiは使えません.第一パラメータはデフォルトのバックグラウンドから入ってきたnameの値であり、その後のパラメータが入ってきたのは呼び出しのパラメータの順序であり、ellipsiの第二パラメータが10である.パラメータが一つしかないなら、関数の()は節約できます.自分が実現したモード化関数に対して、バックグラウンドは二つのパラメータしか伝えられません.一つはnameの値で、もう一つはテンプレートを変えて入ってきたすべてのダイナミック値です.つまり、自分のフォーマット関数を実現するには、このようなフォーマットでしか書けないということです.これからどうやってTemplateを構築しますか?Templateを構築するのは簡単です.まずテンプレートの内容を定義します.テンプレートの内容を定義すると、Html Segmentを定義します.ダイナミックな部分を補間で書いてもいいです.例えば:
 
<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>。
 
補間は上で紹介した様式を採用してください.
Ext.Templateの構築関数は、より柔軟な方法で定義されたテンプレートの内容を伝えます.テンプレートの内容は配列の形で伝えられます.また、複数のパラメータの形で伝えられます.
 
var t = new Ext.Template( '<div name="{id}">','<span class="{cls}">{name:trim} </span>', '</div>');)。
 
Ext.Templateの構築関数は、これらの文字列がテンプレートの内容として自動的にシリアルに接続されます.
テンプレートの内容が入ってきました.編集しないでください.フォーマットしないでください.自分で実現したフォーマット関数です.Ext.Templateの構築関数はconfigも提供しています.このパラメータで必要な構成を高く設定することができます.
 
{ compiled:true,disableFormats:true ,ToPrivateName:function(value,Values){}};。 
 1.2 appyTemplate(Values)はTemplateオブジェクトを構築した後、次にそれを用いてテンプレートを生成します.Ext.Templateは多くの実用的な方法がありますが、最終的にはappyTemplate(Values)を呼び出してコンテンツを生成します.関数の役割は、テンプレートの補間をValuesに入力された値に置き換えることです.テンプレートの内容は文字列形式であり、補間も文字列形式であり、valueも文字列形式であることができます.このようなstringに対する操作は、もちろんstring.replaceを用います.replace(regexp,str)を思い出してください.私たちのニーズとreplace(str)を発見します.ちょっと違っています.私が欲しいのは内挿の時に、補間の内容によって、伝達されたvaluesから同じ名前の変数値を見つけます.実際はもっと複雑になります.もし内挿の中にフォーマット関数があります.私たちの需要はreplace(regexp,str)の二つ目のパラメータがfunctionであり、そして最初のパラメータregexpの$1から99まで動的にこの関数のパラメータ値が入ってきます.string.replace(regexp,str)のようです.実現する方法がないです.実はまだ珍しい使い方があります.上のニーズを満たすために.Baidu.googleでもほとんど見つけられません.mozilaの文書を見に行きます.http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:String:replという定義があります.
 
var newString = str.replace(regexp/substr, newSubStr/function[, flags]); 
 
 いくつかの使用法は、2番目のパラメータがfunctionであり、1番目のパラメータのうち、regexpの$1、$2が関数のパラメータとして関数に伝達され、その関数を実行し、その結果はもちろん文字列であり、関数の最初のパラメータは、そのregexpにマッチする文字列の内容であり、2番目、3番目である.このregexpの使い方を知っておくべきです.補間{name[:][format]((((([params])]}を$1、$2、$3の値をパラメータ値としてreplacce(reg,function)の関数パラメータにアップロードします./\{(([w-]+)(?::([\\s.*))([[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]]]]]]]]])(??????:([[[[[[[[[[[[[[[[[[[[[[[[*]]]]]]]]]]]]]]]]]]]]replace(reg,function)regで検索されたstrを最初のパラメータとしてfunctionに伝達する最初のパラメータのうち、$1、$2、$3の第二、三、四つのパラメータのうち、現在の主な任務はこの関数を実現することです.その後、string.replaceで文を実行することができます.この関数は三つのタスクがあります.最初のミッションは名前でマッピングし、動的に補間中のnameをvalues[values]にマッピングします.の値は、2番目のタスクは汎用フォーマットです.Ext.util.Formatの関数を呼び出してフォーマット化します.例えばtrim(values[name])のような名前付きマッピングで値を見つけます.3番目のタスクはいくつかの業務に関連するフォーマット変換を呼び出すことです.例えば、李さんを李さんに変えることです.この関数は以下の通りです.
 
var fn = function(m, name, format, args){ 
if(format && useF){//     format         format 
if(format.substr(0, 5) == "this."){ 
//           Template                , 
return tpl.call(format.substr(5), values[name], values); 
}else{ 
if(args){ //         
var re = /^\s*['"](.*)["']\s*$/; 
args = args.split(','); 
for(var i = 0, len = args.length; i < len; i++){ 
args[i] = args[i].replace(re, "$1"); 
} 
args = [values[name]].concat(args); 
}else{ 
args = [values[name]]; 
} 
//  Ext.util.Format        。     +       
return fm[format].apply(fm, args); 
} 
}else{ 
//     
return values[name] !== undefined ? values[name] : ""; 
} 
}; 
 

 

 

return tpl.call(format.substr(5), values[name], values); 
 
このcallとfucntionの.callは、applyとは います.このクラスの で のcall を び します.
 
 function(fnName, value, allValues){ 
return this[fnName](value, allValues); }, 
 
 その は、thisの の を び して、value、allValuesをパラメータとして ることです.1.3 comple()は にTemplateの を えます.テンプレートは されますが、appyTemplate(Values) 、regexpをテンプレートの に とreplaceという をするのはかなり がかかる です. は しく えてみます.Valuesが する に、これらの の を つけてもらえますか?Valuesが ったら、 にこれらの を き えればいいです.stringにとっては、やはり を けます. の い アルゴリズムを するか、これではregexpは えません. うなら が がらないです.もっといい がありますか?ブロック けの えを してもいいです.テンプレートの のstringをいくつかの さい に けて、 えば の を って ぎます.このように で の を つけたらもっと いです. の を します.その 、 をstringに することができます.JavaScript のjoin() には に い があります. はstrではなく、 にstringに されます.exprのように、Js は に を してstringを します.この を に して、 をJs で します.Valuesが わってきたら、 を するjinを び します. は です.Values はいつ えられますか?これはユーザーによって されます.このように いい は、 を してユーザーが な に び してvaluesに えます. な えはもう まっています. はどうやってcompledを するかです. を したら、ユーザーが び すことができます.JavaScriptの な のほとんどは、ダイナミックな です. たちが な の は の りです.
 
this.compiled = function(values){ return ['<div style=\”….\”>', 
fm.trim(values['name']),'</div><div style=\”….\”>', fm.toDate(values['birthday']),'</div>'].join('');}; 
  えられた の は、 はどのように せ められていますか?つぎはeval()を じて になります. のコードは に せ め です.
 
var fn = function(m, name, format, args){ 
if(format && useF){ 
args = args ? ',' + args : ""; 
if(format.substr(0, 5) != "this."){ 
format = "fm." + format + '('; 
}else{ 
format = 'this.call("'+ format.substr(5) + '", '; 
args = ", values"; 
} 
}else{ 
args= ''; format = "(values['" + name + "'] == undefined ? '' : "; 
} 
//',fm.xxxf(values['namex'],xx,yy),' 
//',this.call('xxxf',values['namex'],values),' 
//',(values['namex']==undefined?'':values['namex']),' 
return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'"; 
}; 

                 ,            。    : 

body = ["this.compiled = function(values){ return ['"]; 
body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r
|
)/g, '\
').replace(/'/g, "\\'") .replace(this.re, fn)); body.push("'].join('');};"); body = body.join('');
 
  たちが しい にまとめました.bodyは の です.eval(body)を じて、compled(values)という を に しました.その はこの を べばいいです.1.4
Ext.Templateはまた、 したテンプレートの をDom Elementに するための の を しています.これらは です.Ext.templateはテンプレートの を するための てん です.これはテンプレートの も な です.テンプレートには の があります. えば、for 、if などは されていません.
                                                                                                              prk   2008-7-28