6.2.1　扩展点探讨

6.2.1　扩展点探讨

在扩展插件之前，再仔细回顾一下Bootstrap所有的JS插件的开发步骤，总共分5步，分别是：定义立即调用的函数表达式、声明组件类函数及原型方法、jQuery的fn插件定义、防冲突处理、DATA-API事件绑定。

利用现有的组件进行扩展，通常意味着重用现有的代码。在JavaScript开发过程中，重用代码一般都是利用原型继承来实现的。关于原型继承，第1章我们已经简单介绍过，如果想进一步了解原型继承，请访问我的以下两篇博客：

❑强大的原型和原型链：http://www.cnblogs.com/TomXu/archive/2012/01/05/2305453.html

❑代码复用模式：http://www.cnblogs.com/TomXu/archive/2012/04/24/2438050.html

了解了原型继承的原理，正当我们跃跃欲试时，却发现利用这种思路扩展Modal插件根本不可行。为什么？就是因为所有的Bootstrap JavaScript插件都是利用立即调用的函数表达式来定义的，所有的组件类和原型方法都在局部作用域里，这就使得我们无法利用现有的Modal类和相关的原型方法。

重新回顾JavaScript插件的架构设计，不管是声明式还是JavaScript调用，所有的对外接口都是通过jQuery来触发的，所以如果想扩展Modal插件，只能在jQuery上找突破口了。

在前面章节对Modal插件进行源码分析时，看到过如下代码：

var data = $this.data('bs.modal') // 获取自定义属性bs.modal的值，也就是Modal插件的实例
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('bs.modal', (data = new Modal(this, options)))

我们讲过，基本上所有的插件在实例化之后，都会将该实例绑定到模板元素的一个自定义属性上，本例中是通过$.data('bs.modal',实例对象）的方式进行设置的，所以在将插件实例化之前，首先要获取该属性实例data对象，如果存在就直接用，如果不存在，就实例化一个新的（紧接着就保存到自定义属性上以便缓存，下次使用）。这就是我们的突破口，也就是说，只要能够知道目标元素，就能获取它的实例。

另外一个扩展点是，原有Modal插件所暴露出来的自定义事件回调（如：show、shown、hide、hidden）。通过结合这两大突破口就可以实现我们在本节所说的Info弹窗和Form弹窗。

另外，所谓扩展，就意味着不能影响原来的功能，也就是说不能影响原来的自定义事件回调、即不能影响原有实例上的原型方法、声明式和JavaScript的用法。

6.2.1 扩展点探讨