花瓣采集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=http://s4.42qu.us/img/jpg/book/3.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];
  //alert(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.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,有括号对应功能。

存疑：代码里用了大量的','号。不知道和';'号比，有什么优势。