0

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 要素の内容を入力すると考えていました。しかし、私は undefined を呼び出すだけ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 に答える