Отображение RSS-лент из API-интерфейс Google кормить как список HTML


Что она делает это:

  1. Читает RSS-канал с помощью Google API-интерфейс кормить
  2. Показывает список в неупорядоченный список

Насколько хорошо/плохо это фрагмент кода?

$(document).ready(function(){
var FeedManager = {
        config : {
            feedContainer : $('#feedContainer'),
            feedUrl : 'http://rss.bdnews24.com/rss/english/home/rss.xml',
            feedLimit : 10
        },  
        init: function(){
            var feed = new google.feeds.Feed(FeedManager.config.feedUrl);
            feed.setNumEntries(FeedManager.config.feedLimit) ;
            feed.load(function(result) {
                if (!result.error) {
                    FeedManager.$feedContainer = FeedManager.config.feedContainer;
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];
                        $('<li/>').append(
                            $('<a>'+entry.title+'</a>').attr(
                                {
                                    'title': entry.title,
                                    'href': entry.link
                                }
                            ).bind('click',FeedManager.showStory)
                        ).appendTo(FeedManager.$feedContainer);
                    }
                }
                else{
                        FeedManager.handleError(result.error.message);
                }
            });
        },
        showStory: function(){
              var href = event.currentTarget.href;
              FeedManager.showURL(href);
              event.preventDefault();
        },
        showURL: function(url){
             if (url.indexOf("http:") != 0 && url.indexOf("https:") != 0) {
                return;
            }
            chrome.tabs.create({
                url: url
            });
        },
        handleError: function(errorText){
            $('<li/>')
                .css("color","red")
                .append("Error:"+errorText)
                .appendTo(FeedManager.config.feedContainer);
        }
    };

    FeedManager.init();
});

На 2-м этапе, я хотел, чтобы добавить пользовательские функции аккордеона и новости фрагмент:

processFeedResult: function(result) {
    if (result.error) {
        FeedManager.handleError(result.error.message);
        return;
    }
    FeedManager.$feedContainer = FeedManager.config.feedContainer;
    $.each(result.feed.entries, function() {
        $('<li/>').append(
            $('<a>', {  // this should not be an anchor tag,right? TBD 
                title: 'Published at: '+this.publishedDate,
                text: this.title
            })
        ).append($('<div>', {
            text: this.contentSnippet,
            css : {'display':'none',
                'padding-top':'2px'}
            }).append(
                $('<a>', {
                    text: '[more..]',
                    href: this.link,
                    click: FeedManager.showStory
                })) 
        )
        .bind('click',FeedManager.showSnippet)
        .appendTo(FeedManager.$feedContainer);
    });
},
showSnippet: function() {
    var $obj = $(event.currentTarget),
    $snippetDiv = $obj.find('div').slideDown('normal');

    if(FeedManager.$lastOpenedDiv === undefined){
        FeedManager.$lastOpenedDiv = $snippetDiv ;
    }
    else{
        FeedManager.$lastOpenedDiv.slideUp('normal');
        FeedManager.$lastOpenedDiv = $snippetDiv ;
    }
    }   
};

Я чувствую, что я поместил некоторые тесно связаны код в мой processFeedResult , такие как текст и CSS. Я также хотел бы знать, если мой showSnippet функции достаточно хорошо или нет. Однако, это работает, и я знаю, что есть 3-й партии хороший аккордеон в наличии, но я хотела узнать его.

До сих пор я держал тега привязки, чтобы показать заголовок новости и я использовал название якоря в виде всплывающей подсказки, который показывает время. Может, есть хороший альтернативный, как span или абзац?



790
15
задан 3 марта 2011 в 02:03 Источник Поделиться
Комментарии
3 ответа

Выглядит хорошо, чтобы быть честным. Несколько незначительных изменений, я хотел бы сделать:

Я бы вытащить этот код в функцию

function ProcessFeedResult(result) {
if (!result.error) {
FeedManager.$feedContainer = FeedManager.config.feedContainer;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
$('<li/>').append(
$('<a>'+entry.title+'</a>').attr(
{
'title': entry.title,
'href': entry.link
}
).bind('click',FeedManager.showStory)
).appendTo(FeedManager.$feedContainer);
}
}
else{
FeedManager.handleError(result.error.message);
}
}

Потом я хотел изменить состояние и вернуться, чтобы уменьшить уровень отступа немного

function ProcessFeedResult(result) {
if (result.error) {
FeedManager.handleError(result.error.message);
return;
}

FeedManager.$feedContainer = FeedManager.config.feedContainer;
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
$('<li/>').append(
$('<a>'+entry.title+'</a>').attr(
{
'title': entry.title,
'href': entry.link
}
).bind('click',FeedManager.showStory)
).appendTo(FeedManager.$feedContainer);
}
}

Далее, я бы заменил петли с помощью jQuery это $.каждый()

function ProcessFeedResult(result) {
if (result.error) {
FeedManager.handleError(result.error.message);
return;
}

FeedManager.$feedContainer = FeedManager.config.feedContainer;
$.each(result.feed.entries, function() {
$('<li/>').append(
$('<a>' + this.title + '</a>').attr(
{
'title': this.title,
'href': this.link
}
).bind('click',FeedManager.showStory)
).appendTo(FeedManager.$feedContainer);
});
}

Вы можете сделать любой из этих, я не думаю, что это сильно важно. Я могу прочитать ваши намерения достаточно легко, просто немного аккуратнее со мной после рефакторинга.

Думая о своем дальнейшем комментировать немного, я был бы соблазн добавить название, а не нанизывать их вместе.

function ProcessFeedResult(result) {
if (result.error) {
FeedManager.handleError(result.error.message);
return;
}

FeedManager.$feedContainer = FeedManager.config.feedContainer;
$.each(result.feed.entries, function() {
$('<li/>').append(
$('<a/>').append(this.title).attr(
{
'title': this.title,
'href': this.link
}
).bind('click',FeedManager.showStory)
).appendTo(FeedManager.$feedContainer);
});
}

В противном случае это правильный подход к генерации элементов, насколько я знаю.

В качестве последнего шага, я хотел убрать скобки вокруг атрибутами, для консистенции

function ProcessFeedResult(result) {
if (result.error) {
FeedManager.handleError(result.error.message);
return;
}

FeedManager.$feedContainer = FeedManager.config.feedContainer;
$.each(result.feed.entries, function() {
$('<li/>').append(
$('<a/>').append(this.title).attr({
'title': this.title,
'href': this.link
}).bind('click',FeedManager.showStory)
).appendTo(FeedManager.$feedContainer);
});
}

Я не думаю, что вы собираетесь сделать его чище, чем.

13
ответ дан 3 марта 2011 в 03:03 Источник Поделиться

Вы можете использовать jQuery 1.4 это новый элемент синтаксис создания , чтобы сократить немного (рерайт НДР ответа):

$('<li>').append(
$('<a>', {
title: this.title,
text: this.title,
href: this.link,
click: FeedManager.showStory
})
).appendTo(FeedManager.$feedContainer);

И то же самое может быть сделано с элементов, созданный в handleerror с функцией

5
ответ дан 5 марта 2011 в 02:03 Источник Поделиться

Нет комментариев.

Это:


Что она делает это:

Читает RSS-канал с помощью Google
API канала показывает список в
неупорядоченный список.

Должен быть комментарий, где-то в верхней части кода

1
ответ дан 5 марта 2011 в 10:03 Источник Поделиться