jQuery自定义插件-为多个实例设置私有选项

大家好

我目前正在开发一个客户端项目，我看到自己一遍又一遍地执行相同的javascript代码。因此，我认为将逻辑封装在自定义jQuery插件中会很有用。我已经为插件的单个实例实现了这一点，但对于多个实例，我认为我遇到了每个实例的属性相互覆盖的问题。

好吧，让我们开始密码吧！以下是我目前拥有的插件代码：

// RESPONSIVE MENU ===========================//
// wrapper for a responsive menu plugin,      //
// made by Favolla Comunicação                //
//============================================//
/* INSTRUCTIONS
 Apply the plugin on the main wrapper of the responsive menu. For example:
 $(#menu).responsiveMenu($(#trigger));
 The plugin just toggles the classes, leaving the effects and layout for the css
 CONFIG
 - trigger: the selector of the button that will activate the menu (required)
 - activeClass: class name to be injectet when the toggle is activated (default: active)
 - submenuTrigger: the selector of the buttons that will activate the submenus, if the menu will have another levels (default: $('sub-toggle'))
 - submenu: the selector of the submenus (default: $('.submenu'))
 - submenuActiveClass: class name to be injected on the submenus when they are activated (default: open)
 - breakpoint: max window whidth where the plugin will work (default: 720)
 - timeOut: time in milissegundos to limite the onResize repeat. (default: 100)
 - moveCanvas: option to activate the "off canvas" pattern or not (just puts a class on the main elements of the page). (default: false)
 - canvas: class name of the elements that build the "canvas" (default: null)
*/
;(function ( $, window, document, undefined ) {
  $.fn.responsiveMenu = function(settings){
     var config = {
          'trigger': '',
          'activeClass': 'active',
          'submenuTrigger': $('.sub-toggle'),
          'submenu': false,
          'submenuActiveClass': 'open',
          'breakpoint': 720,
          'timeOut': 100,
          'moveCanvas': false,
          'canvas': '',
      };
      if (settings){$.extend(config, settings);}
      // plugin variables
      var mTrigger,
          menu = $(this),
          active = config.activeClass,
          button = config.trigger,
          bpoint = config.breakpoint,
          submTrigger = config.submenuTrigger,
          submenu = config.submenu,
          submenuActive = config.submenuActiveClass;
          canvasOn = config.moveCanvas;
          canvas = config.canvas;
          time = config.timeOut;
    return this.each(function () {
      if($(window).width() > bpoint){
        mTrigger = false;
      } else {
        mTrigger = true;
      }
      onChange = function(){
        clearTimeout(resizeTimer);
        var resizeTimer = setTimeout(function(){
          if($(window).width() > bpoint){
            mTrigger = false;
            menu.removeClass(active);
            button.removeClass(active);
            if(canvasOn){
              canvas.removeClass(active);
            }
          } else {
            mTrigger = true;
          }
        }, time);
      }
      $(window).bind('resize',onChange);
      $(document).ready(onChange);
      button.click(function(){
        if(mTrigger) {
          menu.toggleClass(active);
          button.toggleClass(active);
          if(canvasOn){
            canvas.toggleClass(active);
          }
        }
      });
      if(submenu){
        var submenuClass = '.' + submenu.prop('class');
        // toggle for the submenus
        submTrigger.click(function(){
          if(mTrigger) {
            if($(this).hasClass(active)){
              submTrigger.removeClass(active);
              submenu.removeClass(submenuActive);
            } else {
              submTrigger.removeClass(active);
              $(this).addClass(active);
              submenu.removeClass(submenuActive);
              $(this).next(submenuClass).addClass(submenuActive);
            }
          }
        }); 
      }
    });
  }
})( jQuery, window, document );

然后，当我想应用插件时，我会这样做：

  $('#menu-wrapper').responsiveMenu({
    trigger: $('#nav-toggle'),
    submenu: $('.submenu'),
    submenuTrigger: $('.submenu-toggle'),
    moveCanvas: true,
    canvas: $('.canvas'),
    breakpoint: 862
  });
  $('#search').responsiveMenu({
    trigger: $('#search-toggle'),
    breakpoint: 862
  });

这里的主要问题是，当我设置为responsiveMenu();的实例时，似乎有些选项被覆盖了。例如，第一个实例将moveCanvas设置为true，它可以工作，但当我为第二个实例保留它为空时（这使该元素的moveCanvas选项设置为false，则第一个实例的此选项不再工作。

我知道也许我没有遵循jQuery插件的最佳实践，我甚至读过一些关于jQuery Boilerplate的文章，它看起来很棒，但我不是一个高级的javascript开发人员，所以有很多事情我可以做得更好，但我现在不知道该怎么做。

无论如何，任何关于这个问题的帮助（以及关于插件的意见）都将非常受欢迎！