0

我试图将我的 Javascript 代码保留在模块中，但我无法使用 DOM 元素初始化模块的变量。我尝试过的一切都只返回空变量。

索引.html

<html>
  <head>
    <script type="text/javascript" src="myModule.js"></script>
  </head>
  <body>
    <div id="baner"></div>

    /* bunch of HTML here */

    <script type="text/javascript">
      $(document).ready(function(){
        myModule.init();
      });          
    </script>
  </body>
</html>

我的 Javascript 代码如下所示：

我的模块.js

var myModule = (function(){
  var banerSegment;

  var init = function(){
    //Inicializar variáveis relacionadas ao DOM
    banerSegment = $('#baner');
  };

  return {
    init: init,
    baner: banerSegment
  };
})();

在我看来，我认为在 DOM 准备好之后，myModule.init()将调用该函数，并且该函数将banerSegment使用 DOM 元素的内容填充变量。但我只是从调用中得到未定义myModule.baner。

为什么我会在这里失踪？

提前致谢！

4

2 回答 2

2

虽然这是一个好的开始，但我认为您还没有完全掌握模块模式。我建议在这里查看 Todd Motto 的指南

编辑 - 删除的不是最佳解决方案

我认为最干净的解决方案是这样使用this的：

var myModule = (function() {
  var init = function() {
    //Inicializar variáveis relacionadas ao DOM
    this.baner = $("#baner");
  };

  return {
    init: init,
    baner: undefined
  };
})();

$(document).ready(function() {
  myModule.init();
  console.log(myModule.baner);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="#baner"></div>

于 2016-10-07T21:13:16.597 回答
0

在阅读了@mhodges 建议的文章后，我发现我可以使用公共函数来返回私有变量。结果如下所示：

var myModule = (function(){
  var _banerSegment;

  var init = function(){
    //Inicializar variáveis relacionadas ao DOM
    _banerSegment = $('#baner');
  };
  var returnBaner = function(){
    return _banerSegment;
  }

  return {
    init: init,
    baner: returnBaner
  };
})();
于 2016-10-07T21:55:54.367 回答