我有这个JS函数,可以从依赖于屏幕大小的类中删除该类。有用 仅当您调整屏幕大小时(我相信这是预期的行为),但是,我也需要在加载时进行此操作。
require(['jquery'], function(){
jQuery(window).resize(function() {
var innerWidth = window.innerWidth;
if (innerWidth < 800) {
jQuery("#logo-container").removeClass('pull-left');
} else if (innerWidth > 800) {
jQuery("#logo-container").addClass('pull-left');
}
});
});
我用document.ready包装了该函数,并在resize事件之前添加了相同的内容。现在有这样的东西:
require(['jquery'], function(){
jQuery(document).ready(function() {
var innerWidth = window.innerWidth;
if (innerWidth < 800) {
jQuery("#logo-container").removeClass('pull-left');
} else if (innerWidth > 800) {
jQuery("#logo-container").addClass('pull-left');
}
jQuery(window).resize(function() {
var innerWidth = window.innerWidth;
if (innerWidth < 800) {
jQuery("#logo-container").removeClass('pull-left');
} else if (innerWidth > 800) {
jQuery("#logo-container").addClass('pull-left');
}
});
});
});
现在,函数的结果是我想要的,但是,我感觉就像在重复代码。
这是正确的方法吗?有更好的替代方法吗?
任何建议都会受到赞赏。
答案 0 :(得分:2)
避免重复代码。
制作一个函数,并在文档就绪函数和窗口调整大小函数上调用它...
在下面的代码中,所有代码都转到
OnScreenResized()
函数。
require(['jquery'], function() {
jQuery(document).ready(function() {
OnScreenResized();
});
jQuery(window).resize(function() {
OnScreenResized();
});
function OnScreenResized() {
var innerWidth = window.innerWidth;
if (innerWidth < 800) {
jQuery("#logo-container").removeClass('pull-left');
} else if (innerWidth > 800) {
jQuery("#logo-container").addClass('pull-left');
}
}
});
答案 1 :(得分:1)
需要记住的一点是,如果您需要复制并粘贴完全相同的代码块,那么始终是将其重构为函数调用的好时机:
require(['jquery'], function(){
jQuery(document).ready(function() {
jQuery(window).resize(function() {
toggleClass();
});
toggleClass();
});
function toggleClass() {
var innerWidth = window.innerWidth;
if (innerWidth < 800) {
jQuery("#logo-container").removeClass('pull-left');
} else if (innerWidth > 800) {
jQuery("#logo-container").addClass('pull-left');
}
}
});