Javascript MVC Pattern

Best Practices

[cabbagehead]

After reviewing a few JavaScript libraries for AJAX development, I've quickly come to realize the event model seems to imply use of the MVC pattern for development. Assuming you accept this premise, the next question is how to best implement this pattern.

Here are my thoughts and I'd appreciate any feedback/debate you might want to throw into the mix:

1. Model - pure domain-model Javascript objects that deal with the actual behaviors to be invoked.

1. View - a pure DOM (zero CSS or Javascript or styling info; purely a div-centric DOM definition.

2. Controller - Observer pattern implementation around the idea of even registration and listeners that observe those events.

So something I'm wonder is - should the controller code be in a seperate JS include from the model code for that "Page"? I could see where one could say that either (a) the controller code is the one set of javascript code that *does* belong in a script tag in the head of the DOM and acts to connect the DOM to the model objects. Or (b) that it belongs in its own events class, in a seperate file.

Any thoughts, suggestions, opinions, etc?

Thanks.
N

[cabbagehead]

Anyone? :)

[Fotiman]

So something I'm wonder is - should the controller code be in a seperate JS include from the model code for that "Page"? I could see where one could say that either (a) the controller code is the one set of javascript code that *does* belong in a script tag in the head of the DOM and acts to connect the DOM to the model objects. Or (b) that it belongs in its own events class, in a seperate file.

I'm not sure I totally understand your MVC mapping. With that said, I generally like to have one main script block per page... I suppose that would be the Controller. That block might create instances of certain objects... I suppose those would be the Model. But as for the View? I'm not really sure there really is a "view" layer. Typically, the Model objects might be totally self contained widgets, in which case most of the view information is contained within those 'classes'.

For example, my page head might look something like this:

<script type="text/javascript" src="WIDGET1.js"></script>
<script type="text/javascript" src="WIDGET2.js"></script>
<script type="text/javascript" src="THISPAGE.js"></script>

So the first 2 scripts there might contain what I would consider to be Model (and some View code) and the last one would contain all of the code for creating instances of those widgets (ie - the controller).