教你制作自己的 jQuery Plugin
时间:2015-01-07 17:07 来源: 我爱IT技术网 作者:山风
制作自己的 jQuery Plugin
写了一阵子 jQuery 之后，可能会发现自己时常用到某些功能或结构。
这时候不妨花一点时间将这些源程序整理成一个 plugin，不只在未来开发时自己可以使用以提升开发效率，也可以分享给同事，甚至上传到网络社群上分享给全世界的人。
所谓的 jQuery plugin 指的是，将用 jquery 开发的某个功能的程序封装起来，以供重复使用。
以下介绍如何自制 jQuery plugin。
Plugin 命名
取一个自己高兴的名字，不过当然最好是能够看的出来 plugin 功能的名称。建议格式为 jquery.[自定义的 plugin 名称].js。
如，jquery.foobar.js。
自定义方法
扩充 jQuery 对象，建立一个或多个 plugin 方法 (method)，如：
Create one or more plugin methods by extending the jQuery object, eg.:jQuery.fn.foobar = function() {// do something};
建立以上的方法后，我们将可以这样存取这个方法：
$(...).foobar();
默认设置
建立一些可让用户自定义的默认设置：
jQuery.fn.foobar = function(options) {var settings = jQuery.extend({value: 5, name: "pete", bar: 655}, options);};
我们将可以不做任何设置 (使用默认值) 来调用这个方法：
$("...").foobar();
或者可以设置 value、name、bar 这三个选项中任意个的值：
$("...").foobar({ value: 123, bar: 9 });
文件
如果打算将自己做的 plugin 发布出去给别人使用，最好可以提供一些使用例子和说明文件，这样可以帮助别人理解 plugin 的功能与用法。
实例
举一个 checkbox 的例子。
我们在做表单时，时常会使用到 checkbox 或 radio button，然后我们可能会希望在某个事件发生时，其可以被选取或者被不选取。
先将这个例子简化，假设我们要做一个可以选取 checkbox 的 plugin：
jQuery.fn.check = function() {return this.each(function() {this.checked = true;});};
注意上例中的 this 指的是所选取的元素 (element)，此 plugin 可以这样使用：
$(":checkbox").check();
这时候 this 所指的就是文件中所有 checkbox。
接着我们利用上面这个 plugin 来延伸出反选取和切换选取的功能(选取切换成未选取，以及反之)。
jQuery.fn.check = function(mode) {// 如果没有传入 mode 参数，则默认使用 onvar mode = mode || 'on';return this.each(function() {switch(mode) {case 'on':this.checked = true;break;case 'off':this.checked = false;break;case 'toggle':this.checked = !this.checked;break;}});};
用法如下：
$(":checkbox").check();$(":checkbox").check('on');$(":checkbox").check('off');$(":checkbox").check('toggle');
当然上述都是很简单的例子，因此可能看不出制作成 plugin 的好处，但是较为复杂却常用的功能，只要多花一点点时间改写为 plugin，就可以节省很多重复开发的时间了。
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-