14

JavaScript モジュール パターンを理解しようとしています。どのように見えるべきかの例を見てきましたが、使い方がわかりません。

たとえば、ここでいくつかのことが起こっています。

$('input#share').on("click", function() {

    $('.loading').html('<img class="remove_loading" src="/graphics/loading.gif" />');

    var message = $(".wallmessage").val();

    if (message == ""){
        $("#messageempty").jmNotify();
        $('.remove_loading').remove();
    } else {
        addMessage(message);
    }

    return false;
});


function addMessage(message)
{
    $.ajax({
        url: '/test',
        type: 'POST',
        dataType: "json",
        data: {'message' : message},
        success: function(data) {
                ...
        },
        error: function() {
            ...
        }
    });
}

上記の例を次のように使用するにはどうすればよいですか。

var myTest = function() {
    var selectId;
    function addMessage () {
        // ...
    }
    return { // public interface
        publicMethod1: function () {
            // all private members are accesible here
        }
    };
};
var start = myTest();

クリック イベントをどこに追加し、変数を宣言addMessageし、ajax 呼び出しで関数を追加しますか。関数を呼び出しaddMessageますか？すべてをラップする必要があり$(document).ready(function()ますか?

誰かが私のためにこれに光を当てることができますか?

ありがとう

4

5 に答える 5

22

これは非常に独断的なテーマですが、私はそうします (完全なアプリとその機能を完全に知らなくても)、次のようになります。

var myApp = (function() {

  var someElement = $("#foo"); //some element I know I'll use lots

  var addMessage = function(message) {
    $.ajax({
      url: '/test',
      type: 'POST',
      dataType: "json",
      data: {'message' : message},
      success: function(data) {
              ...
      },
      error: function() {
          ...
      }
    });
  };

  var inputClick = function(event) {
    event.preventDefault();
    //depending on if you'll reuse these selectors throughout the app I might have these as variables
    $('.loading').html('<img class="remove_loading" src="/graphics/loading.gif" />');

    var message = $(".wallmessage").val();

    if (message == ""){
      $("#messageempty").jmNotify();
      $('.remove_loading').remove();
    } else {
      addMessage(message);
    }
  };

  var bindFunctions = function() {
    $("input#share").on("click", inputClick)
  };

  var init = function() {
    bindFunctions();
  };

  return {
    // EDIT: 27/12/16 - need to return init for 'usage' example to work
    init: init,
    addMessage: addMessage
    //anything else you want available
    //through myApp.function()
    //or expose variables here too
  };


})();

//usage

myApp.init();

パターンの元のコードが間違っています。関数は()最後に、すぐに呼び出される関数にする必要があり、実行して、return statement.

私が行ったこととは少し違うかもしれませんが、これは基本的なアイデアにすぎませんが、それがあなたの出発点になることを願っています.

しばらく前に誰かがこのパターンに関連する質問をしたので、このパターンを使用する理由とそのコンテキストでステートメントがどのように機能するかを説明することに答えました。(function() {})();return

于 2012-08-20T17:47:49.693 に答える
1

コードをセグメント/モジュールに分割することで、外界からの可視性を減らし、コード管理を改善するという考え方です。それ。
http://learn.jquery.com/code-organization/concepts/

于 2013-10-17T02:29:30.760 に答える