2

オブジェクト指向のJavaScriptの開発と変数の解析について質問があります。詳細については、net.tutsplusによるこのブログを参照してください-オブジェクト指向JavaScriptの基本。

イベントを作成する次のコードがあります。

$(document).ready(function() {
    tools.addEvent('.someButton', 'click', user.getUserDetails);
)};

var tools = {
    addEvent: function(to, type, fn) {
        $(to).live(type, fn);
    }
}

var user = {
    getUserDetails: function(userID) {
        console.log(userID);
    }
}

ご覧のとおりaddEvent、3つの変数を使用してメソッドを呼び出します。イベントをアタッチするDOM要素、イベントのタイプ、およびイベントがトリガーされたときに実行する関数。

私が抱えている問題は、getUserDetailsメソッドへの変数の解析であり、2つのオプションを知っています。

  1. 送信者の属性をチェックできるコードを最初に1行持つことができます。たとえば、は.someButton属性を持つことができますuserID="12345"。ただし、関数はいくつかの異なる場所から実行されるため、これは理想的ではありません。つまり、このチェックが常に利用できるとは限りません（コードの管理が難しくなります）。

  2. より良いオプションは、のような別のメソッドを持ち、このメソッドを使用してDOMからuser.willGetUserDetails属性を取得することです。userIDこれはページのどこからでも実行でき、をgetUserDetails取得した後に呼び出しますuserID。ユーザーの詳細が別の関数内から取得される場合は常に、getUserDetails直接呼び出すだけです。

  3. 理想的なのは、上記のコードを修正して、変数を直接渡すことができれば、未定義の変数であってもです。誰かがこれをどのように達成できるか知っていますか？

4

1 に答える 1

4

イベントに渡すデータを受け入れるaddEventコードにもう1つの引数を追加します。

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(to).live(type, data, fn);
    }
}

また、代わりにデリゲートを使用するか、1.7以降では.onを使用することをお勧めします

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(document).delegate(to, type, data, fn);
    }
}

また

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(document).on(type, to, data, fn);
    }
}

これで、次のように使用できます。

$(document).ready(function() {
    tools.addEvent('.someButton', 'click', {userID: theuserid}, user.getUserDetails);
)};

var user = {
    getUserDetails: function(event) {
        console.log(event.data.userID);
    }
}
于 2013-03-21T16:02:07.393 に答える