Question

我有一个子菜单的工作javascript解决方案，其中子菜单容器不是链接容器的子项或兄弟。我只是想尝试原型模式。所以我试图将已经运行的代码转换为原型模式以获得更易读的代码，而我目前正在失败。我在控制台中没有错误，但代码不起作用。

jQuery(document).ready(function ($) {
   function tg_dropdown(element) {
      this.element = element;
      this.mainNavigation = $('#top-menu');
      this.dropdownLink = this.mainNavigation.find('.has_dropdown');
      this.bindEvents();
}

tg_dropdown.prototype.bindEvents = function() {
    var $tg_megamenu__link = $('.tg-megamenu__link'),
        self = this;
    $tg_megamenu__link.mouseenter(function(event) {
        self.showDropdown();
    }).mouseleave(function() {
        setTimeout( function () {
        if ($('#top-menu').find('.has-dropdown:hover').length == 0 && $('#main-header').find('.tg-submenu:hover').length == 0)
         self.hideDropdown();
    }, 50);
    })
};

tg_dropdown.prototype.showDropdown = function () {
    $('body').addClass('test');
};

tg_dropdown.prototype.hideDropdown = function () {
    $('body').removeClass('test');
}
});

我可能会监督原型模式的一些基本基础知识。有人可以指导我采用正确的方法让这件事有效吗？

Answer 1

您所写的是告诉JS引擎为tg_dropdown函数创建一个内存空间，因此它不会调用该函数。

function tg_dropdown(element) {
  this.element = element;
  this.mainNavigation = $('#top-menu');
  this.dropdownLink = this.mainNavigation.find('.has_dropdown');
  this.bindEvents();
}

您可以使用new创建tg_dropdown对象。

希望这会有所帮助：）

理解object.prototype模式

1 个答案: