2012-10-27 104 views
-1

我正在重写一个插件,使每个主要部分变成methodas per this questionthe jQuery documentation,到目前为止整个事情仍然有效。自定义jQuery插件,但无法找出自定义方法

该插件与初始化:

$('#mySelector').myPlugin({ 
    // want to keep initial options 
    option1: true, 
    option2: 'right' 
    // etc. 
}); 

后来的后来,我想用一个refresh方法:

$('#mySelector').myPlugin('refresh'); 

基本上,我需要 “刷新”,在这个插件做的一切,除了重新应用HTML DOM修改(同时保留所有原始初始化选项)。

我似乎无法弄清楚。我不能仅仅使用methods.binders(var1, var2);,因为我也需要获取变量。但是,init()在第一次初始化时需要methods.html()。当我做我的refresh时,如何跳过那一部分?

也许这很简单,但我现在头痛。

(function ($) { 

    var methods = { 
     defaults : { 
      option1: false, 
      option2: 'left' 
        // etc. 
     }, 
     settings : {}, 
     init : function(options) { 
      methods.settings = $.extend({}, methods.defaults, options); 

      $(this).each(function() { 
       if ($(this).is('[type=radio]')) { 
        var var1 = $(this); 
        var var2 = $('.somethingelse'); 
        // etc. 
        methods.html(var1, var2); 
        methods.binders(var1, var2); 
       }; 
      }); 

     }, 
     refresh : function() { 
      // no idea?? 
     }, 
     html : function(var1, var2) { 
      // various HTML DOM manipulations 
     }, 
     binders : function(var1, var2) { 
      // binding various events, hover, click, etc. 
      // assigns classes 
     } 
    }; 

    $.fn.myPlugin = function(method) { 
     if (methods[method]) { 
      return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || ! method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.myPlugin'); 
     } 
    }; 

})(jQuery); 

回答

1

继移动的大部分代码从methods.init的功能doInit()可以在两个methods.initmethods.refresh与论据initType和条件内被调用来调用一些代码init但不refresh

(function($) {  

    var methods = {  
     /* see answer edit about moving this out of here*/   
     defaults: { 
      option1: false, 
      option2: 'left' 
      // etc. 
     }, 
     settings: {}, 
     init: function(options) { 
      /* see answer edit about moving this out of here*/ 
      methods.settings = $.extend({}, methods.defaults, options); 
      doInit(this, 'init', methods); 

     }, 
     refresh: function() { 
      doInit(this, 'refresh', methods); 
     }, 
     html: function(var1, var2) { 
      // various HTML DOM manipulations 
     }, 
     binders: function(var1, var2) { 
      // binding various events, hover, click, etc. 
      // assigns classes 
     } 
    }; 

    function doInit(el, initType, methods) { 
     $(el).each(function() { 
      if ($(this).is('[type=radio]')) { 
       var var1 = $(this); 
       var var2 = $('.somethingelse'); 
       // etc. 
       methods.html(var1, var2); 
       if (initType == 'init') { 
        methods.binders(var1, var2); 
       } 
      }; 
     }); 
    } 

    $.fn.myPlugin = function(method) { 
     if (methods[method]) { 
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof method === 'object' || !method) { 
      return methods.init.apply(this, arguments); 
     } else { 
      $.error('Method ' + method + ' does not exist on jQuery.myPlugin'); 
     } 
    }; 

})(jQuery); 

可能不是缺陷,但想法应该让你去

编辑:实现我忘了做设置更全球化。一种方法是从methods删除默认值及创建

var defaults={ /* ..... */}; 
$.fn.myPlugin.defaults=$.extend({},defaults, options); 

现在,您可以访问用户定义的设置,当你做了刷新。另一个非常有用的补充是将设置存储在jQuery DOM数据中,如:

+0

谢谢。我要恢复一两天,仔细看看这个。同时+1。 – Sparky