我正在使用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();
})()
非常感谢任何帮助。谢谢。
答案 0 :(得分:0)
在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>