花瓣采集js解析-greatqn-博客园

花瓣采集js解析-greatqn-博客园
2012年01月17日
　　第一步：收藏夹段js javascript:void(function(d,a,c,b){a[c]&&typeof a[c].showValidImages=='function'?a[c].showValidIma ges():(b=a.createElement('script'),b.id='huaban_scr ipt',b.setAttribute('charset','utf-8'),b.src='http: //huaban.com/js/pinmarklet.js?'+Math.floor(+new Date/1E7),a.body.appendChild(b))}(window,document, '__huaban'));
　　如果js已经加载，就运行showValidImages()的方法。
　　没有，则加载js:http://huaban.com/js/pinmarklet.js
　　对a标签下的img能识别出来。
　　第二步：提取pinmarklet.js
　　把线上的js保存到本地huaban.js。
　　43K,一千多行的代码，经过初步的压缩。
　　从第一步的效果看，功能是遍历页面，组装成采集页面，再提交采集。
　　线索：变量"__huaban" var global="__huaban";
　　document[global]._loaded=!0,
　　document[global].showValidImages=showImagesAndInit PinBtn
　　_loaded 初始化标记。
　　线索：showValidImages方法。
　　document[global].showValidImages=showImagesAndInit PinBtn
　　方法1：showImagesAndInitPinBtn 字面意思明显。很好的命名。
　　var a=getCurrentPageImagesWithEncapsulation();
　　showImages(a),initPinBtn(a),window.scroll(0,0)
　　a的数据结构： 方法2：getCurrentPageImagesWithEncapsulation
　　参数初始
　　var _document=d||document;eImages=eImages||[],opts=opt s||{};
　　遍历img 如果img上加上class ImageToPin,就可以跳过被花瓣抓的命运。:)
　　getVideoOnCustomerPage(_document,eImages);
　　一些视频的处理。
　　eImages.push(img)
　　遍历背景图background-image等。
　　checkbgimgs
　　filters
　　bgimgs
　　遍历iframes 方法3：function showImages(a)
　　c.onclick=function(){return pinImage(a),b()};
　　方法4：function initPinBtn(a){generatePinBtn(),registerImagesForPi nBtn(a)}
　　方法5：generatePinBtn 生成采集按钮。
　　方法6：registerImagesForPinBtn(a) 注册鼠标事件。
　　方法7：取消按钮： 方法8：采集按钮：pinImage
　　http://www.w3school.com.cn/htmldom/met_win_open.as p 全局参数： var siteDomain="huaban.com",主域
　　imageRoot="http://"+siteDomain+"/img",图片路径
　　bookmarkletUrl="http://"+siteDomain+"/bookmarklet/ ",书签路径
　　domChanged=!1,
　　selectedText="",
　　lastScrollY=0,
　　isShareBtn=!1,
　　pinBtn=null,
　　hidePinBtnTimer=null,
　　currentImage=null,
　　imageDesc="",
　　showingImage=!1,
　　itemUrl="",
　　skip=!1,
　　skiphrefs=["http://www.diandian.com/wall"];
　　技巧1：
　　(function(){alert("test");})();
　　定义个方法，直接运行。好处是把一些临时变量圈起来了，不容易和其它代码发生冲突。
　　技巧2：alert("\u4f60\u73b0");
　　js文件里，避免出现中文。
　　技巧3：!0 代替 true 
　　技巧4：|| && 语法。
　　基础方法：
　　function isIE(){return/msie/i.test(navigator.userAgent)&&!/ opera/i.test(navigator.userAgent)}
　　function isSafari(){return/Safari/.test(navigator.userAgent )&&!/Chrome/.test(navigator.userAgent)}
　　function isPinable(a) 判断是否局域网地址。
　　function generateTag(a,b){var c=document.createElement(b||"div");return c.id=global+"_"+a,c}生成一个节点。
　　正则表达式：
　　http://hzjavaeyer.group.iteye.com/group/wiki/2276- JavaScript-Core
　　看js代码，用的是MyEclipse,有括号对应功能。
　　存疑：代码里用了大量的','号。不知道和';'号比，有什么优势。