因為工作的需求之前也封裝過一個JS分享插件，集成了我們公司常用的幾個分享平台。
但是總感覺之前的結構上很不理想，樣式，行為揉成一起，心里想的做的完美，實際上總是很多的偏差，所以這次我對其進行了改版。
這次的核心就是：JS只負責事件+結構，也就是把功能實現出來，具體的外觀樣式，則使用者自己進行定義。
以下是新版分享插件的代碼：
1 (function(root){ 2 'use strict'; 3 function share(params){ 4 5 this.params = params; 6 this.dom = params.dom; 7 this.type = params.type || ['weibo','qqweibo','qq','qqzone','wx','rr','bdtb','db','qqpy','kx']; 8 this.config = { 9 'weibo':['新浪微博','http://service.weibo.com/share/share.php?'], 10 'qqweibo':['騰訊微博','http://share.v.t.qq.com/index.php?c=share&a=index'], 11 'qq':['QQ好友','http://connect.qq.com/widget/shareqq/index.html?'], 12 'qqzone':['QQ空間','http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?'], 13 'wx':['微信分享',''], 14 'rr':['人人分享','http://widget.renren.com/dialog/share?'], 15 'bdtb':['百度貼吧','http://tieba.baidu.com/f/commit/share/openShareApi?'], 16 'db':['豆瓣','http://shuo.douban.com/!service/share?'], 17 'qqpy':['朋友網','http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&'], 18 'kx':['開心網','http://www.kaixin001.com/login/open_login.php?'] 19 }; 20 (this.type && this.type.length)?this.custom() : this.defa(); 21 } 22 23 share.prototype.custom=function(){ 24 var str = ''; 25 for(var i=0,l=this.type.length;i<l;i++){ 26 str+='<a href="javascript:;" class="custom_share_'+this.type[i]+'" shareType="'+ this.type[i] +'">'+ this.config[this.type[i]][0] +'</a>'; 27 } 28 this.dom.innerHTML = str; 29 this.bind(); 30 }; 31 32 share.prototype.defa=function(){ 33 var str = ''; 34 for(var i=0,l=this.type.length;i<l;i++){ 35 str+='<a href="javascript:;" class="defautl_share_'+ this.type[i] +'" shareType="'+ this.type[i] +'">'+this.config[this.type[i]][0]+'</a>'; 36 } 37 this.dom.innerHTML = str; 38 this.bind(); 39 }; 40 41 share.prototype.bind=function(){ 42 var _this = this; 43 this.dom.onclick=function(ev){ 44 var e = ev || window.event, 45 oTarget = e.target || e.srcElement; 46 (oTarget.nodeName === 'A' && _this.core(oTarget)); 47 } 48 this.dom = null; 49 } 50 51 share.prototype.core=function(o){ 52 53 var _this = this, 54 type = o.getAttribute('sharetype') || 'weibo', 55 ercode = '', 56 result = this.config[type][1], 57 urls = encodeURIComponent((_this.params[type] && _this.params[type].url) ? _this.params[type].url : _this.params.url), 58 title = encodeURIComponent((_this.params[type] && _this.params[type].title) ? _this.params[type].title : (_this.params.title)?_this.params.title:''), 59 images = encodeURIComponent((_this.params[type] && _this.params[type].images) ? _this.params[type].images :( _this.params.images)? _this.params.images:''), 60 desc = encodeURIComponent((_this.params[type] && _this.params[type].desc) ? _this.params[type].desc : (_this.params.desc)?_this.params.desc:''), 61 summary = encodeURIComponent((_this.params[type] && _this.params[type].summary) ? _this.params[type].summary : (_this.params.summary)?_this.params.summary:''), 62 site = encodeURIComponent((_this.params[type] && _this.params[type].site) ? _this.params[type].site : ''); 63 64 function wx(){ 65 var e = document.getElementById('share_qrcode_box') || false, 66 img = new Image(), 67 _w = 0, 68 _h = 0, 69 oDiv = null; 70 71 img.onload=function(){ 72 _w = this.width; 73 _h = this.height; 74 if(_this.params.target == 'blank'){ 75 if(!e){ 76 oDiv = document.createElement('div'); 77 oDiv.className = 'share_qrcode'; 78 oDiv.id = 'share_qrcode_box'; 79 oDiv.innerHTML = '<img src="'+ _this.params.qrcode +'" /><span href="javascript:;" class="share_close">✕</span>'; 80 oDiv.style.cssText = 'padding:10px;position:fixed;_position:absolute;left:50%;top:50%;margin-left:'+-(_w+20)/2+'px;margin-top:'+-(_h+20)/2+'px;'; 81 document.body.appendChild(oDiv); 82 oDiv.children[1].style.cssText = "position:absolute;cursor:pointer;"; 83 oDiv.children[1].onclick=function(){ 84 var e = document.getElementById('share_qrcode_box'); 85 document.body.removeChild(e); 86 } 87 }else{ 88 _this.dom.cssText = 'position:relative'; 89 _this.dom.appendChild(img); 90 } 91 92 } 93 94 } 95 96 img.src=_this.params.qrcode; 97 } 98 99 if(type!='wx'){ 100 switch(type){ 101 case 'weibo':result+= 'title=' + title+'&url=' + urls + '&pic='+ images;break; 102 case 'qqweibo':result+= '&title=' +title+'&url=' + urls + '&pic='+ images;break; 103 case 'qq':result+= 'url=' + urls+'&title=' + title +'&desc='+ desc + '&summary='+summary+'&pics='+ images +'&site='+ site;break; 104 case 'qqzone':result+= 'url=' + urls+'&title=' + title + '&desc='+ desc+'&summary='+summary +'&pic='+ images + '&site='+ site; break; 105 case 'rr':result+= 'resourceUrl=' +urls+'&title=' + title + '&description='+ desc +'&pic='+ images;break; 106 case 'bdtb':result+= 'title=' + title+'&url=' + urls +'&pic='+ images+'&desc='+ desc ;break; 107 case 'db':result+= 'image=' + images+'&href=' + urls +'&name='+ title+'&text='+ desc ;break; 108 case 'qqpy':result+= 'pics=' + images+'&url=' + urls +'&title='+ title+'&desc='+ desc +'&summary='+summary;break; 109 case 'kx':result+= '&url=' + urls +'&rtitle='+ title; break; 110 } 111 window.open(result); 112 }else{ 113 wx(); 114 } 115 } 116 root.share = function(params){ 117 new share(params); 118 }; 119 })(window)
使用方式如下：
1 share({ 2 dom:document.getElementById('box'), //指定結構生成的盒子。 3 url:'分享的url', 4 title:'分享的標題', 5 desc:'分享的描述', 6 images:'分享的圖片url', 7 qrcode:'微信分享的二維碼', 8 target:'blank', //設置二維碼的顯示方式，blank窗口居中顯示，selef,當前位置顯示。 9 qqzone:{ //單獨配置qq空間的分享參數。 10 summary:'這是一個摘要', 11 site:'http://www.xxx.com' 12 } 13 }); 14 /* ============ 15 16 參數是一個對象，具體的參數如下： 17 18 |-- dom [object] ：指定生成分享組件的dom對象。 19 |-- type [array] ：指定分享的類型。默認值為空數組，表示生成全部的分享類型。 20 |- weibo [string] ：分享到新浪微博。 21 |- qqweibo [string] ：分享到QQ微博。 22 |- qq [string] ：分享到QQ好友。 23 |- qqzone [string] ：分享到QQ空間。 24 |- wx [string] ：分享到微信中去。 25 |- rr [string] ：分享到人人網。 26 |- bdtb [string] ：分享到百度貼吧。 27 |- db [string] ：分享到豆瓣。 28 |- qqpy [string] ：分享到朋友網。 29 |- kx [string] ：分享到開心網。 30 |-- url [string] ：通用的分享鏈接。 31 |-- title [string] ：通用的分享標題。 32 |-- desc [string] ：通用的分享描述。 33 |-- image [string] ：通用的分享圖片。 34 |-- qrcode [string] ：設置微信的二維碼。 35 |-- target [string] ：設置微信二維碼的打開方式。 36 |- self ：當前位置顯示。 37 |- blank ：彈出層打開。 38 |-- weibo [object] ：單獨設置新浪微博分享的參數。 39 |- url ：單獨設置新浪微博分享的url。 40 |- title ：單獨設置新浪微博分享的標題。 41 |- images ：單獨設置新浪微博分享的圖片。 42 |-- qqweibo [object] ：單獨設置QQ微博分享的參數。 43 |- url ：單獨設置QQ微博分享的url。 44 |- title ：單獨設置QQ微博分享的標題。 45 |- images ：單獨設置QQ微博分享的圖片。 46 |-- qq [object] ：單獨設置QQ分享的參數。 47 |- url ：單獨設置QQ分享的url。 48 |- title ：單獨設置QQ分享的標題。 49 |- desc ：單獨設置QQ分享的描述。 50 |- summary ：單獨設置QQ分享的摘要。 51 |- site ：單獨設置QQ分享的來源。 52 |- images ：單獨設置QQ分享的圖片。 53 |-- qqzone [object] ：單獨設置QQ空間分享的參數。 54 |- url ：單獨設置QQ空間分享的url。 55 |- title ：單獨設置QQ空間分享的標題。 56 |- desc ：單獨設置QQ空間分享的描述。 57 |- summary ：單獨設置QQ空間分享的摘要。 58 |- site ：單獨設置QQ空間分享的來源。 59 |- images ：單獨設置QQ空間分享的圖片。 60 |-- rr [object] ：單獨設置人人分享的參數。 61 |- url ：單獨設置人人分享的url。 62 |- title ：單獨設置人人分享的標題。 63 |- desc ：單獨設置人人分享的描述。 64 |- images ：單獨設置人人分享的圖片。 65 |--bdtb [object] ：單獨設置百度貼吧分享的參數。 66 |- url ：單獨設置百度貼吧分享的url。 67 |- title ：單獨設置百度貼吧分享的標題。 68 |- desc ：單獨設置百度貼吧分享的描述。 69 |- images ：單獨設置百度貼吧分享的圖片。 70 |--db [object] ：單獨設置豆瓣分享的參數。 71 |- url ：單獨設置豆瓣分享的url。 72 |- title ：單獨設置豆瓣分享的標題。 73 |- desc ：單獨設置豆瓣分享的描述。 74 |- images ：單獨設置豆瓣分享的圖片。 75 |--qqpy [object] ：單獨設置朋友網分享的參數。 76 |- url ：單獨設置朋友網分享的url。 77 |- title ：單獨設置朋友網分享的標題。 78 |- desc ：單獨設置朋友網分享的描述。 79 |- summary ：單獨設置朋友網分享的摘要。 80 |- images ：單獨設置朋友網分享的圖片。 81 |--kx [object] ：單獨設置開心分享的參數。 82 |- url ：單獨設置豆瓣分享的url。 83 |- title ：單獨設置豆瓣分享的標題。 84 85 86 87 ==============*/
修訂：
2016/8/12 -- 修改代碼邏輯，精簡代碼。