花瓣采集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.οnclick=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,有括号对应功能。
存疑:代码里用了大量的','号。不知道和';'号比,有什么优势。
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.οnclick=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,有括号对应功能。
存疑:代码里用了大量的','号。不知道和';'号比,有什么优势。