Y使用者介面架構學習筆記， RSS 讀取程式 – 1

由於 same origin policy 的限制，要弄一套網頁版的 RSS 讀取程式，取其他域的 RSS （XML），就要用以下辦法：

1. 通過 flash （但有 crossdomain.xml 限制）
2. 通過 silverlight （但有 clientaccesspolicy.xml 或 crossdomain.xml 限制）
3. 伺服器端代理
4. JSON / script on demand

我選擇用 JSON，打算以 Yahoo! Pipes 轉換 RSS 為 JSON。由於我在學習 YUI 3，JS 的架構是用 YUI 的。

第一步：建構 Yahoo! Pipes

登入 Yahoo! Pipes，建立一個「Fetch Feed」控制項，可直接連接 「Pipe Output」，由於這是測試，我在中間加了個「Truncate」控制項，限制了條目數為十。如果現在在「Fetch Feed」中填上網址，比如我網易的部落格 RSS “http://leptonation.blog.163.com/rss/”，Pipe Output 就會有結果出來，但我要的是會變動的 RSS 地址，要一個通用的 pipe，所以我在「Fetch Feed」之前，把 URL 欄接上一個叫做 URL 的使用者輸入控制項。只要取此 pipe 時候在 pipe 的 URL 加上 &url=XXX 即可（注意url 這變數是建立 URL 控制項時候你自己指定的）。上面提到我用 JSON，Yahoo! Pipes 是可以輸出 JSON 的，只要再 pipe 的 URL 加上 &_render=JSON 即可。

我建立的這個 pipe 的地址是 http://pipes.yahoo.com/pipes/pipe.run?_id=ef7e4474a18c07dd4e4b8a14c5d17269，在此 URL 後加上 &url=… 就會看到你輸的 URL 結果。

第二步：建立測試用的 HTML

建立一個 HTML，只是測試，所以內容只有兩樣東西，一個是按鈕，點擊後取 JSON 用的，另外一個是個空白的 div，用來存放結果。

代碼很簡單，如下：

<html>    <head>      <script type="text/javascript"         src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>    </head>    <body>      <input type="button" value="Load" id='btnLoad'/>      <div id='output'></div>    </body></html>

我用 YUI 3，所以連了去 YUI 的 JS。

第三步：YUI 3 的 Javascript 代碼

YUI 是按模組載入的，我用了 node 和 gallery-jsonp。其實，JSON with padding 自己寫也行，只是既然別人弄好了，就沒必要重做。

    YUI().use('gallery-jsonp','node',function(Y){        // Feed variable    var rawFeed = 'http://leptonation.blog.163.com/rss';        // Adjust JSONP template for Yahoo! pipes    Y.JSONPRequest._template='_callback={callback}';    // 2 Callback functions for JSONP        function insertFeed(result){            var tmp = '<ul>';            for (var i = 0; i < result.value.items.length; i++) {                tmp += '<li>';                tmp += '<a href="' + result.value.items[i].link + '">' + result.value.items[i].title + '</a>'                tmp += ' ' + localiseDate(result.value.items[i].pubDate);                tmp += '</li>';            }            tmp += '</ul>'            Y.one('#output').set('innerHTML',tmp);        }    function promptError(){      Y.one('#output').set('innerHTML','<p>Feeds cannot be loaded.</p>');    }            // Date format helper function        function localiseDate(d){            var dDate = new Date(d);            return dDate.toLocaleDateString();        }        // Finally, attach click handler. Actual JSON url is constructed now.    Y.one('#btnLoad').on('click',function(){      var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=ef7e4474a18c07dd4e4b8a14c5d17269&_render=json&url='        +rawFeed;      Y.jsonp(url,{        on: {          success: insertFeed,          failure: promptError,          timeout: promptError        },        timeout:3000      });      Y.one('#output').set('innerHTML','<p>Loading</p>');            });  });

有幾點注意：

1. 我定義了個變數 rawFeed，只要變更這值，當有 click 事件時候，就會取變更後的 url 去提交去 pipe 取 JSON
2. gallery-jsonp 的預設 callback 的模板是 callback={callback}，而 Yahoo! Pipes 的 callback 在 URL 格式是 _callback=?，所以要把Y.JSONPRequest 的 _template 修改。（JQuery 也是這樣，在 JQuery 改 callback 的話就這樣寫：{jsonp:’_callback’}）
3. gallery-jsonp 的callback，支援幾個不同返回狀態的 callback，我唯寫了兩個做測試
4. gallery-jsonp 支援 timeout，我設了 3000 milisecond
5. JSON 出來的 Date 不好看，我用了個名為"localiseDate" 的 function 修改為本地日期格式
6. YUI 3 有個 substitue 的模組，可以直接置換多個 string，簡單的 HTML 插入其實可以用的

整個測試我放了在 http://leptonation.com/test/YUInonflash.html ，JS 寫了在 HTML 內，歡迎查看賜教。

此文本人學習記錄，有錯誤或更好的方式，求各方大俠指正。