因为工作的需求之前也封装过一个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.οnclick=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.οnlοad=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].οnclick=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 -- 修改代码逻辑，精简代码。
扫一扫
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
