花瓣采集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.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,有括號對應功能。

存疑：代碼里用了大量的','號。不知道和';'號比，有什么優勢。