javascript - 函数在 js 原型(prototype)中不起作用

Question

我开发了一个具有原型(prototype)继承的 jQuery 插件。但是函数仅适用于主 init() 函数，其他原型(prototype)不起作用。

我的主要功能是

function Mynav(){
  ....
}

Mynav.prototype.linkBehaviour = function(){
     $('.nav-menu li a').on('click', function(e) {
         if ($(this).attr('href') !== '#') {
            var link = $(this).attr('href');
            $('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
            setTimeout(function() {
                 window.location = link;
            }, 1500)
         } else if ($(this).attr('href') == '#') {
              e.preventDefault();
         }
    });
}

Mynav.prototype.verticalConverter = function(){
     if (verticalNavOn) {

       if(!verticalLive){
          menuConverter();
          verticalLive = true;
        }

     }
     $(window).on('load resize', function(){
         width = $(window).width();
         if(width < 959){
            if(!verticalLive){
               menuConverter();   //This is a function also available with Mynav.prototype.menuConverter
               header.removeAttr('style');
               verticalLive = true;
            }
         } else{
             convertHorizontal();  // Its also a function available
             $('.header-fixed').attr('style',headerAttr);
              verticalLive = false;
         }
      });
}


function init(){
   new Mynav();
}

init();

在上面的代码中，如果我将 linkBehaviour 函数放在主 Mynav() 中，linkBehaviour 和 verticalconverter 将不起作用。 code> 它可以工作，但不能单独工作。我实际上不知道 load/resize 是否适用于原型(prototype)。任何人都可以帮助了解以上两个功能吗？

Answer 1

function Mynav(){

  this.verticalNavOn = false;

}

Mynav.prototype.linkBehaviour = function(){
     $('.nav-menu li a').on('click', function(e) {
         if ($(this).attr('href') !== '#') {
            var link = $(this).attr('href');
            $('#preloader').removeClass('fadeOut').addClass('fadeIn').fadeIn('slow');
            setTimeout(function() {
                 window.location = link;
            }, 1500)
         } else if ($(this).attr('href') == '#') {
              e.preventDefault();
         }
    });
}

/* --------------------------------------------------------------------------------------------------------
*   I believe that is in trouble when the RESIZE happens.
*
*   To make the BIND (on), you must pass the own plugin AHEAD. To be used in the event when it happens.
* --------------------------------------------------------------------------------------------------------
*/
Mynav.prototype.verticalConverter = function(){
    var self = this;

     if (self.verticalNavOn) {
       if(!self.verticalLive){
          self.menuConverter();
          self.verticalLive = true;
        }
     }

     // parse THIS plugin for EVENT
     $(window).on('load resize', {self: self}, function(e){

         // get SELF PLUGIN
         var self = e.data['self'];

         width = $(window).width();
         if(width < 959){
            if(!self.verticalLive){
               self.menuConverter();   //This is a function also available with Mynav.prototype.menuConverter
               header.removeAttr('style');
               self.verticalLive = true;
            }
         } else{
             self.convertHorizontal();  // Its also a function available
             $('.header-fixed').attr('style',headerAttr);
              self.verticalLive = false;
         }
      });
}


function init(){
   var x = new Mynav();

   // focing start function for tests
   x.verticalConverter();
}

init();

查看 HTML 和 JS 的完整更改:http://jsbin.com/ricaluredi/3