モジュールとの混乱とJS/jQueryのリファクタリング

私は、Javascriptを書くための、特にモジュールを書くための「ベストプラクティス」を採用しようとしています。私は現時点でコードの一部をリファクタリングしていますが、jqueryセレクタにはいくつか問題があります。モジュールとの混乱とJS/jQueryのリファクタリング

最初の（醜い）コードは私が期待しているように機能しています。ただし、モジュールのclickイベントは発生していないため、セレクタが正しく割り当てられていないようです。

構文、組織、または一般的な抽象化の考え方についてのアドバイスは非常に高く評価されます。さらに重要なことは、モジュールで何が間違っているのでしょうか？

// 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のリファクタリング

答えて

関連する問題