jQuery 插件模板

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

模板定义：

 (function($) {

     $.pluginName = function(element, options) {

         var defaults = {
             foo: 'bar',
             onFoo: function() {}
         }

         var plugin = this;

         plugin.settings = {}

         var $element = $(element),
              element = element;

         plugin.init = function() {
             plugin.settings = $.extend({}, defaults, options);
             // code goes here
         }

         plugin.foo_public_method = function() {
             // code goes here
         }

         var foo_private_method = function() {
             // code goes here
         }

         plugin.init();

     }

     $.fn.pluginName = function(options) {
         return this.each(function() {
             //为每一个DOM元素创建插件实例
             if (undefined == $(this).data('pluginName')) {
                 var plugin = new $.pluginName(this, options);
                 $(this).data('pluginName', plugin);
             }
         });

     }

 })(jQuery);

模板使用：

 $(document).ready(function() {

     // 将插件附加到选择器中的每一个元素（这里通过ID选择器，只有一个元素，下同。）
     $('#element').pluginName({'foo': 'bar'});

     // 隐式迭代，选择器中每一个元素都会调用该公共方法
     $('#element').data('pluginName').foo_public_method();

     //  隐式迭代，访问选择器中每一个元素的属性，返回一个数组
     $('#element').data('pluginName').settings.foo;

 });

• 参考链接：http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

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

模板定义：

 ;(function($) {

     $.pluginName = function(el, options) {

         var defaults = {
             propertyName: 'value',
             onSomeEvent: function() {}
         }

         var plugin = this;

         plugin.settings = {}

         var init = function() {
             plugin.settings = $.extend({}, defaults, options);
             plugin.el = el;
             // code goes here
         }

         plugin.foo_public_method = function() {
             // code goes here
         }

         var foo_private_method = function() {
             // code goes here
         }

         init();

     }

 })(jQuery);

模板使用：

 $(document).ready(function() {

     // 创建插件实例，并且绑定到$('#element')
     var myplugin = new $.pluginName($('#element'));

     // 调用插件公共方法
     myplugin.foo_public_method();

     // 获取公有属性的值
     myplugin.settings.property;

 });

• 参考链接：http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

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

模板定义：

 ; (function ($) {
     //构造函数
     $.pluginName = function (el, options) {

         var defaults = {
             propertyName: 'value',
             onSomeEvent: function () { }
         }

         var plugin = this;

         plugin.settings = {}

         var init = function () {
             plugin.settings = $.extend({}, defaults, options);
             plugin.el = el;
             // code goes here
         }
         //①：直接方法定义（模板2就是采用这种方式）
         plugin.foo_public_method = function () {
             //公有方法
             // code goes here
         }

         var foo_private_method = function () {
             //私有方法
             // code goes here
         }

         init();

     }
     //②：原型方法定义（均为公有方法）
     $.pluginName.prototype = {
         method1: function () {
         },
         method2: function () {
         }
     };

     //③：原型方法定义 也可以这么写（均为公有方法）
     //$.extend($.pluginName, {
     //    method1: function () {
     //    },
     //    method2: function () {
     //    }
     //});

     //在插件中使用
     $.fn.pluginName = function (options) {
         //实例化一个插件实例，通过执行构造函数初始化
         var myPlugin = new $.pluginName(this, options);
         //调用公有业务方法
         myPlugin.method1();
         myPlugin.foo_public_method();
         //返回 this，便于链式调用
         return this;
     }

 })(jQuery);

模板使用：

 $(document).ready(function () {
     //熟悉的链式编程
     $('#element').pluginName({
         //插件options
     }).css({}).animate({});
 });

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

模板定义：

 ; (function ($) {
     //构造函数
     $.pluginName = function (el, options) {
         //去除构造函数中对插件的初始化，转到$.fn.pluginName中初始化。
         return $(el).pluginName(options);//该构造函数不是给插件使用，而是给外部调用者使用,需要return以链式编程
     }
     //②：原型方法定义（均为公有方法）
     $.pluginName.prototype = {
         method1: function (para1, para2) {
         },
         method2: function (para1, para2) {
         }
     };

     //③：原型方法定义 也可以这么写（均为公有方法）
     //$.extend($.pluginName, {
     //    method1: function (para1,para2) {
     //    },
     //    method2: function (para1,para2) {
     //    }
     //});

     //在插件中使用，不会创建插件实例（构造函数是给外部使用的）
     $.fn.pluginName = function (options) {
         var defaults = {
             propertyName: 'value',
             onSomeEvent: function () { }
         }

         var settings = {}

         var init = function () {//私有方法
             settings = $.extend({}, defaults, options);
             // code goes here
         }

         var foo_private_method = function () {
             //私有方法
             // code goes here
         }

         init();

         //调用业务方法
         $.pluginName.method1(para1, para2);
         $.pluginName.method2(para1, para2);

         //返回 this，便于链式调用
         return this;
     }

 })(jQuery);

模板使用：

 $(document).ready(function () {
     //熟悉的链式编程
     $('#element').pluginName({
         //插件options
     }).css({}).show({});

     //构造函数提供该外部使用，所以相当于
     new $.pluginName($('#element'), {
         //插件options
     }).css({}).animate({});
 });

总结

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

不错的参考

segmentfault jQuery 模板

jQuery Biilerplate