Question

我正在尝试采用“最佳实践”来编写Javascript，特别是编写模块。我现在正在重构一段代码，但是我遇到了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>

Answer 1

我测试了你的代码并且它有效。我认为你在html渲染之前在<head>标签中调用了自执行匿名函数。因此，jQuery无法找到并将事件监听器绑定到您的按钮。将您的自执行功能包裹在$()中，或者移至body标记结尾之前。

＆＃13;

(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();
})();

＆＃13;

<!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>

＆＃13;

与模块混淆和重构JS / jQuery

1 个答案: