.(ドット)一つで大違い

JQueryを使っていて、気づきにくいミスをしてしまっていたという話です。 jQueryのプラグインを作っていた時の話です。

これは間違ったやつです。。。

// 間違った記載
$fn.hogehoge = function() {
    this.css( "color", "green" );
};

$( "a" ).hogehoge (); 

デバックしてみても一向に止まらず、なんでだろうと思っていたら1つのミスに気づきました。 .(ドット)がありませんでした。

$.fn.hogehogeが正しい記載ですが、$とfnの間にドットが抜けていました。。。 以外に気づかず時間を無駄にしてしまいました。 他の設定がおかしいのかとかいろいろ考えてしまいました。

// 正しい記載
$fn.hogehoge = function() {
    this.css( "color", "green" );
};

$( "a" ).hogehoge (); 

まずは文法が正しいか確認しようと思った瞬間でした。

ちなみにプラグインには似たようなコードをまとめる役割があるので何度も見る処理だなぁと思ったらプラグインにまとめてみるのもいいかもしれません。