Javascript 混淆模块和重构JS/jQuery

我试图采用“最佳实践”来编写Javascript，特别是编写模块。我目前正在重构一段代码，但是jquery选择器有一些问题

第一个（丑陋的）代码正如我所期望的那样运行。但是，模块上的单击事件没有触发，选择器似乎没有正确分配

任何关于语法、组织或一般抽象哲学的建议都将不胜感激。更重要的是，我在模块中做错了什么

//凌乱的jQuery
$（函数（）{
$div1=$（“#div1”）；
$div2=$（“#div2”）；
$按钮=$（“#按钮”）；
$（“#按钮”）。单击（函数（）{
$div1.fadeOut（）；
$div2.fadeIn（）；
})  
});
//尝试模块
（功能（）{
变量接口={
init:function（）{
this.cacheDom（）；
这是bindEvents（）；
},
cacheDom:function（）{
这个.$div1=$（'#div1'）；
this.$button=this.$div1.find（'button'）；
这个.$div2=$（'#div2'）；
},
bindEvents:function（）{
this.$button.on（'click'，this.swapDiv.bind（this））；
},
swapDiv:function（）{
这是。$div1.fadeOut（）；
这个。$div2.fadeIn（）；
}
}
interface.init（）；
})（）

互换部门
同侧眼睑

我测试了你的代码，它运行正常。我认为您正在html呈现之前调用

标记中的自动执行匿名函数。因此，jQuery无法找到事件侦听器并将其绑定到按钮。将自动执行函数包装在

$（）

中，或移动到

正文

标记末尾之前

（函数（）{
变量接口={
init:function（）{
this.cacheDom（）；
这是bindEvents（）；
},
cacheDom:function（）{
这个.$div1=$（'#div1'）；
this.$button=this.$div1.find（'button'）；
这个.$div2=$（'#div2'）；
},
bindEvents:function（）{
this.$button.on（'click'，this.swapDiv.bind（this））；
},
swapDiv:function（）{
这是。$div1.fadeOut（）；
这个。$div2.fadeIn（）；
}
};
interface.init（）；
})();

标题
互换部门
同侧眼睑

感谢您的回复。嗯，这很有趣，因为它在我的rails学生项目中不起作用。很高兴知道代码正在运行，而且似乎只是一个资产加载问题。刚刚醒来，终于明白了你在说什么。你说得对，谢谢你的帮助。@JoelB很高兴听到这个消息