0

次のようなものがあると仮定します。

var MyApp = function() {
this.name = "Stacy"
}

MyApp.prototype.updateName = function(newname) {
this.name = newname;
}

私のメインページには次のものがあります：

$(function () {
  var instance = new MyApp();
})

名前を更新するボタン イベント ハンドラがあります。

$("#button").on("click", function(evt) {                        
    // Update the name in MyApp to something else...
    instance.name = "john" // I do not like using instance here, because it has to be "instance" has to be created before I can use it. I want to be able to make this independent of "instance" being created or not
});

ボタンのクリック ハンドラーの一部として myapp の作成された「インスタンス」を明示的に使用せずに、ボタン ハンドラーが「MyApp」を正しい名前に更新するようにする適切な方法は何ですか?

理想的には、そのjqueryイベントハンドラーを「MyApp」のどこかに押し込んで、次のようなことができるようにしたいと思います:

MyApp.prototype.events = function() {
    $("#button").on("click", function(evt) {                        
        this.name = "john"
    });
}

これは何か他のものを参照しているため、機能しませんが。

イベントハンドラーが多かれ少なかれ「MyApp」のプロパティを更新して、作成された「インスタンス」から独立できるようにアプリケーションを適切に構成するにはどうすればよいですか (つまり、「インスタンス」を使用する必要がなくなります)。

4

1 に答える 1

0

まず、セッター関数を作成する場合は、それを使用することをお勧めします!! ：D

$("#button").on("click", function(evt) {                        
    // Update the name in MyApp to something else...
    //instance.name = "john"
    instance.updateName("john");
});

そして、events（）を起動するまでonclickイベントをバインドしないため、オブジェクトMyAppのメソッド内にイベントハンドラーを配置することは意味がありません。

次に...これを整理する方法は、jQueryドキュメントのonloadを使用して、すべてのDOMオブジェクトをアプリケーションの機能にバインドすることです。通常、次のようなものです。

MYAPP = {};

MYAPP.say_something = function () {

    alert('lol, you clicked me!');

};

...

$(function () {

    $('#my_button').click(MYAPP.say_something);
    $('#other_element').mouseenter(MYAPP.another_method);

});

また、多くの要素を処理する必要がある大規模なアプリケーションの場合、DOM要素の名前空間があれば、次のようにコードをより適切に整理できます。

MYAPP.fetch_dom = function () {

    return {
        my_button: $('#my_button'),
        other_element: $('#other_element')
    };
};

そして、あなたは非常にきちんとした方法でイベントをバインドすることができます

$(function () {

    // first initiate DOM
    my_dom = MYAPP.fetch_dom();

    // Then bind events
    my_dom.my_button.click(MYAPP.say_something);
    my_dom.other_element.mouseenter(MYAPP.another_method);

});

このようにして、プログラムの1000ポイントからDOM内の特定の要素を探す必要がなく、ハードコードされたIDをいたるところに拡散し、DOM構造に対して効果のない検索を実行します。

最後に、newという単語を使用するよりも、JSでリテラルを使用する方がはるかに優れています。JSは典型的なOOP言語であり、新しいものは少し「自然に逆らって」おり、お尻の痛みになる可能性があります。

于 2013-03-07T17:50:16.757 に答える