0

以前の質問の後、DOM<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>

ただし、受け入れられた回答の作成者が言ったように、「他の方法があります[..] 1つの方法は、そのコードをすべてモジュールにラップすることです」。私は 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();

ただし、この方法で問題を完全に解決することはできません。グローバル変数を取り除きましたが、新しいものを追加しました - 「メイン」関数自体です。

最後のトリックは、「メイン」関数を無名関数に変えて直接呼び出すことです。これは有名な「モジュール パターン」です。

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

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

すべてを囲む余分な括弧は重要です。function(){}()その代わりに単に行う(function(){}())と、構文エラーが発生します。

于 2013-09-19T23:53:37.293 に答える