var dismiss = '[data-dismiss="alert"]'; var Alert = function(el) { //传入元素，如果元素内部有dismiss上设置的自定义属性，则click事件会触发原型上的close方法 $(el).on('click',dismiss,this.close); }; Alert.prototype.close = function(e) { }
3.在jQuery上定义插件并重设插件构造函数，例如$.fn.alert.Constructor=Alert
在jQuery上定义插件，以便通过jQuery.插件名称的方式，也能够使用该插件。
function Plugin(option) { return this.each(function () { var $this = $(this) //获取存储的Alert对象，如果是第一次执行变量data的值为undefined var data = $this.data('bs.alert') //缓存没有，就new一个alert对象，存储在元素的jQuery对象上的‘bs.alert'数据字段 if (!data) $this.data('bs.alert', (data = new Alert(this))) //支持传入方法名参数，执行该方法,这里就是data.close() if (typeof option == 'string') data[option].call($this) }) } //jQuery插件的定义使用了标准的方式，在fn上进行扩展,在jQuery上定义alert插件 //保留其他插件的$.fn.alert代码(如果定义)以便在noConflict之后，可以继续使用改旧代码 //先备份之前插件的旧代码，以便在后面防冲突的时候使用 var old = $.fn.alert $.fn.alert = Plugin //在附加扩展之后，重新设置插件的构造器(即Constructor属性)，这样就可以通过Constructor属性查询到插件的真实类函数，使用new操作符实例化的时候也不会出错 //js区分大小写，所以这里的Constructor只是一个普通属性，跟constructor不同，通过将作用域内的Alert类赋值给jQuery的alert对象的Constructor属性，在IIFE作用域外也可以使用Alert类 $.fn.alert.Constructor = Alert
不声明第三步的话，HTML声明式的方式也是可以用的。所以第三步是专门为某些喜欢用js代码触发事件的人所准备的。需要注意的是，如果第三步不需要，第四步的方冲突的功能也就没办法用了~
4.防冲突处理(noConflict)，例如$.fn.alert.noConflict
目的是让BootStrap插件和其他UI库的同名插件并存。
$.fn.alert.noConflict = function() { //恢复以前的代码 $.fn.alert = old //将$.fn.alert.noConflict()设置为BootStrap的alert插件 return this }
比如A库中有个同名.fn.alert插件，则BootStrap在执行之前就通过old先备份了，然后执行.fn.alert.noConflict后就会还原该old对象插件
而使用BootStrap的alert插件的话，则通过var alert = $.fn.alert.noConflict()的形式，将BootStrap的alert插件转移到另外一个变量上，从而继续使用。
5.绑定各种触发事件(data-api)
由于已经为jQuery提供了默认的$.fn.alert扩展插件功能，就可以手工编写js代码来触发事件了。
这里主要是为声明式的HTML触发事件。即：在HTML文档里已经按照布局规则声明了相关的自定义属性(比如data-dismiss=”alert”)，然后通过这里的代码初始化默认的单击事件行为。
/* ALERT DATA-API 这段JavaScript代码将click委托事件监听器绑定在document元素上，并给click事件赋予命名空间 jQuery将事件绑定在document文档对象上的好处，就是js事件代理的优点 */ $(document).on('click.bs.alert.data-api',dismiss,Alert.prototype.close)
jQuery1.7开始，jQuery引入了全新的事件绑定机制，jQuery .on() 和 off() 两个函数统一处理事件绑定，也是jQuery触发DOM元素事件的最佳方法。有时候既要trigger手动触发事件，也要从DOM元素上解绑事件，比如:
$('.item').on('click', doThisCoolThing); $('.item').on('click', doThisOtherCoolThing); $('.item').trigger('click'); // 两个click事件都触发 $('.item').off('click'); // 两个click事件都解绑
使用事件命名空间我们可以在创建事件的时候指派名称到事件处理器，并在使用trigger()和off()时通过这个名称指定到特定的函数。调用的时候就可以通过使用不同的命名空间灵活的指派事件. 比如：
$('.item').on('click.navigate', doThisCoolThing); $('.item').on('click.notify', doThisOtherCoolThing); $('.item').trigger('click.navigate'); // 只有带有navigate这个命名空间的方法才会触发 $('.item').off('click.notify'); // 只有带有notify这个命名空间的方法才会解绑
也可以使用多个命名空间，无论使用哪个名字都会生效，通过命名空间代码规范（产品.模块.事件）让事件的层次更清晰：
$('.item').on('click.navigate.notify', doThisCoolThing); $('.item').trigger('click.navigate'); // 将触发click事件 $('.item').off('click.notify'); // 将解绑click事件
1.3 插件调用方法(插件使用方式可以是HTML声明式或者调用式)
1.插件可以js代码调用，都提供多种调用方式(无参数传递，传递对象字面量，直接传入一个需要执行的方法名称字符串)
$("#myModal").modal(); $("#myModal").modal({keyboard:false}); $("#myModal").modal('show');
每个插件都有一个Constructor属性，表示原始的构造函数，比如fn.alert.Constructor也可以通过(‘选择器').data(‘bs.插件名称')获取特定插件的实例
2.html声明式就是直接在html中进行声明data-* 自定义属性即可
若想禁用方法