自己封装的一个JS分享组件

　　因为工作的需求之前也封装过一个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 -- 修改代码逻辑，精简代码。