花瓣采集js解析
第一步：收藏夹段js
javascript:void(function(d,a,c,b){a[c]&&typeof a[c].showValidImages=='function'?a[c].showValidImages():(b=a.createElement('script'),b.id='huaban_script',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=showImagesAndInitPinBtn
_loaded 初始化标记。
线索：showValidImages方法。
document[global].showValidImages=showImagesAndInitPinBtn
方法1：showImagesAndInitPinBtn 字面意思明显。很好的命名。
var a=getCurrentPageImagesWithEncapsulation();
showImages(a),initPinBtn(a),window.scroll(0,0)
数据定义：a的数据结构：w=242 h=284 src=/UpLoadFile/20120117/201201170430012184.JPG img=[object HTMLImageElement] alt= img2=[object HTMLImageElement] _parentNode=null
[{container:c,w:b.width,h:b.height,src:b.src,img:b,description:e+(d&&d.innerText||""),img2:b}]
方法2：getCurrentPageImagesWithEncapsulation
参数初始
var _document=d||document;eImages=eImages||[],opts=opts||{};
遍历img
for(i=0;i<_document.images.length;i++){
var img=_document.images[i];
wl(img);//[object HTMLImageElement]
}
isValidImage(img)&&(img=encapsulateImage(img),opts&&(img._parentNode=opts.parentNode||null),eImages.push(img))
function isValidImage(a){return a.style.display=="none"||a.className=="ImageToPin"||a.width<100||a.height<100?!1:!0}
如果img上加上class ImageToPin,就可以跳过被花瓣抓的命运。:)
getVideoOnCustomerPage(_document,eImages);
一些视频的处理。
eImages.push(img)
遍历背景图background-image等。
checkbgimgs
filters
bgimgs
遍历iframes
var iframes=_document.getElementsByTagName("iframe");
for(var i=0;i<iframes.length;i++)
方法3：function showImages(a)
c.onclick=function(){return pinImage(a),b()};
方法4：function initPinBtn(a){generatePinBtn(),registerImagesForPinBtn(a)}
方法5：generatePinBtn 生成采集按钮。
方法6：registerImagesForPinBtn(a) 注册鼠标事件。
方法7：取消按钮：
var b=function(){
return c.parentNode.removeChild(c),
d.parentNode.removeChild(d),
showingImage=!1,
selectedText="",
showFlash(),
window.scroll(0,lastScrollY),
!1
},
方法8：采集按钮：pinImage
http://www.w3school.com.cn/htmldom/met_win_open.asp
var e={
media:a.big_img?a.big_img.src:d.src,
url:c,
w:a.big_img?a.big_img.width:d.width,
h:a.big_img?a.big_img.height:d.height,
alt:d.alt,
title:a.title||document.title,
description:a.description||"",
media_type:a.media_type||"",
video:a.video||""
};
全局参数：
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,有括号对应功能。
存疑：代码里用了大量的','号。不知道和';'号比，有什么优势。
