使用jQuery Mobile實現手機新聞瀏覽器(第二章)(1)

在上一篇文章中，已經討論了程式的結構和頁面的布局，並簡單介紹了一些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個新聞分類，如此類推。