混淆模塊和重構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

回答

相關問題