最近在给自己的动力学模拟程序写个web界面,目前采用了bootstrap + flask的组合, 看了下bootstrap的一些组件样式和内置的插件的使用,在实现自己的网站的时候肯定会有自己的需求,于是需要开发或者扩展Bootstrap插件,这里就总结下开发Bootstrap插件的步骤。

Bootstrap插件本质上就是一个jQuery插件,除了将插件函数绑定到jQuery的原型对象上以外,Bootstrap还需要遵守一些其他的额外的步骤方便维护和学习等。

Bootstrap的JS插件的实现步骤

1. 声明立即调用函数

这个就和开发jQuery插件相同,是为了在文档加载完之后执行回调函数, 类似

1
2
3
$(document).ready(function() {
// ...
});

或者

1
2
3
$(function() {
// ...
});

但是为了避免与其他库的命名冲突,Bootstrap里统一使用这种方式:

1
2
3
4
;(function($) {
"use restrict";
// ...
})(jQuery)

2. 定义插件核心类以及相关的原型方法

通过定义插件类,我们能够将选择器获取的元素以及操作元素的接口都封装到类中。这样Bootstrap插件实际上都是核心类的原型方法的调用。

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

这一步是在上一步已经定义好操作jQuery对象的接口的基础上的,我们定义一个jQuery插件(就是一个js函数绑定到jQuery原型jQuery.fn上)。执行这个插件的过程就是将第2步插件类实例化并绑定到相应元素和判断执行相应原型方法的过程。

4. 防冲突处理

毕竟是自定义插件,难免有可能会与空间中定义好的其他插件重名造成冲突,这个时候我们需要写一个函数可以将插件的名称还给原始的插件。这部分比较固定,一般是这样处理:

1
2
3
4
5
6
7
8
9
10
// 例如我的插件名叫form_status
// 将初始的插件先保存下来
var old = $.fn.form_status
// 定义一个放冲突函数,可以将原始的插件对象归还回来
$.fn.form_status.noConflict = function() {
$.fn.form_status = old;
return this;
};

5. 绑定触发事件

在前面4步以后已经可以通过js直接调用插件实现相应效果,这里的事件绑定主要是针对Bootstrap的HTML声明式的事件触发。

插件开发实例

这里我就以一个简单用于我自己web应用的一个现实表单状态现实的Bootstrap插件的开发为例子说明下。

  1. 声明立即调用函数

    1
    2
    3
    ; (function($){
    "use restrict";
    })(window.jQuery);
  2. 定义插件类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* Define FormStatus class */
    var FormStatus = function (element) {
    this.$element = $(element);
    };
    FormStatus.DEFAULTS = {
    show: true,
    status: 'error',
    msg: 'Error!'
    };

    这里主要是定义类构造函数,已经类属性用于存放默认参数。属性中包含相应的元素的jQuery对象,可以在原型方法中方便的操作相应的元素.

    然后我们需要定义用于操作绑定元素的接口:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Prototype methods.
    FormStatus.prototype.show = function(option) {
    var wrapper = '<div class="form-group has-' + option.status + '"></div>';
    this.$element.wrap(wrapper);
    var msg_element = '<label class="control-label">' + option.msg + '</label>';
    this.$element.before(msg_element);
    };
    FormStatus.prototype.remove = function(option) {
    if (this.$element.parent('form-group')) {
    this.$element.unwrap();
    }
    this.$element.prev('label.control-label').remove();
    };
  3. 创建form_status jQuery插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // New jQuery plugin.
    var old = $.fn.form_status;
    $.fn.form_status = function(option) {
    return this.each(function() {
    var $this = $(this);
    var data = $this.data('bs.form_status');
    // Merge options.
    var options = $.extend({}, FormStatus.DEFAULTS, option);
    // Bind FormStatus instance to element.
    if (!data) {
    $this.data('bs.form_status', (data = new FormStatus(this)));
    }
    // Call corresponding prototype methods.
    if (options.remove) {
    data.remove(options);
    } else if (options.show) {
    data.show(options);
    }
    });
    };
    $.fn.form_status.Constructor = FormStatus;

    可以见到我们将插件类的实例绑定到了元素的bs.form_status属性中,当我们调用$(selector).form_status(options)的时候便会根据传入的参数选择调用原型方法。

  4. 防冲突处理

    1
    2
    3
    4
    5
    // No conflict.
    $.fn.form_status.noConflict = function (){
    $.fn.form_status = old;
    return this;
    };
  5. 触发事件绑定
    由于我不是很喜欢HTML声明式调用,于是我就没有写相应的绑定事件,绑定会在js中单独编写就好了。

总结

以上就是开发一个Bootstrap插件的过程。主要是如何编写插件类已经绑定jQuery插件,插件类是为了封装操作接口,jQuery插件用于调用接口操作元素对象。我自己开发的代码都放在GitHub上:https://github.com/PytLab/kynetix-webapp

Comments