您的位置：首页 > 产品设计 > UI/UE

YUI 框架学习笔记， RSS 阅读器 - 1

2010-08-17 22:01 302 查看

由于 same origin policy 的限制，要弄一套网页版的 RSS 阅读器，取其他域的 RSS （XML），就要用以下办法：

通过 flash （但有 crossdomain.xml 限制）
通过 silverlight （但有 clientaccesspolicy.xml 或 crossdomain.xml 限制）
服务器端代理
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>');
});
});

有几点注意：

我定义了个变量 rawFeed，只要变更这值，当有 click 事件时候，就会取变更后的 url 去提交去 pipe 取 JSON

gallery-jsonp 的默认 callback 的模板是 callback={callback}，而 Yahoo! Pipes 的 callback 在 URL 格式是 _callback=?，所以要把Y.JSONPRequest 的 _template 修改。（JQuery 也是这样，在 JQuery 改 callback 的话就这样写：{jsonp:’_callback’}）

gallery-jsonp 的callback，支持几个不同返回状态的 callback，我只写了两个做测试

gallery-jsonp 支持 timeout，我设了 3000 milisecond

JSON 出来的 Date 不好看，我用了个名为"localiseDate" 的 function 修改为本地日期格式

YUI 3 有个 substitue 的模块，可以直接置换多个 string，简单的 HTML 插入其实可以用的

整个测试我放了在 http://leptonation.com/test/YUInonflash.html ，JS 写了在 HTML 内，欢迎查看赐教。

此文本人学习记录，有错误或更好的方式，求各方大侠指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航