吾爱源码
首页 > 站长学院 > 网络编程 > Bootstrap整体框架之JavaScript插件架构

Bootstrap整体框架之JavaScript插件架构

作者:佚名 来源:吾爱源码 2017-01-11 12:57:48

本文实例为大家介绍了JavaScript插件架构的知识点,供大家参考,具体内容如下

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 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上设置了插件(比如.fn.alert=)的形式,通过符变量才能将整个插件通过唯一的借口$.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 () {
 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代码
  • 热门软件
  • 热门标签
返回顶部