混淆模块和重构JS/jQuery

我正在尝试采用'最佳实践'来编写Javascript，特别是编写模块。我现在正在重构一段代码，但在jquery选择器中遇到了一些问题。混淆模块和重构JS/jQuery

第一个（难看的）代码正如我所料。但是，模块上的点击事件并未触发，似乎选择器没有正确分配。

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

// Messy jQuery 
 

 
$(function() { 
 
    $div1 = $('#div1'); 
 
    $div2 = $('#div2'); 
 
    $button = $('#button'); 
 

 
    $('#button').click(function() { 
 
    $div1.fadeOut(); 
 
    $div2.fadeIn(); 
 
    }) 
 
}); 
 

 
// Attempted Module 
 

 
(function(){ 
 

 
    var interface = { 
 
    init: function() { 
 
     this.cacheDom(); 
 
     this.bindEvents(); 
 
    }, 
 
    cacheDom: function() { 
 
     this.$div1 = $('#div1'); 
 
     this.$button = this.$div1.find('button'); 
 
     this.$div2 = $('#div2'); 
 
    }, 
 
    bindEvents: function() { 
 
     this.$button.on('click', this.swapDiv.bind(this)); 
 
    }, 
 
    swapDiv: function() { 
 
     this.$div1.fadeOut(); 
 
     this.$div2.fadeIn(); 
 
    } 
 
    } 
 
    interface.init(); 
 
})()

<div id="div1"> 
 
    <button id="button">Swap Div</button> 
 
</div> 
 

 
<div id="div2"> 
 
    <p>Lorem Ipsum</p> 
 
</div>

来源

2017-07-13 Joel Hoelting

我测试你的代码和它的作品。我认为你在HTML渲染之前调用<head>标签中的自动执行匿名函数。所以，jQuery无法找到并将事件侦听器绑定到您的按钮。在$()中包装您的自我执行功能或移动到body标签末尾之前。

(function(){ 
 

 
    var interface = { 
 
     init: function() { 
 
      this.cacheDom(); 
 
      this.bindEvents(); 
 
     }, 
 
     cacheDom: function() { 
 
      this.$div1 = $('#div1'); 
 
      this.$button = this.$div1.find('button'); 
 
      this.$div2 = $('#div2'); 
 
     }, 
 
     bindEvents: function() { 
 
      this.$button.on('click', this.swapDiv.bind(this)); 
 
     }, 
 
     swapDiv: function() { 
 
      this.$div1.fadeOut(); 
 
      this.$div2.fadeIn(); 
 
     } 
 
    }; 
 
    interface.init(); 
 
})();

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="div1"> 
 
    <button id="button">Swap Div</button> 
 
</div> 
 

 
<div id="div2"> 
 
    <p>Lorem Ipsum</p> 
 
</div> 
 
<script type="text/javascript" src="test.js"></script> 
 
</body> 
 
</html>

来源

2017-07-13 03:48:32

感谢您的答复。嗯，这很有趣，因为它不适合我的铁轨学生项目。很高兴知道代码正在工作，似乎只是一个资产加载问题。 –

刚醒来，最后吸收了你在说的话。你说得对，谢谢你的帮助。 –

@JoelB很高兴听到这个消息 –

混淆模块和重构JS/jQuery

回答

相关问题