bootstrap:javascript插件架构

bootstrap中所有的架构都遵循相同的规则，对用户自定义插件提供了规范和基础。总体有下面三种规范：

1.HTML布局规则：

基于元素自定义属性的定义规则，比如data-target的自定义属性，所有插件都可以通过设定的html代码和相应的属性来试验。也就是说当网页加载的时候，javascript代码会自动检测这些标记。并自动绑定相应事件，无需额外的javascript代码。
如下在单击button时，就会关闭警告框。

<div class="alert">
<span style="white-space:pre">	</span><button type="button" class="close" data-dismiss="alert"></button>
<strong>您输入的不合法！</strong>
</div>

注意使用data-toggle='tab'时，href='#home'所实现的功能，data-target也能实现，javascript先默认检测data-target，检测不到在检测href。如果还没有，则默认是其父元素。

2.javascript实现步骤：

所有插件都遵循jquery插件的开发标准步骤，所有事件保持了统一标准。



1.声明的立即调用函数，在参数中传入jquery插件，通过引入$变量，这样可以直接使用$.，这样做的好处是：第一，传入的$变量代表的是局部变量不是全局变量，可以达到防止变量污染的目的。第二，内部的代码是私有的，外部无法访问，只能通过唯一暴露的接口$.fn.alert=的形式，通过$才能访问，从而保护了内部代码。写入+的目的，是防止不规范代码，通常是遗漏了分号，导致编译器认为前后是一体的从而导致出错。

2.声明函数的原型。

3.举例alert组件，each里面根据选择器，遍历所有符合选择的元素，然后绑定到插件的实例，监控用户的行为。
最后constructor处，是在添加附近扩展后，重新设置插件的构造器为内部定义的类函数本身，这样就可以通过Constructor属性，查询到插件的真实类函数，使用new操作实例化$.fn.alert的时候也不会出错。

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data  = $this.data('bs.alert')

if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
//保留其他插件在$.fn.alert上的定义，首先备份其他的旧代码
var old = $.fn.alert
$.fn.alert             = Plugin
$.fn.alert.Constructor = Alert

4.是让bootstrap的插件和其他UI的同名插件共存。bootstrap里所有的插件都支持防冲突功能。，bootstrap在执行前就已经先备份一次了，当执行完下部函数后，就恢复成原来的了。

$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
}

5.绑定默认的触发事件。绑定data-api的主要是为了声明式的html触发事件。就是已经在html里面绑定好的自定义属性，通过这里的代码初始化默认的单击事件。



下面添加alert源码：

+function ($) {
'use strict';

// ALERT CLASS DEFINITION
// ======================

var dismiss = '[data-dismiss="alert"]'
var Alert   = function (el) {
$(el).on('click', dismiss, this.close)
}

Alert.VERSION = '3.3.5'

Alert.TRANSITION_DURATION = 150

Alert.prototype.close = function (e) {
var $this    = $(this)
var selector = $this.attr('data-target')

if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}

var $parent = $(selector)

if (e) e.preventDefault()

if (!$parent.length) {
$parent = $this.closest('.alert')
}

$parent.trigger(e = $.Event('close.bs.alert'))

if (e.isDefaultPrevented()) return

$parent.removeClass('in')

function removeElement() {
// detach from parent, fire event then clean up data
$parent.detach().trigger('closed.bs.alert').remove()
}

$.support.transition && $parent.hasClass('fade') ?
$parent
.one('bsTransitionEnd', removeElement)
.emulateTransitionEnd(Alert.TRANSITION_DURATION) :
removeElement()
}

// ALERT PLUGIN DEFINITION
// =======================

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data  = $this.data('bs.alert')

if (!data) $this.data('bs.alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}

var old = $.fn.alert

$.fn.alert             = Plugin
$.fn.alert.Constructor = Alert

// ALERT NO CONFLICT
// =================

$.fn.alert.noConflict = function () {
$.fn.alert = old
return this
}

// ALERT DATA-API
// ==============

$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

}(jQuery);

3.插件调用方法：

所有插件的使用方法都非常类似，可以是html声明，也可以是javascript调用，并且支持回调和可选参数