jQuery の関数をオーバーライドする方法

　今回は、jQuery を使って$('#hoge').hoge()とした時に、元のhogeの機能に加えて追加のコードが走るようにしたいですね、というお話です。

普通の JavaScript で関数をオーバーライドする方法

　こちらは JSer なら常識ですね。

var orgHoge = window.hoge;
window.hoge = function() {
    // TODO: 事前の追加のコード
    var result = orgHoge.apply(this, arguments);
    // TODO: 事後の追加のコード
    return result;
};

　なお、このコードを見て「処理が足りてないじゃないか」と言える方は、以降の話は全く必要ないかと思います。

　では、jQuery で$('#hoge').hoge()とした時のhogeはどこで定義されているかというと、$.fn.hogeです。これまた jQueryer にとっては常識ですね。

　同様に、オーバーライドしてみましょう：

var orgHoge = $.fn.hoge;
$.fn.hoge = function() {
    // TODO: 事前の追加のコード
    var result = orgHoge.apply(this, arguments);
    // TODO: 事後の追加のコード
    return result;
};

　簡単。試しに jQuery Activity Indicator を使い、具体例を作ってみました。

　こちらがオーバーライド前。
　真面目に書くと面倒なので必要最低限ですが、ON ボタンを押すと枠の中がくるくる回って、OFF ボタンを押すと消えます。

<!DOCTYPE html>
<html>
    <head>
       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
       <script src="jquery.activity-indicator-1.0.0.js"></script>
       <style>
        #test {
            width: 100px;
            height: 100px;
            border: solid red 0.25em;
        }
        </style>
   </head>
    <body>
        <div>
            <button onclick="$('#test').activity()">ON</button>&emsp;<button onclick="$('#test').activity(false)">OFF</button>
        </div>
        <div id="test"></div>
    </body>
</html>

　次に、くるくるが回り始めたら枠線を灰色にして、止まったら赤に戻すようにしてみましょう。

<script>
$(function(){
   var activity = $.fn.activity;
   $.fn.activity = function(){
       if (arguments[0] === false) {
           $(this).css('borderColor', 'red');
       }
       else{
           $(this).css('borderColor', 'gray');
       }
       return activity.apply(this, arguments);
   };
});
</script>

　あれ……くるくるが出ない！！

どうして出ないの？

　試しにスクリプトをデバッグしてみると、次のようなメッセージが出ます：

transform 属性のパース中に予期せぬ値 translate(NaN,NaN) が見つかりました。
el.setAttributeNS(null, k, v);

　……よくわからん。

　とりあえず Activity Indicator のソースをよく見てみると、次のような部分がある事に気付きます。

opts = $.extend({color: $this.css('color')}, $.fn.activity.defaults, opts);

　どうやら、オプションのデフォルト値を$.fn.activity.defaultsに持っていて、ユーザーが指定していないオプションがある場合にはそこから値を取っているようです。
　オーバーライドした$.fn.activityはdefaultsプロパティを持っていないので、変なところにundefinedが入って先ほどのエラーが出たものと思われます。

　なので、正しくはこうやって、各種プロパティをオーバーライドした関数に付け替えてやらねばなりません：

<script>
$(function(){
   var activity = $.fn.activity;
   $.fn.activity = $.extend(function(){
       if (arguments[0] === false) {
           $(this).css('borderColor', 'red');
       }
       else{
           $(this).css('borderColor', 'gray');
       }
       return activity.apply(this, arguments);
   }, activity);
});
</script>