Question

嗨伙计们！

我正在开发一个客户端项目，我看到自己一遍又一遍地使用相同的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开发人员，所以有很多我可以做得更好的事情，但我现在不知道怎么做。

无论如何，我们非常欢迎任何有关此问题的帮助（以及有关该插件的意见）！

Answer 1

您需要将设置封装在类或闭包中，并为调用插件的每个元素存储它们。

return this.each(function () {

    ...

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

    ...

});

如果你想了解jQuery插件创作，他们在这里有一篇文章http://learn.jquery.com/plugins/basic-plugin-creation/

Answer 2

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;

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

将除最后一个分号以外的所有分号更改为commata。

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

2 个答案: