博客园win8客户端开发记录3 -博客新闻列表html数据获取和解析

原帖地址：http://www.cnblogs.com/leonwang/archive/2013/05/31/metro-cnblogs-parsehtmllist.html

 昨天晚上完成了数据源获取方式的迁移工作， 所有列表和详情数据都从开放的博客园wcf服务获得 ， 删除了旧的javascript解析html提取数据的代码， 删除之前保存了一个副本， 毕竟也是测试过的，浪费过时间的东西，现记录下来，以下方法在当前博客园界面改版前是可以工作的，当然如果界面改版了， 大家都懂得 ，javascript代码如下： 

// 解析博客列表，新闻列表 ，提取出json 格式数据
function parseHtml( html )
        {
var page = document.createElement( 'div' );
//metro app 方法：  WinJS.Utilities.setInnerHTML( page, toStaticHTML( html ) );
            page.innerHTML = html;

var titleLinks = page.getElementsByClassName( 'titlelnk' ),
                   summaries = page.getElementsByClassName( 'post_item_summary' ),
                   post = page.getElementsByClassName( 'post_item_foot' ),
                   comments = page.getElementsByClassName( 'article_comment' ),
                   reads = page.getElementsByClassName( 'article_view' ),
                   items = [],
                   item,
                   img = [],
                   postLinks = [],
                   regx = /\d+/,
                   count = titleLinks.length,
                   dateRegx = /\d{4}-\d{1,2}-\d{1,2}\s+\d{1,2}:\d{1,2}/,
// used for key generating
                   nowticks = new Date().getTime();

if ( summaries.length === count
&& comments.length === count
&& post.length === count
&& comments.length === count
&& reads.length === count )
            {
for ( var i = 0; i < count; i++ )
                {

                    item = {};
                    item.key = nowticks++;
// title & url
                    item.title = titleLinks[i].innerText || '';
                    item.url = titleLinks[i].getAttribute( 'href' ) || '#';
// summary & img
                    item.summary = summaries[i].innerText;
                    img = summaries[i].getElementsByTagName( 'img' );

if ( img.length > 0 )
                    {
                        item.picture = img[0].getAttribute( 'src' );
                    } else
                    {
                        item.picture = 'images/cnblogs.png';
                    }

// postBy & postDate & comment & read
                    postLinks = post[i].getElementsByTagName( 'a' );
if ( postLinks.length === 3 )
                    {
                        item.postBy = postLinks[0].innerText;
var postDate = dateRegx.exec( postLinks[0].nextSibling.textContent );
if ( postDate && postDate[0] )
                        {
                            item.postDate = postDate[0];
var p = Date.parse( item.postDate.replace( /-/g, '/' ) );
var c = new Date().getTime(),
                            passedSec = ( c - p ) / 1000, // sec
                            passedMin = passedSec / 60, // min
                            passedHour = passedMin / 60, // hour
                            passedDay = passedHour / 24; // day

if ( passedSec < 60 )
                            {
                                item.postDate = passedSec.toFixed( 0 ) + '秒前';
                            }
else if ( passedMin < 60 )
                            {
                                item.postDate = passedMin.toFixed( 0 ) + '分钟前';
                            }
else if ( passedHour < 24 )
                            {
                                item.postDate = passedHour.toFixed( 0 ) + '小时前';
                            }
else if ( passedDay < 4 )
                            {
// passed less than 4 day
                                item.postDate = passedDay.toFixed( 0 ) + '天前';
                            }
else
                            {

                            }
                        }
else
                        {
                            item.postDate = '';
                        }

// comment
                        item.comment = regx.exec( postLinks[1].innerText );

if ( item.comment && item.comment.length > 0 )
                        {
                            item.comment = item.comment[0];
                        }

// read
                        item.read = regx.exec( postLinks[2].innerText );

if ( item.read && item.read.length > 0 )
                        {
                            item.read = item.read[0];
                        }
                    }

                    items.push( item );
                }
            }
else
            {
// error 
            }

return items;
        };

 下面测试博客列表 ， 这里我们提取博客园首页栏目第一页html，从fiddler 或chrome工具栏可以很方便得到相关url  

可以看到url和相关参数， 我试了下get请求， 博客园也正常返回 : http://www.cnblogs.com/mvc/AggSite/PostList.aspx?CategoryType=SiteHome&ParentCategoryId=0&CategoryId=808&ItemListActionName=PostList&PageIndex=1 ,

得到列表html后， 测试解析函数 

 window.onload = function ()
        {
var blogsHtml = document.getElementById( 'homepage' ).innerHTML;
var blogs = parseHtml( blogsHtml );
            console.log( blogs );
        };

结果如下： 

同理 ， 得到新闻页列表 第一页 http://www.cnblogs.com/news/1/ 

  window.onload = function ()
        {var newsHtml = document.getElementById( 'post_list' ).innerHTML;
var news = parseHtml( newsHtml );
            console.log( news );
        };

 运行结果： 

  大家可能觉得js处理效率有问题， 比较慢， 其实不然，至少从感官而言， 迁移前后并未感觉加载列表速度有什么不同 ，看来IE10的js引擎也不是盖的 ,以上测试源码如下 ： 

  解析博客园文章列表.zip

 

本文链接