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

自己封装的一个JS分享组件的更多相关文章

  1. 自己封装的一个js方法用于获取显示的星期和日期时间

    自己封装的一个js方法用于获取显示的星期和日期时间 /** * 获取用于显示的星期和日期时间 * @param date * @returns {string} */ function getWeek ...

  2. 小程序请求接口统一封装到一个js文件中

    在我们做小程序时,数据请求数据请求是避免不了的,然而我们用官方自带的请求方式,会给我们带来很多重复的工作,所以我就借鉴大神们的博客,写了一个简单的请求方式. 1.首先我们在utils中新建一个api. ...

  3. js封装,一个JS文件引用多个JS文件

    (function() { //加载   varobj =  {};   /**    * 动态加载脚本函数    * @param url 要加载的脚本路径    * @param callback ...

  4. React自己写的一个地图小组件

    由于今天比较闲,就玩了玩react,然后就封装了一个地图的组件,当然功能比较简单,因为就是随手写的小东西,但是由于引用了百度API和bee-mobile,所以用起来可能要薛微麻烦一点点,但是我保证,只 ...

  5. JS组件系列——封装自己的JS组件,你也可以

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  6. JS组件系列——封装自己的JS组件

    前言:之前分享了那么多bootstrap组件的使用经验,这篇博主打算研究下JS组件的扩展和封装,我们来感受下JQuery为我们提供$.Extend的神奇,看看我们怎么自定义自己的组件,比如我们想扩展一 ...

  7. 我的第一个JS组件-跨浏览器JS调试工具

    武汉九天鸟-p2p网贷系统开发-互联网应用软件开发 公司官网:http://jiutianniao.com  社交问答:http://ask.jiutianniao.com 最近,在看公司一个JS大牛 ...

  8. 自己封装的一个LoadRes组件

    这两周一直太忙,没有好好处理上上上周遇到的一个让我加班到凌晨的问题,这个问题是判断flash的加载. 之前的思路是让flash的人在制作flash的时候,加入了一个回调方法,该方法再会回调我页面的方法 ...

  9. 使用原生JS实现一个风箱式的demo,并封装了一个运动框架

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...

随机推荐

  1. 【二】jekyll 的使用

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  2. LA

    grmon -altjtag -u 公式rand()%(b-a),是求范围随机数的计算公式,%是做求余运算,正整数对n求余的范围肯定是在0~n-1之间,也就是rand()%(b-a)的范围是0~b-a ...

  3. Hadoop学习笔记—12.MapReduce中的常见算法

    一.MapReduce中有哪些常见算法 (1)经典之王:单词计数 这个是MapReduce的经典案例,经典的不能再经典了! (2)数据去重 "数据去重"主要是为了掌握和利用并行化思 ...

  4. Unity3D游戏开发初探—4.开发一个“疯狂击箱子”游戏

    一.预备知识—对象的”生“与”死“ (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive() 以上一篇的博文中的“指 ...

  5. Go项目结构和模块导入

    Go项目结构和模块导入 golang项目结构与其他语言类似,但是仍然有一些需要注意的地方. 项目结构 环境配置 go 命令依赖一个重要的环境变量:$GOPATH,它表示GO项目的路径,如下设置 exp ...

  6. .NET陷阱之六:从枚举值持久化带来大量空间消耗谈起

    好长时间没有写博文了,今天继续. 这次跟大家分享的内容起因于对一个枚举值列表的序列化,下面简化后的代码即能重现.为了明确起见,我显式指定了枚举的基础类型. // 定义一个枚举类型. public en ...

  7. Struts2.X——搭建

    今天是我第一次用博客,虽然还有好多的不懂,但是我还是会努力的把自己学到的写下来,分享给大家: 一,SSH框架中的struts2的搭建流程 1.在搭建struts2之前,我们首先要有struts2的ja ...

  8. 蓄水池(Reservoir_sampling)抽样算法简记

    摘要 1.适用场合 2.算法简介 3.代码例子 4.Spark RangePartitioner 中的应用(待补充) 内容 1.适用场合:从包含n个项目的集合S中选取k个样本,其中n为一很大或未知的数 ...

  9. 使用sklearn进行集成学习——实践

    系列 <使用sklearn进行集成学习——理论> <使用sklearn进行集成学习——实践> 目录 1 Random Forest和Gradient Tree Boosting ...

  10. Resource governor2:Configuration query

    SQL Server Engine 当前使用的configuration,称作 In-memory configuration,使用DMV:sys.dm_resource_governor_XXX查看 ...