extend
extend はインスタンスのプロパティやメソッドを拡張するための高階メソッドです。
通常、ユーザーがインスタンスのプロパティやメソッドを拡張することは推奨されません。これは学習コストを増加させるためです。チーム内でインスタンスの動作をカスタマイズする特別なシナリオがある場合を除き、このような行為は推奨されません。
- 私は1です
- 私はターゲットです
- 私は3です
ロガー
拡張 $ レイヤー
jQueryと同様に、fn.extendを使って基盤となるインスタンスのプロパティやメソッドを拡張することもできます；fnから拡張されたプロパティやメソッドはすべてのインスタンスに適用されます。
- I am 1
- I am target
- I am 3
logger
拡張テンプレート構文
extend を使用してプロパティや関数を拡張することで、テンプレート構文の機能を増やしたり、コンポーネント専用のテンプレート構文糖衣構文を提供したりできます。ただし、非公式のテンプレート構文はできるだけ使用しないように注意してください。なぜなら、それらは使用者に一定の学習コストをもたらし、大量の非公式テンプレート構文糖衣構文は開発体験を低下させるからです。
拡張属性
拡張属性を使うと、テンプレート内で : を用いて設定できます。以下では red 属性を拡張し、red が true のときにフォントの色を赤くします：
$.fn.extend({
set red(bool){
if(bool){
this.css.color = "red";
}else{
this.css.color = '';
}
}
});
{{count}}
この例では、テンプレート構文に red 属性を追加し、count % 3 が 0 ではない場合、文字色が赤色になります。
拡張メソッド
extend を使う拡張メソッドにより、テンプレート構文内で利用できるようになります。メソッド名はコロンの前の部分です。ここでは color というテンプレート構文を拡張しており、後に続く引数は定義された拡張メソッドに渡されます。
ここでは always 属性を true に設定しており、コンポーネントがインターフェースを更新する必要があるたびに、この定義済みメソッドが呼び出されることを示しています。always を設定しない場合、このテンプレート構文関数は一度しか実行されません。
その中で、options はより多くのパラメータを提供し、よりカスタマイズ可能なテンプレート構文の開発を支援します：
$.fn.extend({
color(value, func, options){
const bool = func();
if(bool){
this.css.color = value;
}else{
this.css.color = '';
}
}
});
$.fn.color.always = true;
{{count}}
テンプレート構文の原理
ここまでで、ofa.js の多くのテンプレート構文が実際には extend によって拡張されていることを理解しているはずです：
class、attrメソッドはビューが更新されるたびに実行されるon、oneのような関数バインドは一度しか実行されない
以下の例を見れば、ofa.js のテンプレートレンダリングの仕組みがよりよく理解できます：
class always => {{classalways}}
attr always => {{attralways}}
on always => {{onalways}}