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 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 });

总结

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

不错的参考

segmentfault jQuery 模板

jQuery Biilerplate

 

posted @ 2014-06-26 16:21  凌晨风  阅读(434)  评论(0)  编辑  收藏  举报