如何將JQuery設置為對象文字模塊？

Question

我正在使用JQuery理解JS中的對象文字設計模式。 我將代碼分為不同的模塊，以減少DOM必須搜索和可擴展的時間。 問題是我不知道如何使代碼真正起作用。 我知道為什么要分開，例如緩存Dom，綁定事件和渲染slideToggle的動作，但是麻煩是我不完全了解如何正確地將函數應用於事件。

我從JQuery傳輸的代碼如下：

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

我將其傳送到的對象文字模塊如下：

(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();
})()

任何幫助將不勝感激。 謝謝。

Answer 1

在bindEvents方法中， this是指沒有slideToggle方法的menu對象。

 (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> 

小提琴演示