Google Reader Clip Client Code Review http://sishen.lifegoo.com/?p=38

我承认自己是Google的拥趸, :) 干净简洁的风格, 比较符合我的思想. Google Reader就是其一. 其上的附属服务, 也打上了深深的google烙印. Clip就是其一.

 

Why Google Reader Clip? Google Reader lets you tag blogs and blog posts and share those items with your friends. 简而而已, 可以把你的Feed items集成到你的个人网站里. 贴心的小服务, 又是很好的宣传手段, cool~

 

Howto? Customize Google Reader’s Clip. 还有很多教程, google吧… 最后得到的html snippet就是: 本文的目的在于分析这段代码是如何工作的. 首先, 关注两个URL.

• http://www.google.com/reader/ui/publisher.js
• http://www.google.com/reader/public/javascript/user/01965866220529097173/label/developerworks?n=5&callback=GRC_p({c:/"green/",t:/"///"developerworks///" via sishen/",s:/"false/"});new GRC

publisher.js是被混淆过的JS, 其职责在于提供提供默认clip显示函数库. 看得我累死了…

 

下一个URL则是整个clip的生成脚本. 如果你细心的话, 就会发现query string里面有个callback参数. 很精妙的设计, :) 通过callback参数值, 我们可以自主控制clip的显示方式(customize, 见前面的link). 当然, 现在默认使用的是 GRC_p({c:/"green/",t:/"///"developerworks///" via sishen/", s:/"false/"}); new GRC. 而这个就是publisher.js里的object.

 

那么, 下面的主题就是publisher.js了. 一段很短小精悍的程序(其中50%是浏览器判断+异常处理). 整个核心在于GRC object. 在介绍GRC object前, 有一点需要说明的是在clip里的item是通过http://www.google.com/reader/public/javascript/user/:id/label/lablename获得的. 至于怎么获得的, 不是我所关心的. 最后的形式就是 GRC_p({c:"gray",t:"/"developerworks/" via sishen",s:"false"});new GRC({–item description–}). GRC_p里面的是参数配置, c为背景色, t为标题, s为显示item来源. 对应的代码为:
function ca(a)
{
   u=a
}
function readerpublisher(a,b)
{
    this.id="readerpublishermodule"+this.version();
    this.g = a;
    this.o = u["c"];
    this.p = u["t"];
    this.J = u["s"]=="true";
   if(b) {
       b.innerHTML="";
       b.id=this.id;
       this.createTN(getElemById(this.id))
  } else {
       document.write(”);
       var c=this;window.setTimeout(function() {c.createTN(getElemById(c.l)) }, 0)
  }
}

GRC({})则根据items来生成相应的html代码. item格式为:

"id": "user/01965866220529097173/label/developerworks","title": "u0022developerworksu0022 via sishen in Google Reader",

"continuation": "CMfBw7COhIwC","author": "sishen",

"updated": 1178866000,

"items": [{

  "id": "tag:google.com,2005:reader/item/bc6a9f32df0c289b",

  "categories": [  ],  "title": "xxxxxxxxxxxxxxxxx",

  "published": 1178866000,

  "updated": 1178866000,

  "alternate": {

    "href": "http://www.ibm.com/developerworks/cn/linux/linux_app.html?cau003Ddrs-tp2007",    "type": "text/html"

  },

  "summarySnippet": "xxxxxxx",

  "origin": {

    "streamId": "feed/http://www.ibm.com/developerworks/cn/rss/dwcn_dwtp.rss",

    "title": "IBM developerWorks u00E4u00B8u00ADu00E5u203Au00BD",

    "htmlUrl": "http://www.ibm.com/developerworks/cn/index.html?cau003Ddrs-tp2007"

  }]

 

ok. 切入主题. 整个clip的生成过程就是createElement和createTextNode的过程.

function createElement(a,b)
{
    var c=document.createElement(a);
    if(b) {
         for(var d in b)
         {
               var f=b[d];
               if($.q()&&d=="class")
              {
                      d="className"
              }
              c.setAttribute(d,f)
        }
   }
   return c
}
function createTextNode(a)
{
    return document.createTextNode(a)
}

看一下例子:

var h3_elem =createElem("h3");
this.merge_style(c.H, h3_elem);
d.appendChild(createTN(this.p));
a.appendChild(h3_elem);

其显示效果就是:

<h3 style="i hidden the style… it’s too long">"developerworks" via sishen</h3>

接下去是一个大循环, 遍历所有item.

var f=createElem("ul");for(var F=0,m;m=this.document.items[F];F++){}

具体的为:

var w=createElem("li");
var G=createElem("a", {href:link(m[alternate].href),
                                          title:m[title],
                                          "class":"i"});
var h=strip_tag(m[title]);
if(!(strip(h)==""))
{
     h=fa(h,48)
}
G.appendChild(createTN(h));
w.appendChild(G);
f.appendChild(w)

 

最后的生成效果为:

<a style="i hidden the style… it’s too long" class="i" 

title="Make a List and Check It Twice: A Real-World Guide for Speakers and Presenters" 

href="http://feeds.feedburner.com/%7Er/guykawasaki/Gypm/%7E3/115725056/make_a_list_and.html">

Make a List and Check It Twice: A Real-World Guide...

 

基本整个publisher.js的核心就在于上面了. 当然, 还有很多辅助函数, 有兴趣的就自己看吧, :)