【IT168 专稿】在上一篇文章中，已经讨论了程序的结构和页面的布局，并简单介绍了一些jQuery Mobile的使用技巧。在本篇文章中，笔者将继续完成我们web应用的新闻浏览器的设计。

　　程序的启动

　　我们现在来研究一下程序的启动。当程序启动的时候，展示给用户的是新闻分类列表的页面，为了让每次这个新闻分类页面不为空，我们需要记下用户之前选择了哪些感兴趣的分类。为了实现这个目的，我们通过使用jQuery的一个插件DST.js plugin去把用户每次选择的新闻分类都保存在HTML5的localStorage中。如果用户移除了某个分类，则也会在浏览器中的本地存储区域中移走(注意，要在支持HTML5标准的浏览器中才能实现这个功能)。当页面装载的时候，我们可以在jQuery的$(document).ready()函数中获得已保存的新闻分类并且逐一处理每个新闻分类下的最新新闻，代码如下：

var COMMA = ',';
var COOKIE_NAME = 'news';
// numNewsToRestore保存用户选择的新闻分类个数
var numNewsToRestore= 0;
var storedNewsArr;
...
$(document).ready(function () ...{
  showProgress();
  var storedNewsTxt = $.DSt.get(COOKIE_NAME);
  if(storedNewsTxt != null && storedNewsTxt.length > 0)...{
     storedNewsArr = storedNewsTxt.split(COMMA);
  }else...{
     storedNewsArr = new Array();
  }
  numNewsToRestore = storedNewsArr.length;
  restore();
});

 　　在上面的代码中，当用户选择了新闻分类后，会将选择的新闻以逗号的方式连接，存储在变量storedNewsArr中，比如用户选择了“Top Stories”和“Politics”，则在localStorage存储区域中，会包含字符串“topstories,politics”，接着我们调用如下所示的restore()函数：

function restore()...{
  if(numNewsToRestore > 0)...{
     getNews(storedNewsArr[--numNewsToRestore],restoreNews);
  }else...{
     showCategories();
  }
}

 　　在restore()方法中，如果不存在新闻分类目录，则我们只需要显示一个空的新闻页。如果存在新闻分类，则调用getNews()方法，并将最新的一个分类作为参数传进去。getNews()方法的另外一个参数是restoreNews,接下来看下getNews()和restoreNews()方法：

var NEWS_URI = 'bridge.php?fwd=http://rss.news.yahoo.com/rss/';
...
function getNews(varCat,handler)...{
   var varURI = NEWS_URI + varCat;
   $.ajax(...{type: GET, dataType: XML, url: varURI, success: handler});
   return false;
}
...
function restoreNews(xml)...{
   populateSingleNews(xml);
   restore();
}

 　　getNews()方法中提供了向ajax发起请求的地址varURI，这个uri形如如下的形式：bridge.php?fwd=http://rss.news.yahoo.com/rss/+ varCat，其中varCat就是用户选择的新闻目录，比如bridge.php?fwd=http://rss.news.yahoo.com/rss/topstories。而ajax返回的回调函数为restoreNews()。在restoreNews()中，又调用了一个自定义的方法populateSingleNews()，这个方法稍后会解析。而最后又重新调用了restore方法，形成了一个递归调用，顺序为：

restore -> getNews -> restoreNews -> restore -> ...  

 　　其中参数numNewsToRestore指的是用户选择了多少个新闻分类。在jQuery的ready方法中，首先使用插件DST.js plugin把cookie读取出来后，形成了字符串数组storedNewsArr，接着调用restore方法，将storedNewsArr中的最后一个元素(也就是最新用户选择的分类)传入getNews方法中进而获得该分类下的新闻，并通过restoreNews()方法去处理ajax回调返回的内容，最后又再调用restore() 方法处理storedNewsArr数组中的倒数第2个新闻分类，如此类推。