JQuery Refactoring / Maintaining

Question

I searched a bit around SO and did not find any questions / answers that help me. The problem is that my jQuery function calls are getting too big to support. I am wondering if I need to refactor much more, or if there is a better way to make all these calls. You will see how I make one call, the anonymous functions, which are the arguments for the function, eventually become very large and make reading the code horrible. I could theoretically break it all down into my own functions, but I don't know if this was the best practice or not. The following is an example of some of jQuery:

$('#dialog').html('A TON OF HTML TO BUILD A FORM').dialog('option', 'buttons', { 'Save': function(){$.post('/use/add/', $('#use_form').serialize(), function(data){ ......There were 4 more lines of this but I'm saving you so you don't rip your eyeballs out hopefully you get the idea.....dialog('option','title','New Use').dialog('open');

As you can see, since many of the functions that I call take functions as arguments, when I create anonymous functions, I get a huge mess (there were about 3 anonymous function declarations in this code)

Should I just create a bunch of functions and call them to make them more readable. The only reason I would be opposed is that I will have a bunch of declared functions that are used only once.

Thanks in advance for your help!

Answer 1

Define functions in the right area, and that doesn't really matter.

var generateHTML = function() {
  ...
};
var somethingElse = function() {
  ...
};

... some more ...

$('#dialog').html( generateHTML() )...etc

, (, - ), , .

Answer 2

.

, . javascript , , :

(function () {
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
}()); // called immediately

, , :

new function () { // called immediately
  var f = function (x) ...
  var g = function (y, z) ...
  // operations involving f and g
};

:

new function (i, j, k) {
  // functions f and g
  f(i, g(j, k));
}(3, 4, 5);

Answer 3

, , - , .

, , , , JavaScript, .

- , , .

html jQuery JavaScript <script> , - , ..

Answer 4

, , ! CAN :

$('#dialog').
    html('A TON OF HTML TO BUILD A FORM').
    dialog('option',
        'buttons', {
            'Save': function(){
                var callback = function(data){
                    // There were 4 more lines of this
                    // but I'm saving you so you don't
                    // rip your eyeballs out hopefully
                    // you get the idea
                }
                $.post(
                    '/use/add/',
                    $('#use_form').serialize(),
                    callback
                )
             }
         }).
    dialog('option',
        'title',
        'New Use').
    dialog('open');

. , / coutinuing //+ , javascript ';' , , .

, . - . Python : ( Python).

Answer 5

. , .

Answer 6

jQuery. , , , 5 . slebetman. , , - .

, , MVC MVP, . A List Apart article MVC Javascript. , , . , DOM (, , div) (, keyup) .. , onPostRollback, onPostCreate onCommentAddedwhich may be applicable, for example, to SO. JQuery recently added custom event binding support, and these are some good articles ( first , second ) explaining how tos.

In general, it is difficult to redefine the views, but the models vary little by design and are one area where we can achieve maximum reuse.