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 tag只是这个网址的一个区别：

有人可以帮我不要重复这些东西吗？

抱歉这么长的垃圾:(

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请求的数量有限制。看看这里：

How many concurrent AJAX (XmlHttpRequest) requests are allowed in popular browsers?

如果您的应用程序超出了某些主观的“推荐”并发请求数，您可能需要考虑操纵您的应用程序，以便下一个请求在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"));

jquery小重构，json调用

2 个答案: