Qual è l'approccio migliore per gestire il codice javascript / ajax in un progetto?

Metterlo nel file html è un approccio pessimo e prima o poi ti darà un brutto mal di testa. Per iniziare, renderebbe impossibile gestire il codice condiviso tra più pagine.

Penso che un buon modo sia quello di avere un file js per ogni file html principale, un altro per ogni gruppo funzionale principale e uno o più per l'intero progetto. Ad esempio se fai cose complicate con le tabelle in tutto il sito, il tuo table.js potrebbe diventare abbastanza grande da diventare un file a sé stante.

Il processo di distribuzione dovrebbe quindi creare un file javascript da quei file e ridurlo a icona (o al massimo un numero molto piccolo di file). Questo è importante per le prestazioni di caricamento della pagina. Un buon framework web dovrebbe essere in grado di farlo senza troppi sovraccarichi.

A mio parere è sempre più facile mantenere una separazione tra html, css e javascript e tenere tutto in file separati.

Per quanto riguarda la gestione di ajax, scrivo spesso il codice come oggetto letterale e creo un metodo ajax che è facile da usare e dove c'è un metodo simile sul lato server che analizza qualunque cosa decido di inviare, ecc.

var main = {
    init: function() { // do stuff on page init
        this.events().render();
    },
    events: function() { // bind event handlers
        var self = this;

        $('#element').on('click', function() {
             var value = $('input.search').val();

             self.ajax('search', value).done(function(data) {
                  $('#results').html(data);
             });
        });
        return self;
    },
    render: function() {
        $('body').append('some elements').fadeIn(1000);
    },
    ajax: function(type, value) {
        return $.ajax({
             url : '/controller/ajax/',
             data: {type:type, value:value}
        });
    }
}