Javascript 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插件的最佳实践，我甚至读了一些关于的东西，这看起来很棒，但我不是一个高级javascript开发人员，所以有很多事情我可以做得更好，但我现在不知道怎么做

无论如何，任何关于这个问题的帮助（以及关于插件的意见）都是非常受欢迎的！
您需要将您的设置封装在一个类或闭包中，并为调用插件的每个元素存储它们

return this.each(function () {

    ...

    $(this).data('some-key', settings);

    ...

});

如果您想了解jQuery插件创作，这里有一篇关于它的文章

在这里之前，你做的都是正确的

然后，您引入了一个分号-这导致进一步的赋值（
canvasOn
，
canvas
和
time
）不再是其中的一部分。它们不是变量声明，您在这里赋值给全局变量-这样您就覆盖了第一个插件实例的设置

将除最后一个分号外的所有分号都改为逗号。
谢谢，@Bergi！我现在感觉很傻！问题不在于代码，而是我没有注意到，如此简单的细节在我匆忙中我没有看到。感谢你澄清这个问题及其结果！感谢你的建议，以及关于jQuery创作的这篇文章的提示！Howe@Bergi的答案更简单，并指出了我的代码中的错误！
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;