模块变量不能用 DOM 元素启动

Question

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

index.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 代码如下所示：

myModule.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 得到未定义。

为什么我在这里不见了？

提前致谢！

Answer 1

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

编辑 -- 删除了不太理想的解决方案

我认为最干净的解决方案是像这样使用 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>

Answer 2

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

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

模块变量不能用 DOM 元素启动

Module variable can't be initiated with DOM elements

javascript

jquery

dom

modularity

variable-initialization

index.html

myModule.js

编辑 -- 删除了不太理想的解决方案