如何将JQuery设置为对象文字模块？

Question

I'm working on understanding the Object Literal design pattern in JS with JQuery. I have the code separated into different modules to lower the number of time the DOM has to be searched and be extendable. The problem is i don't know how to get the code to actually work. I understand why it's separated such as caching the Dom, binding events, and rendering the action of the slideToggle but the trouble is I don't fully understand how to apply the function to the event correctly.

The code I'm transferring from JQuery is as follows:

$(document).ready(function() {
  $('#menu-button').click(
    function(){
        $('#menu').slideToggle(400);
    }
  );
  $('.dropdown').click(
    function(){
        $('.dropdown-content').slideToggle(500);
    }
  );
});

The Object Literal Module I'm transferring this to is as follows:

(function() {
  var menu = {
    init: function() {
        this.cacheDom();
        this.bindEvents();
        this.action();
    },
    cacheDom: function() {
        this.$el = $('nav');
        this.$menu = this.$el.find('#menu');
        this.$menuButton = this.$el.find('#menu-button');
        this.$dropdown = this.$el.find('.dropdown');
        this.$dropdownContent = this.$el.find('.dropdown-content');
    },
    bindEvents: function() {
        this.$menuButton.on('click', this.slideToggle.bind(this));
        this.$dropdownContent.on('click', this.slideToggle.bind(this));
    },
    action: function() {
        this.slideToggle();
    },
  }
  menu.init();
})()

Any help would be greatly appreciated. Thank you.

Answer 1

In bindEvents method, this refers to menu object which does not have slideToggle method.

 (function() { var menu = { init: function() { this.cacheDom(); this.bindEvents(); //this.action(); }, cacheDom: function() { this.$el = $('nav'); this.$menu = this.$el.find('#menu'); this.$menuButton = this.$el.find('#menu-button'); this.$dropdown = this.$el.find('.dropdown'); this.$dropdownContent = this.$el.find('.dropdown-content'); }, bindEvents: function() { this.$menuButton.on('click', function() { this.$menu.slideToggle() }.bind(this)); this.$dropdownContent.on('click', function() { this.$dropdownContent.slideToggle() }.bind(this)); }, action: function() { this.slideToggle(); }, } menu.init(); })() 

 #menu-button { display: none; } @media screen and (max-width: 644px) { #menu { display: none; } nav[role="full-horizontal"] { float: none; margin-bottom: 3rem; text-align: center; } nav[role="full-horizontal"] ul { width: 100%; margin-top: 3rem; display: block; padding: 0; } nav[role="full-horizontal"] ul > li { display: block; float: none; font-size: 1rem; padding: .75rem; margin: 0; } header h1 { font-size: 4rem; } #menu-button { display: inline-block; } ul.dropdown-content { display: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <header> <nav role="full-horizontal"> <div class="cf"> <a id="menu-button" href="#">MENU</a> </div> <ul id="menu"> <li><a href="/">Home</a> </li> <li><a href="/work">Work</a> </li> <li><a href="/blog">Articles</a> </li> <li><a href="/contact">Contact</a> </li> <li class="dropdown"> <a href="#"></a> <ul class="dropdown-content"> <li><a href="">Posts Admin</a> </li> <li><a href="">Projects Admin</a> </li> <li><a href="">Categories Admin</a> <li><a href="#">Account Settings</a> </li> <li><a href="">Logout</a> </li> </ul> </li> </ul> </nav> </header> 

Fiddle Demo