posts - 496,comments - 227,trackbacks - 0
http://blog.csdn.net/chinull/archive/2010/03/17/5390830.aspx

百度文库浏览器分析及实现

一、        引子

2003年开始玩Flash,完了两年就戒掉了;长 时间不用不完慢慢就生疏了。最近应客户的需要,希望能在文档系统中实现类似百度文库的效果。考查一番,咋看起来百度用的是FlashPaper技术,也看了看FlexPaper,在GoogleCode上还看到了一个超大文件 的示例,可惜链接打不开,无法去详细分析他们了。

在能看到的应用中,FlashPaperFlexPaper都不能达到在互联网上动态加载大文档的用户体验需求;唯独百度文库有这样的用户 体验,因此就只能拿百度文库开刀了,希望李彦宏同志不要见怪。

姑且拿《六十八个经典小故事》作为示例,该文档页数足够多,能够展示动态加载的效果。

二、        百度文库浏览器原理分析步骤

1.      找到《六十八个经典小 故事》对应的链接;

2.      清空IE缓存,在IE中浏览该页面;

3.      使用导航将文档浏览至 最后;

4.      抓取IE缓存中的内容;

5.      材料已取好,分析开 始。

三、        百度文库浏览器代码分析

一进来,刘姥姥进了大观园了,这个JavaScript脚本看得人脑袋那个大啊,这条路走起来挺艰难,换个思路吧;找个Flash反编译工具,反编译一 下,取出来ActionScript,这个好歹还有个分行 短句啊,总算还是个代码。

整理整理代码的层次结构,按照包组织一下,大致能确认应该在baidu这个文件夹吧;再看看,lib大致是用于json处理的;ui是用于用户自定义控件;iknow就应该是程序入口吧,按 照一般程序要的思路先找一找main吧,果然还真有一个main类,有意思。

actionscript包结构

下面这几句代码大概就是与外部进行参数交换的吧:

 

var _loc_2:* = _loc_1["docurl"] || "http://jx-iknow-test15.jx.baidu.com:8960/play";

var _loc_3:* = _loc_1["docid"] || "c881e53a580216fc700afd05";

var _loc_4:* = int(_loc_1["fpn"]) || 2;

var _loc_5:* = int(_loc_1["npn"]) || 5;

this._reader.fpn = _loc_4;

this._reader.npn = _loc_5;

this._reader.docURL = _loc_2.replace(/(\/)+$/, "") + "/" + _loc_3 + "?";

如此以来就可以查找docurldocidfpnnpn这几个参数了,在JavaScript或者json中应该有体现的。

在看一看Reader类,再看看DocViewer类大致就知道了百度的FlashPaperReader的原理了。

if (this._firstPagesNum == -1)

{

tmpURL = this._docURL + "pn=" + (this._pagesLoaded + 1) + "&rn=" + this._normalPageNum;

}

else

{

tmpURL = this._docURL + "pn=1&rn=" + this._firstPagesNum;

this._firstPagesNum = -1;

}

var binaryRequest:* = new URLRequest(tmpURL);

binaryLoader.load(binaryRequest);

这就是Reader获取FlashPaper资源文件了;

binaryLoader.addEventListener(ProgressEvent.PROGRESS, this.binaryLoading);

binaryLoader.addEventListener(Event.COMPLETE, this.binaryLoadComplete);

binaryLoader.addEventListener(IOErrorEvent.IO_ERROR, this.binaryLoadError);

这个就是定义的装载进 度、装载完成、装载失败的几个事件响应了;

this._delayPreLoadID = setInterval(this.preLoad, 1000, _loc_3);

这个是用于预装载的动 作,实现边查看边下载其他片段的。

四、        百度文库浏览器参数分析

根据以上代码片段就可以知道百度FlashPaper Reader的工作原理了,在初始化时根据JavaScript的参数装载FlashPaper片段,使用docurl指定路径(可以是相对路 径,可以是绝对路径),使用docid指定文档的GUIDfpn指定文档起始序号,rn指定文档片段的页数;根 据百度文档内部的定义应该是将文档以5页或者10页进行组织,所以fpn=5*X+1rn=5||10

五、        百度文库浏览器外部调用分析

回过头在看客户端调用的JavaScript代码就有针对性了,不用头大了;先看一看html页的代码吧,打开“9daa5522aaea998fcc220e73.html”页面,看一看里面的 代码,看看有不有对应的参数,您别说还真就有,不管咋说吧,代码有点阅读困难,好在只定位于使用这段代码,咱改改参数用用,其他的就不深入研究了。

function Reader(){

function B(){

if(baidu.swf.getVersion()){

return true

}else{

_id.innerHTML='<p class="ml">文档预览需要最新版本的Flash Player支持。</p><p class="ml">您尚未安装或版本过 低,建议您:</p><a href="http://www.baidu.com/s?ie=gb2312&bs=flash+%CF%C2%D4%D8&sr=&z=&cl=3&f=8&wd=Flash+Player+%CF%C2%D4%D8&ct=0" target="_blank"><img src="http://box.zhangmen.baidu.com/images/setupflash.gif" height="39" width="273" /></a>';

return false

}

}

this.create=function(D,C){

baidu.swf.create({

id:"reader",

width:"717",

height:"700",

ver:"9.0.0",

errorMessage:"Please download the newest flash player.",

url:"/static/flash/reader.swf",

bgColor:"#FFFFFF",

wmode:"window",

allowfullscreen:"true",

vars:{

docurl:"/play",

docid:"9daa5522aaea998fcc220e73 ",//貌似这就是id

fpn:"5",

npn:"5"

}

},D);A(D)};

function A(C){

baidu.on(C,"mousewheel",function(D){

var F=D.wheelDelta;

var E=-3;

if(F<0){

E=3

}

baidu.swf.getMovie("reader").NS_IK_doMouseWheel(E);

baidu.preventDefault(D)

});

if(window.addEventListener){

baidu.G(C).addEventListener("DOMMouseScroll",function(D){

var F=D.detail;

var E=-3;

if(F>0){

E=3

}

baidu.swf.getMovie("reader").NS_IK_doMouseWheel(E);

baidu.preventDefault(D)},false)

}}}

var DOC_INFO={

doc_id:"9daa5522aaea998fcc220e73",

cid:"134",

price:"0",

value_average:"7"

};

var _reader=new Reader();

_reader.create("readerContainer","9daa5522aaea998fcc220e73");

baidu.each(

["selfChangeCategory","adminChangeCategory","selfChangePrice"],function(B,A){

baidu.on(B,"click",function(C){

login.check(baidu.proxy(view.changeDocInfo,B));

baidu.preventDefault(C)})});

baidu.on("addToStore","click",function(A){

window.open("http://cang.baidu.com/do/add?it="+encodeURIComponent(document.title)+"&iu="+encodeURIComponent(location.href)+"&tn=文库&fr=wk#nw=1","_s","scrollbars=no,width=600,height=450,right=75,top=20,status=no,resizable=yes");

pop.show("提示",{

url:"/static/html/empty.html",

width:420,

height:250

});

document.AddToStore.submit();

baidu.preventDefault(A)

});

baidu.each(["downloadTop","downloadButton"],function(A){

baidu.on(A,"click",function(B){

log.send("down","download",{fr:"down"});

login.check(view.download);

baidu.preventDefault(B)

})});

var rate=new Rate("rateContainer");

rate.create("7");

if(G("kw")){G("kw").value=""};

六、        百度文库现场取材实现

既然分析清楚了,下一步将百度文库的文件结构整清楚,然后放入对应的内容,稍微对静态代码进行一些调整;部署到根目 录即可使用;

这里面有百度对FlashPaper文档swf的改造,暂且不说了,其实就是追加了一个json的文件头数据块,对咱们 当前要就地取材实现而言没有任何障碍。

文档结构整理如下:

网站层次结构

 

将文件都归到对应的文件夹下,既然百度对FlashPaper/FlexPaper对应的swf做了改造,那好就将swf文件改名为swfx吧。值得注意的是需要在IIS部署时增加MIME类型swfxapplication/swfx;只是遗憾的是由于swfx当前还不能接受参数,所以不能进行动态加载缓存页面,不过没有关系,等下次使用URL ReWrite整个处理一下,一个真实的百度FlashReader就完成了。

我们的口号是,不求读懂百度文库里面的每一句代码,但求利用已有材料。

七、        百度文库DotNet模拟

敬请期待吧

八、        制作自己的百度FlashPaper—swfx

未完 待续

从这里下载静态版本(未实现动态预装载)http://download.csdn.net/source/2137831



posted on 2010-07-05 22:35 SIMONE 阅读(4605) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: