extend
extend は高階メソッドであり、インスタンスの属性やメソッドを拡張するために使用されます。
通常、ユーザーがインスタンスのプロパティやメソッドを拡張することは推奨されません。学習コストが増加するためです。チーム内でインスタンスの動作をカスタマイズする特別なシナリオがある場合を除き、これを行うことは推奨されません。
- I am 1
- I am target
- I am 3
logger
$ の底を拡張する
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のような関数バインディングは1回だけ実行されます
以下の例を確認することで、ofa.jsのテンプレートレンダリングの原理をよりよく理解できます。
class always => {{classalways}}
attr always => {{attralways}}
on always => {{onalways}}