Question

我正在尝试根据在线的一些示例在我的代码中实现模块模式，我想要实现的是简单地将我的html中的按钮单击事件绑定到一个函数（这不起作用），下面是我的HTML ：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <input type="button" id="btn-msg" value="click me"/>
  </body>

</html>

这是我的JS：

//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = function() {

  function _readLists() {
    alert("am here");
  }

  return {
    readLists: _readLists
  }
}

Rutherford.Initiate = function() {
  $("#btn-msg").click(Rutherford.crud.readLists);
}

$(function() {
  Rutherford.Initiate();
});

以下是我的plunker链接：http://plnkr.co/edit/tA94lzMPHkUOr8QuyJK8?p=preview

我想要实现的是将按钮绑定到该功能。

Answer 1

您需要调用匿名函数，而不是分配它。请参阅下面的()：

Rutherford.crud = (function() {

  function _readLists() {
    alert("am here");
  }

  return {
    readLists: _readLists
  }
}());

以下是此更改的更新plunkr：http://plnkr.co/edit/uiWHmtkMFEKywvFRk6DF?p=info

Answer 2

我相信 Evan Knowles 想要这样说：

//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = (function() {

  function _readLists() {
    alert("am here");
  }

  return {
    readLists: _readLists
  }
})( );

Rutherford.Initiate = function() {
  $("#btn-msg").click(Rutherford.crud.readLists);
}

$(function() {
  Rutherford.Initiate();
});

如果您可以将Rutherford用作 Singleton ，这将正常工作。

JavaScript模块模式不起作用

2 个答案: