自定义 jQuery 插件

使用过 jquery.tips.js、bootstrap-fileinput 等插件后，思考这些插件时如何实现的呢，于是便有了如下的研究。

Note：仅仅只做基础演示与说明，项目具体内容请查看https://github.com/bascker/bootstrap.table.js

需求

一个 jquery 插件需要有自己的专业职能，如 jquery.tips.js 就负责信息提示，bootstrap-fileinput 是文件控件，负责文件上传的处理，那么我们自己的插件要做什么呢，那就做一个表格处理的功能吧。实现一个 BootStrap 风格的 jQuery 插件，能通过 js 注入表格数据，实现表格的自动生成。

实现

1 项目初始化

新建一个项目 bootstrap.table.js，其目录结构如下：

bootstrap.table.js
|- css                # 存放自定义 css
|- example            # demo
|- js                 # 存放自定义 js
|- lib                # 依赖库

先将依赖库（jquery, bootstrap, font-awesome）放入 lib 目录下，然后在 js 目录下新建一个 bootstrap.table.js 文件，首先加入如下代码：

// $ 是形参, jQuery 是传入给函数的实参
(function ($) {
    // ...
})(jQuery)；

在自实现 jQuery 插件时，一般都使用(function($){})(jQuery) 代码来存放插件代码，相当于执行了var fn = function($){}; fn(jQuery)。这种写法最大的好处在于形成了闭包，从而使得在匿名函数内部定义的函数、变量只有在匿名函数内有效，形成了私有变量/函数的概念。

Note：这实际是 JS 匿名函数的写法，(function(arg){ })(param)

2 代码编写

项目基础设置完毕后，下一步开始添加自己的代码：

$.fn.table = function (option, data) {
    var $tb = this;
    var config = $.extend(true, {}, $.fn.table.defaults, option, {data: data});
    if (!config.columns) {
        throw new Error('Params Error!');
    }

    // ...
    var table = new Table($tb, config);
    table.init();
};

关键代码分析：

  • 其中$.fn.table = function(option, data) {}; 的函数声明就表明了，在调用 table () 函数时，需要传入 2 个参数 option 与 data，其中 option 是我们 bootstrap.table.js 的配置，data 是表格的数据。
  • $.fn 实际上就是 jQuery.prototype
  • 利用 $.extend() 来合并用户输入数据以及自定义数据，形成最后的配置结果
  • table.init() 执行最后表格的自动生成

Note：Table 是自定义类，具体代码查看 https://github.com/bascker/bootstrap.table.js/blob/master/js/bootstrap.table.js

注意 bootstrap.table.js 的默认配置 $.fn.table.defaults 必须在 $.fn.table 声明之后，否则会由于 $.fn.table 尚未定义，从而抛出 Undefined 异常。

调用

当我们将$.fn.table丰富完毕后，就可以在 HTML 中调用了，跟调用普通 jQuery 函数一样即可。
1. 首先在界面中引入依赖库，然后引入bootstrap.table.js
2. 在 HTML 中加入 <table id='tb'></table>标签元素
3. 在<script></script>中直接执行 $('#tb').table()即可

小结

在编写自己的 jQuery 插件时，不仅能够学到许多的知识，而且可以认识到自己的不足，从而去弥补这些漏洞，因此可以尝试去实现一个属于自己的 jQuery 插件，融合自己所学。当然一个真正可用的 jQuery 插件，需要考虑到易用性、可扩展性、性能优化等非功能性需求，而不仅仅是完成基础功能而已。