用jQuery事件更新JavaScript中的主類的正確方法是什麼？

Question

假設我有類似：

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」的屬性，以便它可以獨立於創建的「實例」（即，我不再需要使用「實例「。）？

Answer 1

首先，如果你創建了一個setter函數，最好使用它！ ：d

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

然後，它沒有任何意義真的把一個事件處理程序的對象MyApp的的方法裏面，因爲直到觸發事件（）

它永遠不會綁定onclick事件然後... 我組織這個的方法是使用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); 

}); 

這樣你就不必找DOM中的特定元素從你的親千點綁定事件克分佈硬編碼身份的地方，並對DOM結構進行無效搜索。

最後，在JS中使用文字而不是使用單詞new更好。 JS是一種典型的OOP語言，新的有點「反對自然」，可能會讓屁股感到痛苦。