博客園win8客戶端開發記錄3 -博客新聞列表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