如何简化此javascript？

效果相同，但有4种不同的缩放元素。如何简化此代码

<script>
        $(document).ready(function(){
            $('.etalage').etalage({
                show_hint: false,
                thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });

        $(document).ready(function(){
            $('.etalage2').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element2',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });

    $(document).ready(function(){
            $('.etalage3').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element3',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });    

    $(document).ready(function(){
            $('.etalage4').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element4',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });


    </script>

效果相同，但有4种不同的缩放元素。如何简化此代码

<script>
        $(document).ready(function(){
            $('.etalage').etalage({
                show_hint: false,
                thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });

        $(document).ready(function(){
            $('.etalage2').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element2',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });

    $(document).ready(function(){
            $('.etalage3').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element3',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });    

    $(document).ready(function(){
            $('.etalage4').etalage({
                show_hint: false,
                    thumb_image_width: 470,
                thumb_image_height: 470,
                source_image_width: 1000,
                source_image_height: 1000,
                zoom_element: '#custom_zoom_element4',
                //source_image_height: 480,
                //source_image_width: 480,
                zoom_area_width: 470,
                zoom_area_height: 470
            });
        });


    </script>

简单到可以做到：

 $(document).ready(function(){
     for(var i=1; i <= 4; ++i){
        $('.etalage'+(i===1 ? '':i)).etalage({
            show_hint: false,
            thumb_image_width: 470,
            thumb_image_height: 470,
            source_image_width: 1000,
            source_image_height: 1000,
            zoom_element: '#custom_zoom_element'+(i===1 ? '':i),
            //source_image_height: 480,
            //source_image_width: 480,
            zoom_area_width: 470,
            zoom_area_height: 470
        });
     }
});

再给一个类，对所有的etalage元素说foo

---

您可以使用$.extend函数进行简化，如下所示

$(document).ready(function(){
    var defaultOpts = {
        show_hint: false,
        thumb_image_width: 470,
        thumb_image_height: 470,
        source_image_width: 1000,
        source_image_height: 1000,
        zoom_element: '#xyz',
        zoom_area_width: 470,
        zoom_area_height: 470
    };
    $(".id1").etalage(defaultOpts);
    $(".id2").etalage($.extend({},defaultOpts,{zoom_element:"#abc"}));
    $(".id3").etalage($.extend({},defaultOpts,{zoom_element:"#def"}));
});

使用上述方法，只需更改extend函数的第三个参数，就可以覆盖任何属性