JQuery небольшой рефакторинг, JSON Call

Question

Мне нужно ваше предложение сделать рефакторинг в коде jquery, потому что теперь это выглядит ужасно для меня. У меня есть 4 json звонка, но разница это просто URL-вызов.

EX:

        var userId = MyuserID;
        var perPage = '45';
        var showOnPage = '45';

        var tag =  'tag1';
        var tag1 = 'tag2';
        var tag2 = 'tagn';


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo("#flickr ul");
            });
            $("#flickr a").fancybox();
        });


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tag1 + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos1 ul");
            });
            $(".Sets a").fancybox();
        });


        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
            '&tags=' + tagn + '&per_page=' + perPage + '&jsoncallback=?',
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos ul");
            });
            $(".Sets a").fancybox();
        });

В теге var есть только одно отличие в этом URL:

Может ли кто-нибудь помочь мне не повторять все эти вещи?

Извините за такой длинный мусор :(

Answer 1

function getSomeJson(url) {
        $.getJSON(url,
        function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;'
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(".SetPinos ul");
            });
            $(".Sets a").fancybox();
        });
    }

и просто вызовите его три раза, передав каждую строку URL в качестве аргумента url.

В качестве дополнительного примечания я хотел бы отметить, что браузеры имеют ограничение на количествоодновременные запросы XHR.Посмотрите здесь:

Сколько одновременных запросов AJAX (XmlHttpRequest) разрешено в популярных браузерах?

Если ваше приложение превышает несколько субъективный«рекомендуемое» количество одновременных запросов, вы можете подумать о настройке приложения таким образом, чтобы следующий запрос происходил из обратного вызова success.Это гарантирует, что запрос не будет отправлен до тех пор, пока предыдущий не будет завершен.

Answer 2

Похоже, что оба URL-адреса обратного вызова (особенно селекторы) различны. Итак:

function startFlickrCall(tag, appendLoc, fancyBox)
{
        var userId = MyuserID;
        var perPage = '45';
        var showOnPage = '45';

        $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
            'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
                  '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){
            var classShown = 'class="lightbox"';
            var classHidden = 'class="lightbox hidden"';

            $.each(data.photos.photo, function(i, rPhoto){
                var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
                    + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;

                var thumbPhotoURL = basePhotoURL + '_s.jpg';
                var mediumPhotoURL = basePhotoURL + '.jpg';

                var photoStringStart = '<li><a ';
                var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
                    mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
                    rPhoto.title + '"/></a><span>'+rPhoto.title+'</span></li>;';
                var photoString = (i < showOnPage) ?
                    photoStringStart + classShown + photoStringEnd :
                    photoStringStart + classHidden + photoStringEnd;

                $(photoString).appendTo(appendLoc);
            });
            $(fancybox).fancybox();
        });
}

startFlickrCall('tag1', "#flickr ul", "#flickr a");
startFlickrCall('tag2', ".SetPinos1 ul", ".Sets a"));
startFlickrCall('tagn', ".SetPinos ul", ".Sets a"));