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 here
20 }
21
22 plugin.foo_public_method = function() {
23 // code goes here
24 }
25
26 var foo_private_method = function() {
27 // code goes here
28 }
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 });
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 here
18 }
19
20 plugin.foo_public_method = function() {
21 // code goes here
22 }
23
24 var foo_private_method = function() {
25 // code goes here
26 }
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 });
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 here
18 }
19 //①：直接方法定义（模板2就是采用这种方式）
20 plugin.foo_public_method = function () {
21 //公有方法
22 // code goes here
23 }
24
25 var foo_private_method = function () {
26 //私有方法
27 // code goes here
28 }
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 //插件options
5 }).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 here
35 }
36
37 var foo_private_method = function () {
38 //私有方法
39 // code goes here
40 }
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 //插件options
10 }).css({}).animate({});
11 });
总结
正如标题所说的那样，每种模板各有特点，但是最具可读性的还是第三种。当然了，模板只是一个套路，修修改改就又会变成另外一种模板了，上面只是总结了比较常见的模板格式，仅供参考。
jQuery 插件模板
时间： 2024-10-10 04:04:01