博客园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引擎也不是盖的 ,以上测试源码如下 :