1. JavaScript插件架构
如下是插件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.7' 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 === '#' ? [] : 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); //通过将作用域内的Alert类赋值给jQuery的alert对象的Constructor属性，在IIFE作用域外也可以使用Alert类,比如这行代码 var Alert = $.fn.alert.Constructor
BootStrap所有的插件在开发中都遵循了同样的规则，也为自定义插件提供了规范和依据(如下三个规则)：
1.HTML布局规则：基于元素自定义属性的布局规则，比如使用类似于data-target的自定义属性
2.JavaScript实现步骤(所有插件都遵循jQuery插件开发的标准步骤，所有事件保持统一的标准)
3.插件调用方法(插件使用方式可以是HTML声明式或者调用式)
1.1 HTML布局规则
基于元素自定义属性的布局规则，类似于data-* 的自定义属性
默认情况下，所有插件都可以通过设置特定的HTML代码和相应的自定义属性来实现。
在页面加载的时候，js代码会自动检测到这些标记，并自动绑定相应的事件，不需要添加额外的代码。
点击按钮之后就会关闭警告框：
<div> <button type="button" data-dismiss="alert"></button> <strong>警告!</strong>你输入的项目不合法！ </div>
下拉菜单：在button按钮上添加data-toggle=”dropdown”属性，单机按钮时，默认隐藏的dropdown-menu会显示
//例子：下拉菜单.html <div> <button type="button" data-toggle="dropdown"> 我的书籍<span></span> </button> <ul> <li><a href="#">编程</a></li> <li><a href="#">设计</a></li> <li><a href="#">深入</a></li> </ul> </div>
1.2 JavaScript实现步骤(所有插件都遵循jQuery插件开发的标准步骤，所有事件保持统一的标准)
BootStrap中所有JavaScript插件走遵循统一的实现步骤，维护方便，自定义插件也方便，步骤如下：
1.声明立即调用函数，比如+function($){“use strict”;…}(jQuery);
参数中传入jQuery的对象，通过参数引入变量，好处是：1.函数内部的符变量代表了局部变量，而不是全局变量中代表jQuery的符变量，以达到防止变量污染的目的。2.内部的代码都是私有代码，外部代码无法访问。只能通过第三步，在.fn上设置了插件(比如.fn.alert=)的形式，通过符变量才能将整个插件通过唯一的借口$.fn.alert暴露出去，从而保护了内部代码。
//function前边的+，主要目的是防止前面有未正常结束的代码(比如遗漏了分号)，导致前后代码被编译器认为是一体的，从而导致代码运行出错。
+function($){ "use strict"; }(window.jQuery);
2.定义插件类(或者选择器)以及相关原型方法。比如Alert,prototype.close
定义插件类Alert，然后在定义一些原型函数，比如close函数方法。
先定义选择器，所有符合该自定义属性的元素可以触发下面的事件。