ども、小堤です。
そういえば、中途半端なまとめになってたなぁと思って。
flexSetterの話です。
前に１度触れましたが、そのときは、Ext.define経由でしたので。
flexSetter単体で、その機能をみていきたいと思います。
サンプルにも書かれてるとおり・・・
|
1 2 3 4 5 6 |
<span style="color:#000099;">var</span> setValue = Ext.Function.flexSetter(<span style="color:#000099;">function</span>(name, value) { <span style="color:#000099;">this</span>[name] = value; }); setValue(<span style="color:#009900;">'name1'</span>, <span style="color:#009900;">'value1'</span>); console.log(<span style="color:#000099;">this</span>.name1); |
まぁ、単純な、無名関数を用意して、その引数に、名前、値が渡されてきて、それをthisのキーとして値を設定する関数オブジェクトを作成します。
flexSetterの引数に、この無名関数を渡すと、別の関数オブジェクトが渡されてきます。
そして、ここで定義しているsetValueは完成します。
では、このsetValueには、関数オブジェクトが格納されていますが
どういった挙動をするのでしょうか。
上記のコードを、そのまま、Ext.onReadyの中で実行すると、グローバルスコープに対してname1が作成され、その値がvalue1になります。
|
1 2 3 4 5 |
setValue({ name1: <span style="color:#009900;">'value1'</span>, name2: <span style="color:#009900;">'value2'</span>, name3: <span style="color:#009900;">'value3'</span> }); |
次のように、オブジェクトを指定して、まとめて値を設定することも可能になります。
前にも記載しましたが、これは、Ext.defineによるコンフィグ（プロパティ）の設定などに利用されています。
では、Ext.onReadyでは、グローバルスコープになってしまうので、任意のスコープで実行させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span style="color:#000099;">var</span> o = {}; (<span style="color:#000099;">function</span>(){ <span style="color:#000099;">this</span>.setValue = Ext.Function.flexSetter(<span style="color:#000099;">function</span>(name, value) { <span style="color:#000099;">this</span>[name] = value; }); }).call(o); o.setValue(<span style="color:#009900;">'name1'</span>, <span style="color:#009900;">'value1'</span>); console.log(o.name1); o.setValue({ name1: <span style="color:#009900;">'value1'</span>, name2: <span style="color:#009900;">'value2'</span>, name3: <span style="color:#009900;">'value3'</span> }); console.log(o.name1); console.log(o.name2); console.log(o.name3); |
flexSetterを呼び出した時の、スコープは、oオブジェクトです。
従って、無名関数内のthis[name]… の部分のthisはoオブジェクトになります。
このように、flexSetterを実行したスコープのオブジェクトに対して、プロパティを柔軟に設定できる機能です。
だからflexSetterっていうのかな？たぶん。
Ext.defineで使われているだけでなく、Ext Coreに含まれますので、Ext JS だけじゃなく
今後Sencha TouchでもExt Coreでも利用する機会があるかも知れませんね。
特にライブラリ的なものや、共通化のものを作る人は。
ではでは。
