你如何处理jQuery中的控件绑定

Question

I have a question about jquery and DOM manipulation. How do you handle with DOM controls for eg

I have to get value from text input so I could this in ways:

var SomeClass = function() {
    var control;

    this.setControl = function(c) {
        control = c;
    }

    this.getValue = function() {
        return control.val();
    }
}

$(document).ready(function() {
    var sc = new SomeClass(); // of course control could be passed in contructor as well
    sc.setControl($('#CONTROL'));
    console.log(sc.getValue());
});

OR

var SomeClass = function() {
    var control = $('#CONTROL');

    this.getValue = function() {
        return control.val();
    }
}

$(document).ready(function() {
    var sc = new SomeClass();
    console.log(sc.getValue());
});

what is your opinion? What is better or maybe this is pile of trash therefore what is the best solution. Plz dont send me to backbone, spine and so on Im interesed in only in jquery.

best!

EDIT:

do you separate logic from UI or you are mixing it? more complicated example

in js file you have a class that uses text control and in the secound js file also you need values from this input. What you are doing? you just call everytime $('#control') or create a third js file where would be a separated "class" to manipulate this input?

Answer 1

It would make more sense to move the setValue() inside the constructor:

SomeClass = function(c) {
    var control = c;

    return {
        getValue: function() {
            return control.val();
        }
    }
}

var x = new SomeClass($('input'));

alert(x.getValue());

However, I'm not sure how valuable this kind of information hiding will be. Perhaps as some kind of view wrapper.

In many cases you wouldn't need this wrapper, so just:

var $x = $('input'); // keep reference to a bunch of <input> elements.