第一步:收藏夹段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
filtersbgimgs
遍历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,有括号对应功能。存疑:代码里用了大量的','号。不知道和';'号比,有什么优势。

原文url:http://www.cnblogs.com/greatqn/archive/2012/01/17/2324765.html