Web开发深入理解Bootstrap插件机制

前端开发技术的起源 android前端开发技术论坛 北京招聘前端开发总监

要理Bootstrap的解插件机制,首先要知道他的一些特性。我们打开Bootstrap中文网JavaScript插件这一节,首先就可以看到对bootstrap插件的概览。其中有这么几个特性,单个引入还是全部引入,data属性,编程方式的API,避免命名空间冲突,事件。如果你对这些特性比较了解,一定会对你理解他的插件机制大有裨益的。因为一开始我并没有注意这些特性,而是直接从源码入手,很多都是自己思考的,可以说走了很多弯路。下面我们就看一看一个典型的Bootstrap插件是如何书写的。[code]+function ($) {
‘use strict’;

// SCROLLSPY CLASS DEFINITION
// ==========================

function ScrollSpy(element, options) {
//构造函数
}

ScrollSpy.prototype.getScrollHeight = function () {}

ScrollSpy.prototype.refresh = function () {}

// SCROLLSPY PLUGIN DEFINITION
// ===========================

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data(‘bs.scrollspy’)
var options = typeof option == ‘object’ && option

  if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
  if (typeof option == 'string') data[option]()
})

}

var old = $.fn.scrollspy
$.fn.scrollspy = Plugin
$.fn.scrollspy.Constructor = ScrollSpy

// SCROLLSPY NO CONFLICT
// =====================

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

// SCROLLSPY DATA-API
// ==================

$(window).on(‘load.bs.scrollspy.data-api’, function () {
$(‘[data-spy=”scroll”]’).each(function () {
var $spy = $(this)
Plugin.call($spy, $spy.data())
})
})

}(jquery);
[/code]
这里我们对ScrollSpy进行了简化,只保留了一部分函数。从注释就可以看出,ScrollSpy这个插件包括4个部分,第一部分是ScrollSpy类的定义,第二部分是ScrollSpy插件定义,第三部分是去除命名冲突,第四部分是ScrollSpy的DATA-API。
首先Bootstrap允许对某个插件的单独引用,也可以全部引用。这是因为每个Bootstrap插件都是完整的jquery插件,如上面的代码所示。而Bootstrap.js是所有插件的组合。这样允许我们只加载必要的插件,节省流量。了解了这一特性,你就会知道我们只要对其中一个插件进行讲解,你就可以理解所有的插件机制。下面我们从代码的Plugin部分开始介绍。
Plugin接受一个option参数,这个参数可以是一个对象,也可以是一个字符串。就像官网介绍的使用方式一样,我们可以通过JavaScript代码启动滚动监听插件,如下所示[code]$(‘body’).scrollspy({ target: ‘#navbar-example’ })[/code]我们也可以采用下面的方法来直接调用插件的某一方法[code]var $spy = $(this).scrollspy(‘refresh’)[/code]下面我们就来分析一下Plugin的代码。第一行是return this.each(function(){}),这是什么作用呢?如果去掉each我想你一定明白,就是返回Plugin的调用对象,这样可以实现链式调用。加上each后,其实他还是返回this,因为each本身也是支持链式调用的。那么,这里为甚么要用each呢?这是因为jquery的选择器引擎。jquery的选择器引擎是Sizzle,他可以为你的函数提供多个元素,因此我们要为每个元素执行相同的操作。接着,我们把$(this)对象进行了重命名,这不是必须的,但是会让我们的代码更加清晰。此处$(this)就是我们的插件执行主体,是一个jquery对象。接下来读取了该对象的bs.scrollspy属性,并对传入的option进行了判断,如果是一个对象,就赋值给options属性。接下来的两个if语句,就是插件的关键所在。如果data没有定义,就为该对象的bs.scrollspy属性重新赋值。这里你可以看到,我们是将ScrollSpy的实例直接赋值给了bs.scrollspy属性。这里完成了两个动作,一是实例化ScrollSpy类,二是进行赋值。ScrollSpy类的构造函数中,已经执行了滚动监听的必要函数。因此,我们可以知道ScrollSpy事件已经执行。这就是Bootstrap插件的JavaScript调用机制。传入一个option对象,并对ScrollSpy实例化。注意此处的this[code]data = new ScrollSpy(this, options)[/code],他是一个DOM元素。看到这里,你就可以理解官网上的这句话[code]如果你想获取某个插件的实例,可以直接通过页面元素获取:$(‘[rel=”popover”]’).data(‘popover’)。[/code]data属性存储的插件实例,自然可以通过data()函数获取了。如果仅仅是为了实例化一个ScrollSpy类,我们大可以直接new,但是作者为我们提供了一个简便的获取实例的方法,不得不说这个设计十分巧妙。接下来介绍[code]if (typeof option == ‘string’) data[option]()[/code]这里对输入参数option进行检查,如果是一个字符串,就直接调用ScrollSpy的option方法。就像官网上的介绍的用法[code] 使用滚动监听插件的同时在 DOM 中添加或删除元素后,你需要像下面这样调用此刷新( refresh) 方法
var $spy = $(this).scrollspy(‘refresh’)[/code]插件部分到这里还没有结束,还有最后三行代码[code] var old = $.fn.scrollspy
$.fn.scrollspy = Plugin
$.fn.scrollspy.Constructor = ScrollSpy[/code]前两行明显是为了解决命名冲突的,将原始的$.fn.scrollspy存储在old变量中,并将我们的插件赋值给scrollspy。最后一行代码让我困惑了好久,一开始我以为是继承的写法,但是缺少prototype,而且constructor应该小写才对。后来看了官方文档,每个插件还通过 Constructor 属性暴露了其原始的构造函数:$.fn.ScrollSpy.Constructor。这才豁然大悟,Constructor就是一个普通属性,而不是构造函数,他的作用就是暴露原始构造函数。而且他的用法也十分简单,文档中的用法是这样的[code]每个插件都可以通过修改其自身的Constructor.DEFAULTS 对象从而改变插件的默认设置:
$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 keyboard 默认选参数置为 false[/code]原来Constructor就是为了让我们访问到Scrollspy的一些属性,豁然大悟,和继承没有一点关系。看到这里你就已经完全理解Bootstrap插件中编程方式的API这一特性了。
第三部分比较简单,为了解决命名冲突,noConflict 方法将原始的old变量赋值给$.fn.srollspy变量。比较值得关注的是他的返回值,this。他返回了调用者本身,也就是ScrollSpy插件。这下我们就可以对他进行重新赋值,更改变量的名称。
最后一部分,是插件的DATA-API。官网中如是说[code]你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API,也应该是你的首选方式。[/code]我们就来看看这传说中的一等API是如何工作的,是不是有他说的这么神呢?
代码中函数为window对象注册了load.bs.scrollspy.data-api事件。这一点比较关键,为什么是window对象,而且是load事件呢?这确保了文档加载完毕后就立即执行,而处理函数中的选择器$(‘[data-spy=”scroll”]’)就是我们的DATA-API。仅仅匹配data-spy属性为scroll的元素,并对元素逐一执行Plugin函数。注意Plugin函数的参数, $spy.data()。此处data并没有任何参数,就是读取出$spy对象中的data,并作为option传入Plugin中。最后你可能还会有疑惑,为什么这个load事件的名字起得这么长呢?我们来看看官方的用法你就会明白。[code]话又说回来,在某些情况下可能需要将此功能关闭。因此,我们还提供了关闭 data 属性 API 的方法,即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样:
$(document).off(‘.data-api’)[/code]明白了吧?我们可以通过.data-api命名空间解除文档中所有的具有这一命名空间的事件,而不用逐一解除绑定。我想此刻你已经明白了命名空间bs.scroll的作用。

前端开发招聘介绍 前端技术开发英文缩写 南丰web前端开发招聘

» 本文来自:前端开发者 » 《Web开发深入理解Bootstrap插件机制》
» 本文链接地址:https://www.rokub.com/5516.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!