code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryの継承

jQueryで標準関数に処理をインジェクションしたかったので、継承についていくつかのパターンを試した。

jQueryでは、jQueryに関数を追加したり、関数を修正するには$.extendまたは$.fn.extendを用いる。

$.extendはjQueryオブジェクト自身の拡張($.trim()とか)、$.fn.extendはjQuery要素(インスタンス)、つまり$('#id')で得られるオブジェクトへの拡張($('#id').val()とか)となる。

元々既存の関数に処理を追加したかったのだが、できれば別名の関数ではなくポリモーフィズムっぽい実装としたかったのが動機で、以下はその実験の経緯。

継承の実験

まずは継承元となる関数の作成。

実験1

結果

ログ: test1

続けて、今度は継承してみる。オリジナルの処理を別名に退避させて、継承先の関数ではその退避させた関数を呼び出す。

実験2

結果

ログ: test1 
ログ: extend2

_test2を定義するところで、そのひとつ上の'extend1'と出力するtest1は継承しない('extend1'を出力する関数はこの時点で$.extendで処理されていないため)。$.extendが呼び出された時点の参照を割り当てる、つまりその前に呼び出した$.extendで定義された'test1'と出力する関数の参照がセットされる。

実験3

結果

ログ: test1 
ログ: extend2 
ログ: extend3

'extend2'を出力する$.test1を正しく継承している。

実験4

結果

ログ: test3 
ログ: extend3 

$.test1が呼び出している$._test3だけを上書き。JavaScriptは参照渡し、ってことが分かる。

$.fn.extendの方

実験5

結果

ログ: input_value 
ログ: overwritten: input_value 
ログ: overwritten: edit_value

$.extendと同じように基本上書き。

結局

$.extendも$.fn.extendも継承するためのルールに違いはないようなので、次の点に気をつけて継承する。

  • 元の関数に定義されていた処理はextendで上書きされて消えてしまうため、別名に退避させておく(上記コード例(実験5)だと_my_valとか)
  • 退避させる時は存在してなさそうな関数名にする。例えば_valとか_(アンダースコア)を付けただけだと、既存のコードに同名の関数があるかもしれないので
  • 退避は、extendの中で同時に書いても平気(上記例(実験5)だと_my_valの作成とvalの上書きを同時にextendに渡している)
  • 継承の継承をしたい場合などは、別のextendにする(実験2のように書いてはダメ)
関連記事
タグ:jQuery JavaScript
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。