自己封装的一个JS分享组件
Posted 卷柏的花期
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己封装的一个JS分享组件相关的知识，希望对你有一定的参考价值。
因为工作的需求之前也封装过一个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 ==============*/
以上是关于自己封装的一个JS分享组件的主要内容，如果未能解决你的问题，请参考以下文章