0

在我上一个问题之后，我提出了以下工作代码，旨在通过替换<div id="test_css_id">...</div>自身来定期刷新 DOM。以下代码中出现的两个 AJAX 请求的行为是重新加载相同的代码本身。

<div id="test_css_id">
  <a id="link_css_id" href="test_url.html">LINK</a>

  <script type="text/javascript">
    var refreshTimer; 

    $('#link_css_id').click(function(event) {
      event.preventDefault();

      $.ajax({
        url:     $(this).attr('href'),
        type:    'PUT',
        success: function(data) {
          clearInterval(refreshTimer);
          $('#test_css_id').replaceWith(data); // Replaces all code including JavaScript with the response data (note: the response data is exactly the same as the code shown here).
        }
      });
    });

    $(document).ready(function() {
      function refreshFunction(){
        $.ajax({
          url:     'test_url.html',
          type:    'GET',
          success: function(data) {
            clearInterval(refreshTimer);
            $('#test_css_id').replaceWith(data); // Replaces all code including JavaScript with the response data (note: the response data is exactly the same as the code shown here).
          }
        });
      }

      refreshTimer = setInterval(refreshFunction, 1000);
    });
  </script>
</div>

但是，正如接受答案的作者所说，“还有其他方法可以做到这一点 [..] 一种方法是将所有代码包装到一个模块中”。我不是 JavaScript 专家，但我想进一步了解和学习它。

如何将所有这些代码包装到一个模块中以避免使用全局变量？

4

2 回答 2

1

您当前的代码如下所示：

var refreshTimer; //a global variable

$(...).click(...);

要使 refreshTimer 不是全局的，您需要将它放在一个函数中：

function main(){
   var refresherTimer; //this variable is now local to "main"

   $(...).click(...);
}

main();

但是，这样做并不能完全解决问题。虽然我们确实摆脱了全局变量，但我们添加了一个新变量——“main”函数本身。

最后一个技巧是将“main”函数变成一个匿名函数并直接调用它。这就是著名的“模块模式”：

(function(){
   var refreshTimer; //local variable to that anonymous function

   $(...).click(...);
}()); //and here we call the function to run the code inside it.

围绕所有内容的额外括号很重要。如果你只是这样做function(){}()而不是(function(){}())then 你会得到一个语法错误。

于 2013-09-19T23:53:37.293 回答
0

这是JavaScript 中模块模式的一个很好的描述。

于 2013-09-19T23:45:52.010 回答