Most of my client side code ends up as a long script in one file the mostly look

Question

Most of my client side code ends up as a long script in one file the mostly looks like this:

<script>
function someFunction1(){/*...*/}
function someFunction2(){/*...*/}
...
var globalVariable1;
var globalVariable2;
...
$(function(){

$('selector1').click(function(){
    //get relevant data from various DOM elements

    //some business logic rules and validation

    //open dialog box

    //more business logic rules and more validation

    //post an ajax request

    //update the DOM  
});

//many other events

//many jQuery dialogs  
});
</script>
It's a maintenance nightmare. Although I use a well designed server-side structure using DDD (application services, domain sevices, value objects,...etc.) I have had little luck structuring my client code to a better separation of concerns.

I'm not building a client-side application. I just use jQuery intensively for the client side.

How should I approach the code structure to apply DDD client-side wide?

Explanation / Answer

Sounds like you could use an MVVM framework ( AngularJS, Knockout, ... ), when you include jQuery along with AngularJS it'll use jQuery instead of the jQLite which AngularJS has, so you still have jQuery.

What these kind of frameworks allow you to do is define actions on elements referring to controller methods. For example AngularSJ has the ng-click directive; This as opposed to selecting something with jQuery and then adding an event handler )

Also AngularJS allows you to separate your code into controllers, services, configs, etc. ( Im only referring to AngularJS here because I haven't worked with Knockout or any of the others. )

Related Questions

Navigate

• Browse (All)
• Browse M
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.