jQuery上定义插件并重设插件构造函数

插件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 class="alert"> <button type="button" class="close" data-dismiss="alert"></button> <strong>警告!</strong>你输入的项目不合法！ </div>

下拉菜单：在button按钮上添加data-toggle=”dropdown”属性，单机按钮时，默认隐藏的dropdown-menu会显示

//例子：下拉菜单.html <div class="btn-group"> <button type="button" class="btn btn-default" data-toggle="dropdown"> 我的书籍<span class="caret"></span> </button> <ul class="dropdown-menu"> <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上设置了插件(比如 . n . a l e r t = ) 的 形 式 ， 通 过 符变量才能将整个插件通过唯一的借口$.fn.alert暴露出去，从而保护了内部代码。 //function前边的+，主要目的是防止前面有未正常结束的代码(比如遗漏了分号)，导致前后代码被编译器认为是一体的，从而导致代码运行出错。 +function($){ "use strict"; }(window.jQuery);

2.定义插件类(或者选择器)以及相关原型方法。比如Alert,prototype.close

定义插件类Alert，然后在定义一些原型函数，比如close函数方法。 
先定义选择器，所有符合该自定义属性的元素可以触发下面的事件。 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 (2881064151) { 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库中有个同名 . n . a l e r t 插 件 ， 则 B o o t t r a p 在 执 行 之 前 就 通 过 o l 先 备 份 了 ， 然 后 执 行

.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) 命名空间的话好处： 
http://suqing.iteye.com/blog/1533123 1.3 插件调用方法(插件使用方式可以是HTML声明式或者调用式)

1.插件可以js代码调用，都提供多种调用方式(无参数传递，传递对象字面量，直接传入一个需要执行的方法名称字符串)

$("#myModal").modal(); $("#myModal").modal({keyboard:false}); $("#myModal").modal('show');

每个插件都有一个Constructor属性，表示原始的构造函数，比如 n . a l e r t . o n s t r u c t o r 也 可 以 通 过

(‘选择器’).data(‘bs.插件名称’)获取特定插件的实例

2.html声明式就是直接在html中进行声明data-* 自定义属性即可

若想禁用方法

//命名空间为data-api的全部事件禁用 $(document).off('.data-api'); //禁用特定插件的默认行为，禁用该插件所在命名空间下事件即可 $(document).off('.alert.data-api'); //禁用该alert插件的click事件 $(document).off('click.alert.data-api');