Jak powinna wyglądać organizacja kodu javascript/jQuery?

Zastanawiam się, gdzie powinno się umieszczać kod javascriptowy, który jest powiązany z danym widokiem. Dla przykłady, mamy coś takieg:

@push('scripts')
<script>
    $(function () {
        var $questions = $('.question'),
                $unansweredQuestions = $questions.filter(function () {
                    return $(this).data('answered') == false;
                }),
                $answers = $unansweredQuestions.find('[data-answer-id]');

        $answers.on('click.submitAnswer', function () {
            var $answer = $(this),
                    $question = $answer.closest('[data-question-id]'),
                    answerId = $answer.data('answer-id'),
                    questionId = $question.data('question-id');

            $.post('{{ route('questions.answer') }}', {
                questionId: questionId,
                answerId: answerId
            }).then(function (resp) {
                $question
                        .data('answered', true)
                        .find('[data-answer-id]')
                        .unbind('click.submitAnswer');
                $answer.addClass(resp.is_correct ? 'btn-success' : 'btn-warning');
            });
        });
    });
</script>
@endpush

Jak widać na załączonym obrazku, ponieważ używam laravela, mogę sobie "wepchnąć" na stos taki kawałek kodu i wyrenderować go na samym dole strony.
Wydaje mi się, że jest to najlepsze rozwiązanie. Można ewentalnie wydzielić ten kod do osobnego pliku i ladować ten plik w tym samym miejscu, w którym był pierwotnie kod.

Ma to tą zaletę, że rzeczony kod jest ładowany tylko tam, gdzie jest potrzebny, co nie zachodzi, gdy wezmę wszystkie tego typu małe pliczki i skompersuje je do jednego wielkiego app.js i będę ciągną na każdej stronie. Jednak słyszałem, że nie powinno się tak robić, m.in. ze względu na reużywalność kodu.

Jak to powinno być zrobione po bożemu?

@mr_jaro, wiem że Ty pracujesz z Laravelem, jak to u Was wygląda?

Nigdy nie dawaj kodu js w kodzie html. Poczytaj laravel-elixir

@mr_jaro przeczytałem to co piszą w dokumentacji, ale nie potrafię tego odnieść do swojego problemu. O ile dobrze rozumiem, to jedynym wyjściem jest przeniesienie kodu z poszczególnych widoków do odpowiadających plików .js i po prostu ładowanie tylko tych. Chyba, że robicie to inaczej i byłbym bardzo wdzięczny za wskazówki.

Robisz javascriptowe pseudo klasy i na danej stronie jedynie tworzysz objekty tych co potrzebujesz ale kod masz dostępny cały czas cały więc kompilowane są wszystkie pliki js i css do zbiorczych script.min, style.min