Question

我正在使用JQuery了解JS中的Object Literal设计模式。我将代码分成不同的模块，以减少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指的是没有menu方法的slideToggle对象。

(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

如何将JQuery设置为Object Literal模块？

1 个答案: