javascript - 在 JavaScript 中使用模块模式时如何引用 DOM 元素？

Question

如何从封装的 JavaScript 对象中获取 DOM 元素的值？ 这是行不通的。我没有得到任何未定义的信息。我认为该页面没有呈现，因此无法看到，但我将其放入 .ready 函数中，但我仍然未定义。

$(document).ready(function() {
  GetLoans = {
    myModal: function() {
      return document.querySelector("#myModal")
    },
    myModalBody: function() {
      return document.querySelector(".modal-body")
    },
    getNewLoans: function() {
      var xhr;
      xhr = new XMLHttpRequest();
      var url = "/api/books";
      xhr.open("GET", url, true);
      xhr.responseType = 'json';
      xhr.send(null); //or your data
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && (xhr.status == 200)) {
            var result = xhr.response;
            for (var key in result) {
              if (result.hasOwnProperty(key)) {
                //console.log(result[key].patron_id);
                this.myModalBody.innerHTML = result[key].patron_id;
              }
            }
          }
        }
        // var serverResponse = xhr.responseText;
        // this.myModalBody.innerHTML = serverResponse;
    },
    bindUIActions: function() {
      // this.myModalBody.addEventListener("click", this.getNewLoans(), false);

    },
    init: function() {
      this.getNewLoans();
      //this.bindUIActions();

    }
  };
  GetLoans.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Uncaught TypeError: Cannot set property 'innerHTML' of undefined
    at XMLHttpRequest.xhr.onreadystatechange

请不要使用 jQuery(是的，我知道我正在使用 Document.Ready 函数。)

Answer 1

首先，您引用的 this 对象未正确绑定(bind)到您的模块。从调用中删除对 this 的引用，因为您使用它的函数与它们需要访问的函数位于同一范围内。

你确实有模块方法来获取 DOM 引用:

myModalBody: function() {
  return document.querySelector(".modal-body")
}

myModal: function() {
  return document.querySelector("#myModal")
}

但是，当您编写时，您实际上并没有调用这些方法:

this.myModalBody.innerHTML = result[key].patron_id;

你需要写:

myModalBody().innerHTML = result[key].patron_id;

以便调用该函数并使用该函数的返回值。

如果没有调用括号，您将查找名为 innerHTML 的 myModalBody 函数/对象的属性，该属性不存在。

此外，在您的事件接线代码中，您有:

 this.myModalBody.addEventListener("click", this.getNewLoans(), false);

其中不应包含括号，因为它将立即调用该方法，导致事件处理程序成为 AJAX 调用的结果(这很可能不是函数，对吧？)。尝试:

 myModalBody.addEventListener("click", getNewLoans, false);

$(document).ready(function() {
  GetLoans = {
    myModal: function() {
      return document.querySelector("#myModal")
    },
    myModalBody: function() {
      return document.querySelector(".modal-body")
    },
    getNewLoans: function() {
      var xhr;
      xhr = new XMLHttpRequest();
      var url = "/api/books";
      xhr.open("GET", url, true);
      xhr.responseType = 'json';
      xhr.send(null); //or your data
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && (xhr.status == 200)) {
            var result = xhr.response;
            for (var key in result) {
              if (result.hasOwnProperty(key)) {
                //console.log(result[key].patron_id);
                myModalBody().innerHTML = result[key].patron_id;
              }
            }
          }
        }
        var serverResponse = xhr.responseText;
        myModalBody().innerHTML = serverResponse;
    },
    bindUIActions: function() {
      myModalBody().addEventListener("click", getNewLoans, false);

    },
    init: function() {
      this.getNewLoans();
      //this.bindUIActions();

    }
  };
  GetLoans.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>