因为工作的需求之前也封装过一个JS分享插件，集成了我们公司常用的几个分享平台。
但是总感觉之前的结构上很不理想，样式，行为揉成一起，心里想的做的完美，实际上总是很多的偏差，所以这次我对其进行了改版。
这次的核心就是：JS只负责事件+结构，也就是把功能实现出来，具体的外观样式，则使用者自己进行定义。
以下是新版分享插件的代码：
(function(root){
'use strict';
function share(params){
this.params = params;
this.dom = params.dom;
this.type = params.type || ['weibo','qqweibo','qq','qqzone','wx','rr','bdtb','db','qqpy','kx'];
this.config = {
'weibo':['新浪微博','http://service.weibo.com/share/share.php?'],
'qqweibo':['腾讯微博','http://share.v.t.qq.com/index.php?c=share&a=index'],
'qq':['QQ好友','http://connect.qq.com/widget/shareqq/index.html?'],
'qqzone':['QQ空间','http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?'],
'wx':['微信分享',''],
'rr':['人人分享','http://widget.renren.com/dialog/share?'],
'bdtb':['百度贴吧','http://tieba.baidu.com/f/commit/share/openShareApi?'],
'db':['豆瓣','http://shuo.douban.com/!service/share?'],
'qqpy':['朋友网','http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&'],
'kx':['开心网','http://www.kaixin001.com/login/open_login.php?']
};
(this.type && this.type.length)?this.custom() : this.defa();
}
share.prototype.custom=function(){
var str = '';
for(var i=0,l=this.type.length;i<l;i++){
str+='<a href="javascript:;" class="custom_share_'+this.type[i]+'" shareType="'+ this.type[i] +'">'+ this.config[this.type[i]][0] +'</a>';
}
this.dom.innerHTML = str;
this.bind();
};
share.prototype.defa=function(){
var str = '';
for(var i=0,l=this.type.length;i<l;i++){
str+='<a href="javascript:;" class="defautl_share_'+ this.type[i] +'" shareType="'+ this.type[i] +'">'+this.config[this.type[i]][0]+'</a>';
}
this.dom.innerHTML = str;
this.bind();
};
share.prototype.bind=function(){
var _this = this;
this.dom.onclick=function(ev){
var e = ev || window.event,
oTarget = e.target || e.srcElement;
(oTarget.nodeName === 'A' && _this.core(oTarget));
}
this.dom = null;
}
share.prototype.core=function(o){
var _this = this,
type = o.getAttribute('sharetype') || 'weibo',
ercode = '',
result = this.config[type][1],
urls = encodeURIComponent((_this.params[type] && _this.params[type].url) ? _this.params[type].url : _this.params.url),
title = encodeURIComponent((_this.params[type] && _this.params[type].title) ? _this.params[type].title : (_this.params.title)?_this.params.title:''),
images = encodeURIComponent((_this.params[type] && _this.params[type].images) ? _this.params[type].images :( _this.params.images)? _this.params.images:''),
desc = encodeURIComponent((_this.params[type] && _this.params[type].desc) ? _this.params[type].desc : (_this.params.desc)?_this.params.desc:''),
summary = encodeURIComponent((_this.params[type] && _this.params[type].summary) ? _this.params[type].summary : (_this.params.summary)?_this.params.summary:''),
site = encodeURIComponent((_this.params[type] && _this.params[type].site) ? _this.params[type].site : '');
function wx(){
var e = document.getElementById('share_qrcode_box') || false,
img = new Image(),
_w = 0,
_h = 0,
oDiv = null;
img.onload=function(){
_w = this.width;
_h = this.height;
if(_this.params.target == 'blank'){
if(!e){
oDiv = document.createElement('div');
oDiv.className = 'share_qrcode';
oDiv.id = 'share_qrcode_box';
oDiv.innerHTML = '<img src="'+ _this.params.qrcode +'" /><span href="javascript:;" class="share_close">✕</span>';
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;';
document.body.appendChild(oDiv);
oDiv.children[1].style.cssText = "position:absolute;cursor:pointer;";
oDiv.children[1].onclick=function(){
var e = document.getElementById('share_qrcode_box');
document.body.removeChild(e);
}
}else{
_this.dom.cssText = 'position:relative';
_this.dom.appendChild(img);
}
}
}
img.src=_this.params.qrcode;
}
if(type!='wx'){
switch(type){
case 'weibo':result+= 'title=' + title+'&url=' + urls + '&pic='+ images;break;
case 'qqweibo':result+= '&title=' +title+'&url=' + urls + '&pic='+ images;break;
case 'qq':result+= 'url=' + urls+'&title=' + title +'&desc='+ desc + '&summary='+summary+'&pics='+ images +'&site='+ site;break;
case 'qqzone':result+= 'url=' + urls+'&title=' + title + '&desc='+ desc+'&summary='+summary +'&pic='+ images + '&site='+ site; break;
case 'rr':result+= 'resourceUrl=' +urls+'&title=' + title + '&description='+ desc +'&pic='+ images;break;
case 'bdtb':result+= 'title=' + title+'&url=' + urls +'&pic='+ images+'&desc='+ desc ;break;
case 'db':result+= 'image=' + images+'&href=' + urls +'&name='+ title+'&text='+ desc ;break;
case 'qqpy':result+= 'pics=' + images+'&url=' + urls +'&title='+ title+'&desc='+ desc +'&summary='+summary;break;
case 'kx':result+= '&url=' + urls +'&rtitle='+ title; break;
}
window.open(result);
}else{
wx();
}
}
root.share = function(params){
new share(params);
};
})(window)
使用方式如下：
share({
dom:document.getElementById('box'), //指定结构生成的盒子。
url:'分享的url',
title:'分享的标题',
desc:'分享的描述',
images:'分享的图片url',
qrcode:'微信分享的二维码',
target:'blank', //设置二维码的显示方式，blank窗口居中显示，selef,当前位置显示。
qqzone:{ //单独配置qq空间的分享参数。
summary:'这是一个摘要',
site:'http://www.xxx.com'
}
});
/* ============
参数是一个对象，具体的参数如下：
|-- dom [object] ：指定生成分享组件的dom对象。
|-- type [array] ：指定分享的类型。默认值为空数组，表示生成全部的分享类型。
|- weibo [string] ：分享到新浪微博。
|- qqweibo [string] ：分享到QQ微博。
|- qq [string] ：分享到QQ好友。
|- qqzone [string] ：分享到QQ空间。
|- wx [string] ：分享到微信中去。
|- rr [string] ：分享到人人网。
|- bdtb [string] ：分享到百度贴吧。
|- db [string] ：分享到豆瓣。
|- qqpy [string] ：分享到朋友网。
|- kx [string] ：分享到开心网。
|-- url [string] ：通用的分享链接。
|-- title [string] ：通用的分享标题。
|-- desc [string] ：通用的分享描述。
|-- image [string] ：通用的分享图片。
|-- qrcode [string] ：设置微信的二维码。
|-- target [string] ：设置微信二维码的打开方式。
|- self ：当前位置显示。
|- blank ：弹出层打开。
|-- weibo [object] ：单独设置新浪微博分享的参数。
|- url ：单独设置新浪微博分享的url。
|- title ：单独设置新浪微博分享的标题。
|- images ：单独设置新浪微博分享的图片。
|-- qqweibo [object] ：单独设置QQ微博分享的参数。
|- url ：单独设置QQ微博分享的url。
|- title ：单独设置QQ微博分享的标题。
|- images ：单独设置QQ微博分享的图片。
|-- qq [object] ：单独设置QQ分享的参数。
|- url ：单独设置QQ分享的url。
|- title ：单独设置QQ分享的标题。
|- desc ：单独设置QQ分享的描述。
|- summary ：单独设置QQ分享的摘要。
|- site ：单独设置QQ分享的来源。
|- images ：单独设置QQ分享的图片。
|-- qqzone [object] ：单独设置QQ空间分享的参数。
|- url ：单独设置QQ空间分享的url。
|- title ：单独设置QQ空间分享的标题。
|- desc ：单独设置QQ空间分享的描述。
|- summary ：单独设置QQ空间分享的摘要。
|- site ：单独设置QQ空间分享的来源。
|- images ：单独设置QQ空间分享的图片。
|-- rr [object] ：单独设置人人分享的参数。
|- url ：单独设置人人分享的url。
|- title ：单独设置人人分享的标题。
|- desc ：单独设置人人分享的描述。
|- images ：单独设置人人分享的图片。
|--bdtb [object] ：单独设置百度贴吧分享的参数。
|- url ：单独设置百度贴吧分享的url。
|- title ：单独设置百度贴吧分享的标题。
|- desc ：单独设置百度贴吧分享的描述。
|- images ：单独设置百度贴吧分享的图片。
|--db [object] ：单独设置豆瓣分享的参数。
|- url ：单独设置豆瓣分享的url。
|- title ：单独设置豆瓣分享的标题。
|- desc ：单独设置豆瓣分享的描述。
|- images ：单独设置豆瓣分享的图片。
|--qqpy [object] ：单独设置朋友网分享的参数。
|- url ：单独设置朋友网分享的url。
|- title ：单独设置朋友网分享的标题。
|- desc ：单独设置朋友网分享的描述。
|- summary ：单独设置朋友网分享的摘要。
|- images ：单独设置朋友网分享的图片。
|--kx [object] ：单独设置开心分享的参数。
|- url ：单独设置豆瓣分享的url。
|- title ：单独设置豆瓣分享的标题。
==============*/
修订：
2016/8/12 -- 修改代码逻辑，精简代码。