用jquery事件更新javascript中的主类的正确方法是什么？

Question

Assuming I have something like:

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

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

In my main page I have a :

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

I have a button event handler that would update the name:

$("#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
});

What is the proper way to do it such that the button handler would update "MyApp" to have the correct name, without explicitly using the created "instance" of myapp as part of the button's click handler?

ideally I would like to shove that jquery event handler somewhere into "MyApp" such that I could do something like:

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

Though it doesnt work because this refers to something else.

How to properly structure my application such that the event handler is more or less updating the properties of the "MyApp" so that it can be independent of the created "instance" (ie i no longer have to use the "instance.")?

Answer 1

First, if you create an setter function, it's a good idea to use it !! :D

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

And then, it does not make sense to do put an event handler inside of a method of your object MyApp, since it will never bind the onclick event until you fire events()

Then... my way to organize this , is to use the jQuery document onload to bind all the DOM objects with the function of your applications. Usually something like this:

MYAPP = {};

MYAPP.say_something = function () {

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

};

...

$(function () {

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

});

And for big applications, where you have to work with a lot of elements, you can organize your code much better if you have a namespace for your DOM elements, something like this:

MYAPP.fetch_dom = function () {

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

And you can bind the events in a very neat way

$(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);

});

This way you don't have to look for the specific elements in the DOM from a thousand points of your programme, spreading hardcoded id's everywhere and performing noneffective searches against the DOM structure.

Finally, it is much better to use literals in JS rather than using the word new. JS is a prototypical OOP language and new is a little bit "against nature" that can be a pain in the ass.