By
anjia
更新日期:
前面介绍了与 jQuery 插件相关的理论知识，包括 《 jQuery 简洁的插件架构 》、《 用 jQuery 编写第三方插件 》 和 《 jQuery UI 的部件工厂 》。本节是在之前的基础上，介绍一个自定义的分享插件，它依赖于 jQuery，UI 大约长这样：
选择
选择哪种方式
根据前面的介绍，我们知道，自定义 jQuery 插件有这么三种方式：jQuery 全局函数、jQuery 对象方法 和 jQuery UI 部件。我们来分别看下。
1.分享插件，它与 DOM 密切相关（有事件处理），故 jQuery 全局函数的方式不合适
2.虽说要操作 DOM 就会让人首先想到 jQuery UI，但是，因为 jQuery UI 依赖于 ui.core.js 和 ui.widget.js，而实际的应用场景又比较复杂（不是单一的页面，这个“二级引用库”并没有被提取出来统一管理），为了保证环境的单一性，就不多加一层依赖了，而是选择直接依赖于 jQuery。
于是，这里就选择了：把分享插件作为 jQuery 的对象方法。
如何处理 HTML
分享插件要处理交互部分，是毋庸置疑的（否则封它干啥是吧）。但是呢，插件对应的 HTML 结构要如何处理呢？这里有两种方式：
- 在初始化插件时，用脚本动态生成 HTML 部分
优点：使用简单。 $(‘#demo’).share() 一句话就把空空的 div 变成了丰满的分享组件
缺点：插件内部复杂了点
- HTML嘛，让用户自己写喽，插件只负责交互
优点：简化了插件本身
缺点：使用的时候，多费劲。HTML 部分还得自己写。
通过对比，可以看出：使用简单的-内部多干点；内部想偷懒了-那使用就麻烦点。好吧，暂时还没结论，因为这本身就是一个非常常见的事物AB面的问题，鱼和熊掌不可兼得。那么，现在，我们就来做个取舍。首先，问自己个问题 “这，有必要吗？”、“这 ，值得吗？”
好，现在的问题归结为：让插件去生成 HTML 部分，值得吗？我们先来回忆下这个插件的应用场景。
- 不同的页面可能要支持的不同的分享 ico：
A. 若纯由 JS 自动生成（保证个数和顺序），成本也不小，配置啊、检查啊等
B. 这 HTML 结构也不复杂，完全可以交由页面的开发人员自主决定。只要HTML结构符合要求就ok
- 已有后端的模板引擎 smarty
A. 可直接在 smarty 里写好 HTML，就不用 JS 动态生成了，以免页面会“闪”一下
B. 对于 UI 较复杂的，比如日历、日期等插件，HTML 结构交由插件自动生成，会省时省力不少
综上，对于 HTML 结构稳定 or 结构复杂的，适合在 JS 里自动生成，好处就是生成后一劳永逸 or 长的太复杂的还让用户自己写-插件自己的节操呢？
这个分享插件呢，HTML 结构不定，且也不复杂，故此处就只关注脚本部分，HTML 就交由用户全权书写了。
分享插件
HTML 结构
支持7种分享，默认的 HTML 结构如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <div class="mh-share-wrap"> 分享到： <a class="mh-share mh-sina" title="新浪微博" href="#sina" data-share="weibo">新浪微博</a> <a class="mh-share mh-weixin" title="朋友圈" href="#weixin" data-share="weixin">微信朋友圈</a> <a class="mh-share mh-tweibo" title="腾讯微博" href="#tweibo" data-share="tweibo">腾讯微博</a> <a class="mh-share mh-qzone" title="QQ空间" href="#qzone" data-share="qzone">QQ空间</a> <a class="mh-share" title="豆瓣" href="#douban" data-share="douban">豆瓣</a> <a class="mh-share" title="人人网" href="#renren" data-share="renren">人人网</a> <div class="mh-weixin-wrap"> <div class="mh-qrCode"></div> <p class="mh-txt">微信“扫一扫”<br/>分享到朋友圈</p> <a class="mh-close" href="#close" target="_self"></a> <i class="mh-arrow"></i> </div> </div>
|
其中，必须的元素是：
- 分享按钮：类名 “mh-share” 和 属性 data-share=”weibo”
- 微信二维码弹层，三个类名：”mh-weixin-wrap”、”mh-qrCode”、”mh-close”
因为分别对应：交互-显隐，二维码img、交互-关闭
脚本
源码见 https://github.com/anjia/plugins/blob/master/obShare.js
如何使用
如上的默认 HTML 结构，以此来说明插件的使用方法
1.直接使用
1 2
| $('.mh-share-wrap').obShare();
|
2.覆盖选项
2.1 覆盖分享的内容
1 2 3 4 5 6 7
| $('.mh-share-wrap').obShare({ content: { title: '【我是分享的标题】', text: '我是分享的内容：内容是静态的，适用于初始化后分享的文案就不再改变的情况', url: 'http://anjia.github.io/' } });
|
2.2 点击分享前，修改分享的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| $('.mh-share-wrap').obShare({ content: { title: '【我是分享的标题】', text: '我是分享的内容', url: 'http://anjia.github.io/' }, before: function(){ return { title: '修改后的标题', text: '修改后的内容：内容是动态的，适用于分享的文案需要实时更新的情况', url: 'http://www.haosou.com', pic: 'http://p3.qhimg.com/t01210f8d5202b3fdc7.jpg' } } });
|
2.3 自定义类名
1 2 3 4 5 6 7 8
| $('.share-wrap').obShare({ selector: { btn: '.btn', wxWrap: '.weixin-wrap', wxQrCode: '.qrCode', wxClose: '.close' } });
|
其对应的 HTML 结构是：
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="share-wrap"> 分享到： <a class="btn" title="新浪微博" href="#sina" data-share="weibo">新浪微博</a> <a class="btn" title="朋友圈" href="#weixin" data-share="weixin">微信朋友圈</a> <a class="btn" title="腾讯微博" href="#tweibo" data-share="tweibo">腾讯微博</a> <a class="btn" title="QQ空间" href="#qzone" data-share="qzone">QQ空间</a> <a class="btn" title="豆瓣" href="#douban" data-share="douban">豆瓣</a> <a class="btn" title="人人网" href="#renren" data-share="renren">人人网</a> <div class="weixin-wrap"> <div class="qrCode"></div> <a class="close" href="#close" target="_self"></a> </div> </div>
|
默认的选项配置
结合上面使用的调用方式，来看看插件里默认的选项配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| var options = { content: { title: '标题', text: '内容', url: '', pic: '' }, before: null, selector: { btn: '.mh-share', wxWrap: '.mh-weixin-wrap', wxQrCode: '.mh-qrCode', wxClose: '.mh-close' }, wxQrCodeSize: 3 };
|