jqueryの$.extendでajaxを拡張する

jQueryで関数の共通化でjQueryオブジェクトを拡張する$.extend()を利用するのでメモとして書いておきます。

$.extend(a, b)はjQueryオブジェクトをマージします。

var a = {
    top: '10px'
}
var b = {
    left: '20px'
}
var c = $.extend(a, b);

結果は

a: {
    top: '10px',
    left: '20px'
}
b: {
    left: '20px'
}
c: {
    left: '20px',
    top: '10px'
}

となります。aの値を上書きしたくない場合は、$.extend({}, a, b)のようにします。

a: {
    top: '10px'
}
b: {
    left: '20px'
}
c: {
    left: '20px',
    top: '10px'
}

無事aの値が上書きされないようになりました。

また、次の場合は、

var a = {
    top: {
        x: '10px',
        z: '10px'
    }
}
var b = {
    top: {
        y: '10px'
    }
}
var c = $.extend({}, a, b);

以下のようにc.topの値がうまくマージされず、b.yの値に上書きされてしまいます。

a: {
    top: {
        x: '10px',
        z: '10px'
    }
}
b: {
    top: {
        y: '10px'
    }
}
c: {
    top: {
        y: '10px'
    }
}

そこで、$.extend(true, {}, a, b)にすると、

a: {
    top: {
        x: '10px',
        z: '10px'
    }
}
b: {
    top: {
        y: '10px'
    }
}
c: {
    top: {
        x: '10px',
        y: '10px',
        z: '10px'
    }
}

うまくマージされました。これを利用して、$.ajaxを拡張してみます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
        <script>
            $.extend({
                ajaxCustom: function($options){
                    var $default = {
                        url: 'http://google.com',
                        type: 'GET',
                        success: function(){
                            alert('a');
                        },
                        error: function(){
                            alert('b');
                        }
                    };
                    $options = $.extend(true, {}, $default, $options);
                    return $.ajax($options);
                }
            });
            $(document).ready(function(){
                $("#check").click(function(){
                    $.ajaxCustom({
                        //以下はOverrideするときに必要
                        //url: "http://twitter.com",
                        //type: 'POST',
                        //success: function(){
                        //    alert('a1');
                        //},
                        //error: function(){
                        //    alert('b1');
                        //}
                    });
                });
            });
        </script>
    </head>
    <body>
        <div>
            <input type="button" id="check" value="check" /><br/>
        </div>
    </body>
</html>