首页 > 代码库 > jQuery 插件模板

jQuery 插件模板

1、为每一个DOM对象创建一个插件对象

模板定义:

 1 (function($) { 2  3     $.pluginName = function(element, options) { 4  5         var defaults = { 6             foo: ‘bar‘, 7             onFoo: function() {} 8         } 9 10         var plugin = this;11 12         plugin.settings = {}13 14         var $element = $(element),15              element = element;16 17         plugin.init = function() {18             plugin.settings = $.extend({}, defaults, options);19             // code goes here20         }21 22         plugin.foo_public_method = function() {23             // code goes here24         }25 26         var foo_private_method = function() {27             // code goes here28         }29 30         plugin.init();31 32     }33 34     $.fn.pluginName = function(options) {35         return this.each(function() {36             //为每一个DOM元素创建插件实例37             if (undefined == $(this).data(‘pluginName‘)) {38                 var plugin = new $.pluginName(this, options);39                 $(this).data(‘pluginName‘, plugin);40             }41         });42 43     }44 45 })(jQuery);

模板使用:

 1 $(document).ready(function() { 2  3     // 将插件附加到选择器中的每一个元素(这里通过ID选择器,只有一个元素,下同。) 4     $(‘#element‘).pluginName({‘foo‘: ‘bar‘}); 5  6     // 隐式迭代,选择器中每一个元素都会调用该公共方法 7     $(‘#element‘).data(‘pluginName‘).foo_public_method(); 8  9     //  隐式迭代,访问选择器中每一个元素的属性,返回一个数组10     $(‘#element‘).data(‘pluginName‘).settings.foo;11 12 });
  • 参考链接:http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

2、面向对象的模板,只有一个插件实例

模板定义:

 1 ;(function($) { 2  3     $.pluginName = function(el, options) { 4  5         var defaults = { 6             propertyName: ‘value‘, 7             onSomeEvent: function() {} 8         } 9 10         var plugin = this;11 12         plugin.settings = {}13 14         var init = function() {15             plugin.settings = $.extend({}, defaults, options);16             plugin.el = el;17             // code goes here18         }19 20         plugin.foo_public_method = function() {21             // code goes here22         }23 24         var foo_private_method = function() {25             // code goes here26         }27 28         init();29 30     }31 32 })(jQuery);

模板使用:

 1 $(document).ready(function() { 2  3     // 创建插件实例,并且绑定到$(‘#element‘) 4     var myplugin = new $.pluginName($(‘#element‘)); 5  6     // 调用插件公共方法 7     myplugin.foo_public_method(); 8  9     // 获取公有属性的值10     myplugin.settings.property;11 12 });
  • 参考链接:http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

3、面向对象的模板,充分利用习惯的链式编程

模板定义:

 1 ; (function ($) { 2     //构造函数 3     $.pluginName = function (el, options) { 4  5         var defaults = { 6             propertyName: ‘value‘, 7             onSomeEvent: function () { } 8         } 9 10         var plugin = this;11 12         plugin.settings = {}13 14         var init = function () {15             plugin.settings = $.extend({}, defaults, options);16             plugin.el = el;17             // code goes here18         }19         //①:直接方法定义(模板2就是采用这种方式)20         plugin.foo_public_method = function () {21             //公有方法22             // code goes here23         }24 25         var foo_private_method = function () {26             //私有方法27             // code goes here28         }29 30         init();31 32     }33     //②:原型方法定义(均为公有方法)34     $.pluginName.prototype = {35         method1: function () {36         },37         method2: function () {38         }39     };40 41     //③:原型方法定义 也可以这么写(均为公有方法)42     //$.extend($.pluginName, {43     //    method1: function () {44     //    },45     //    method2: function () {46     //    }47     //});48 49     //在插件中使用50     $.fn.pluginName = function (options) {51         //实例化一个插件实例,通过执行构造函数初始化52         var myPlugin = new $.pluginName(this, options);53         //调用公有业务方法54         myPlugin.method1();55         myPlugin.foo_public_method();56         //返回 this,便于链式调用57         return this;58     }59 60 })(jQuery);

模板使用:

1 $(document).ready(function () {2     //熟悉的链式编程3     $(‘#element‘).pluginName({4         //插件options5     }).css({}).animate({});6 });

4、构造函数提供给外部使用(有点别扭)

模板定义:

 1 ; (function ($) { 2     //构造函数 3     $.pluginName = function (el, options) { 4         //去除构造函数中对插件的初始化,转到$.fn.pluginName中初始化。 5         return $(el).pluginName(options);//该构造函数不是给插件使用,而是给外部调用者使用,需要return以链式编程 6     } 7     //②:原型方法定义(均为公有方法) 8     $.pluginName.prototype = { 9         method1: function (para1, para2) {10         },11         method2: function (para1, para2) {12         }13     };14 15     //③:原型方法定义 也可以这么写(均为公有方法)16     //$.extend($.pluginName, {17     //    method1: function (para1,para2) {18     //    },19     //    method2: function (para1,para2) {20     //    }21     //});22 23     //在插件中使用,不会创建插件实例(构造函数是给外部使用的)24     $.fn.pluginName = function (options) {25         var defaults = {26             propertyName: ‘value‘,27             onSomeEvent: function () { }28         }29 30         var settings = {}31 32         var init = function () {//私有方法33             settings = $.extend({}, defaults, options);34             // code goes here35         }36 37         var foo_private_method = function () {38             //私有方法39             // code goes here40         }41 42         init();43 44         //调用业务方法45         $.pluginName.method1(para1, para2);46         $.pluginName.method2(para1, para2);47 48         //返回 this,便于链式调用49         return this;50     }51 52 })(jQuery);

模板使用:

 1 $(document).ready(function () { 2     //熟悉的链式编程 3     $(‘#element‘).pluginName({ 4         //插件options 5     }).css({}).show({}); 6  7     //构造函数提供该外部使用,所以相当于 8     new $.pluginName($(‘#element‘), { 9         //插件options10     }).css({}).animate({});11 });

总结

正如标题所说的那样,每种模板各有特点,但是最具可读性的还是第三种。当然了,模板只是一个套路,修修改改就又会变成另外一种模板了,上面只是总结了比较常见的模板格式,仅供参考。