因为工作的需求之前也封装过一个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 || [];
8 (this.dom && this.type && this.type.length)?this.custom() : this.defa();
9
10
11 }
12
13 share.prototype.custom=function(){ //生成自定义的DOM结构
14 var str = ‘‘;
15 for(var i=0,l=this.type.length;i<l;i++){
16 str+=‘<a href="javascript:;" shareType="‘+ this.type[i] +‘"></a>‘;
17 }
18 this.dom.innerHTML = str;
19 this.bind();
20 };
21
22 share.prototype.defa=function(){ //生成默认的DOM结构
23 var str = ‘‘;
24 this.type = [‘weibo‘,‘qqweibo‘,‘qq‘,‘qqzone‘,‘wx‘,‘rr‘,‘bdtb‘,‘db‘];
25 for(var i=0,l=this.type.length;i<l;i++){
26 str+=‘<a href="javascript:;" shareType="‘+ this.type[i] +‘">‘+this.type[i]+‘</a>‘;
27 }
28 this.dom.innerHTML = str;
29 this.bind();
30 };
31
32 share.prototype.bind=function(){ //给接口绑定事件
33 var _this = this;
34 this.dom.onclick=function(ev){
35 var e = ev || window.event,
36 oTarget = e.target || e.srcElement;
37 (oTarget.nodeName === ‘A‘ && _this.core(oTarget));
38 }
39 this.dom = null;
40 }
41
42 share.prototype.core=function(o){
43
44 var _this = this,
45 result = ‘‘,
46 urls = ‘‘,
47 title = ‘‘,
48 desc = ‘‘,
49 images = ‘‘,
50 ercode = ‘‘;
51
52 function weibo(){
53 result = ‘http://service.weibo.com/share/share.php?‘;
54 urls = (_this.params.weibo && _this.params.weibo.url) ? _this.params.weibo.url : _this.params.url;
55 title = (_this.params.weibo && _this.params.weibo.title) ? _this.params.weibo.title : _this.params.title;
56 images = (_this.params.weibo && _this.params.weibo.images) ? _this.params.weibo.images : _this.params.images;
57 result+= ‘title=‘ + encodeURIComponent(title)+‘&url=‘ + encodeURIComponent(urls) + ‘&pic=‘+ encodeURIComponent(images);
58 window.open(result);
59 }
60 function qqweibo(){
61 result = ‘http://share.v.t.qq.com/index.php?c=share&a=index‘;
62 urls = (_this.params.qqweibo && _this.params.qqweibo.url) ? _this.params.qqweibo.url : _this.params.url;
63 title = (_this.params.qqweibo && _this.params.qqweibo.title) ? _this.params.qqweibo.title : _this.params.title;
64 images = (_this.params.qqweibo && _this.params.qqweibo.images) ? _this.params.qqweibo.images : _this.params.images;
65 result+= ‘&title=‘ + encodeURIComponent(title)+‘&url=‘ + encodeURIComponent(urls) + ‘&pic=‘+ encodeURIComponent(images);
66 window.open(result);
67 }
68 function qq(){
69 var site = ‘‘,
70 summary = ‘‘;
71 result = ‘http://connect.qq.com/widget/shareqq/index.html?‘;
72 urls = (_this.params.qq && _this.params.qq.url) ? _this.params.qq.url : _this.params.url;
73 site = (_this.params.qq && _this.params.qq.site) ? _this.params.qq.site : ‘‘;
74 title = (_this.params.qq && _this.params.qq.title) ? _this.params.qq.title : _this.params.title;
75 desc = (_this.params.qq && _this.params.qq.desc) ? _this.params.qq.desc : _this.params.desc;
76 summary = (_this.params.qq && _this.params.qq.summary) ? _this.params.qq.summary : ‘‘;
77 images = (_this.params.qq && _this.params.qq.images) ? _this.params.qq.images : _this.params.images;
78 result+= ‘url=‘ + encodeURIComponent(urls)+‘&title=‘ + encodeURIComponent(title) +‘&desc=‘+ encodeURIComponent(desc) + ‘&summary=‘+encodeURIComponent(summary)+‘&pics=‘+ encodeURIComponent(images) +‘&site=‘+ encodeURIComponent(site);
79 window.open(result);
80 }
81
82 function qqzone(){
83 var site = ‘‘,
84 summary = ‘‘;
85 result = ‘http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?‘;
86 urls = (_this.params.qqzone && _this.params.qqzone.url) ? _this.params.qqzone.url : _this.params.url;
87 site = (_this.params.qqzone && _this.params.qqzone.site) ? _this.params.qqzone.site : ‘‘;
88 title = (_this.params.qqzone && _this.params.qqzone.title) ? _this.params.qqzone.title : _this.params.title;
89 desc = (_this.params.qqzone && _this.params.qqzone.desc) ? _this.params.qqzone.desc : _this.params.desc;
90 summary = (_this.params.qqzone && _this.params.qqzone.summary) ? _this.params.qqzone.summary : ‘‘;
91 images = (_this.params.qqzone && _this.params.qqzone.images) ? _this.params.qqzone.images : _this.params.images;
92 result+= ‘url=‘ + encodeURIComponent(urls)+‘&title=‘ + encodeURIComponent(title) + ‘&desc=‘+ encodeURIComponent(desc) +‘&summary=‘+encodeURIComponent(summary) +‘&pic=‘+ encodeURIComponent(images) + ‘&site=‘+ encodeURIComponent(site);
93 window.open(result);
94 }
95
96 function rr(){
97 result = ‘http://widget.renren.com/dialog/share?‘;
98 urls = (_this.params.rr && _this.params.rr.url) ? _this.params.rr.url : _this.params.url;
99 title = (_this.params.rr && _this.params.rr.title) ? _this.params.rr.title : _this.params.title;
100 images = (_this.params.rr && _this.params.rr.images) ? _this.params.rr.images : _this.params.images;
101 desc = (_this.params.rr && _this.params.rr.desc) ? _this.params.rr.desc : _this.params.desc;
102 result+= ‘resourceUrl=‘ +encodeURIComponent(urls)+‘&title=‘ + encodeURIComponent(title) + ‘&description=‘+ encodeURIComponent(desc) +‘&pic=‘+ encodeURIComponent(images);
103 window.open(result);
104 }
105 function bdtb(){
106 result = ‘http://tieba.baidu.com/f/commit/share/openShareApi?‘;
107 urls = (_this.params.bdtb && _this.params.bdtb.url) ? _this.params.bdtb.url : _this.params.url;
108 title = (_this.params.bdtb && _this.params.bdtb.title) ? _this.params.bdtb.title : _this.params.title;
109 desc = (_this.params.bdtb && _this.params.bdtb.desc) ? _this.params.bdtb.desc : _this.params.desc;
110 images = (_this.params.bdtb && _this.params.bdtb.images) ? _this.params.bdtb.images : _this.params.images;
111 result+= ‘title=‘ + encodeURIComponent(title)+‘&url=‘ + encodeURIComponent(urls) +‘&pic=‘+ encodeURIComponent(images)+‘&desc=‘+ encodeURIComponent(desc) ;
112 window.open(result);
113 }
114
115 function db(){
116 result = ‘http://shuo.douban.com/!service/share?‘;
117 urls = (_this.params.db && _this.params.db.url) ? _this.params.db.url : _this.params.url;
118 title = (_this.params.db && _this.params.db.title) ? _this.params.db.title : _this.params.title;
119 desc = (_this.params.db && _this.params.db.desc) ? _this.params.db.desc : _this.params.desc;
120 images = (_this.params.db && _this.params.db.images) ? _this.params.db.images : _this.params.images;
121 result+= ‘image=‘ + encodeURIComponent(images)+‘&href=‘ + encodeURIComponent(urls) +‘&name=‘+ encodeURIComponent(title)+‘&text=‘+ encodeURIComponent(desc) ;
122 window.open(result);
123 }
124
125 function wx(){
126 var e = document.getElementById(‘share_qrcode_box‘) || false,
127 img = new Image(),
128 _w = 0,
129 _h = 0,
130 oDiv = null;
131
132 img.onload=function(){
133 _w = this.width;
134 _h = this.height;
135
136 oDiv = document.createElement(‘div‘);
137 oDiv.className = ‘share_qrcode‘;
138 oDiv.id = ‘share_qrcode_box‘;
139 oDiv.innerHTML = ‘<img src="‘+ _this.params.qrcode +‘" /><span href="javascript:;" class="share_close">✕</span>‘;
140
141 if(_this.params.target == ‘blank‘ && !e){
142 oDiv.style.cssText = ‘position:fixed;_position:absolute;left:50%;top:50%;margin-left:‘+-(_w+20)/2+‘px;margin-top:‘+-(_h+20)/2+‘px;‘;
143 document.body.appendChild(oDiv);
144 }
145
146 if(_this.params.target == ‘self‘ && !e){
147 oDiv.style.cssText = ‘position:absolute;‘;
148 _this.params.dom.cssText = ‘position:relative‘;
149 _this.params.dom.appendChild(oDiv);
150 }
151
152 oDiv.children[1].style.cssText = "position:absolute;cursor:pointer;";
153 oDiv.children[1].onclick=function(){
154 var e = document.getElementById(‘share_qrcode_box‘);
155 e && e.parentNode.removeChild(e);
156 }
157 oDiv.children[1] = null;
158
159 }
160
161 img.src=_this.params.qrcode;
162 }
163
164 switch(o.getAttribute(‘sharetype‘)){
165 case ‘weibo‘:weibo();break;
166 case ‘qqweibo‘:qqweibo();break;
167 case ‘qq‘:qq();break;
168 case ‘qqzone‘:qqzone();break;
169 case ‘rr‘:rr();break;
170 case ‘bdtb‘:bdtb();break;
171 case ‘db‘:db();break;
172 case ‘wx‘:wx();break;
173 }
174
175 }
176 root.share = function(params){
177 new share(params);
178 };
179 })(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 |-- url [string] ：通用的分享链接。
29 |-- title [string] ：通用的分享标题。
30 |-- desc [string] ：通用的分享描述。
31 |-- image [string] ：通用的分享图片。
32 |-- qrcode [string] ：设置微信的二维码。
33 |-- target [string] ：设置微信二维码的打开方式。
34 |- self ：当前位置显示。
35 |- blank ：弹出层打开。
36 |-- weibo [object] ：单独设置新浪微博分享的参数。
37 |- url ：单独设置新浪微博分享的url。
38 |- title ：单独设置新浪微博分享的标题。
39 |- images ：单独设置新浪微博分享的图片。
40 |-- qqweibo [object] ：单独设置QQ微博分享的参数。
41 |- url ：单独设置QQ微博分享的url。
42 |- title ：单独设置QQ微博分享的标题。
43 |- images ：单独设置QQ微博分享的图片。
44 |-- qq [object] ：单独设置QQ分享的参数。
45 |- url ：单独设置QQ分享的url。
46 |- title ：单独设置QQ分享的标题。
47 |- desc ：单独设置QQ分享的描述。
48 |- summary ：单独设置QQ分享的摘要。
49 |- site ：单独设置QQ分享的来源。
50 |- images ：单独设置QQ分享的图片。
51 |-- qqzone [object] ：单独设置QQ空间分享的参数。
52 |- url ：单独设置QQ空间分享的url。
53 |- title ：单独设置QQ空间分享的标题。
54 |- desc ：单独设置QQ空间分享的描述。
55 |- summary ：单独设置QQ空间分享的摘要。
56 |- site ：单独设置QQ空间分享的来源。
57 |- images ：单独设置QQ空间分享的图片。
58 |-- rr [object] ：单独设置人人分享的参数。
59 |- url ：单独设置人人分享的url。
60 |- title ：单独设置人人分享的标题。
61 |- desc ：单独设置人人分享的描述。
62 |- images ：单独设置人人分享的图片。
63 |--bdtb [object] ：单独设置百度贴吧分享的参数。
64 |- url ：单独设置百度贴吧分享的url。
65 |- title ：单独设置百度贴吧分享的标题。
66 |- desc ：单独设置百度贴吧分享的描述。
67 |- images ：单独设置百度贴吧分享的图片。
68 |--db [object] ：单独设置豆瓣分享的参数。
69 |- url ：单独设置豆瓣分享的url。
70 |- title ：单独设置豆瓣分享的标题。
71 |- desc ：单独设置豆瓣分享的描述。
72 |- images ：单独设置豆瓣分享的图片。
73
74 ==============*/
时间： 2024-10-09 19:36:38