I've been mucking through JavaScript for about 10 years now, and I've noticed a pattern of development I keep coming back to. I wrote Foundry to rid my life of boilerplate code (as any good framework should). I'd love some feedback if you're curious. It is mostly production ready code.

https://github.com/gburghardt/foundry

There is a functional demo, plus a Getting Started guide, as well as a tutorial diving a little deeper into the framework. The Overview is a great place to start.

Features:

- MVC architecture
- Utilizes DOM event delegation
- Object oriented
- Event driven
- Uses HTML5 attributes to separate behavior from style
- Optionally supports Dependency Injection and Inversion of Control
- Optionally initialize all controllers on page load
- Optionally initialize controllers as they scroll into view
- An Application object oversees the entire page

It is open source under the MIT license.

Here is a quick sample of what some of this code would look like:

HTML Code:
<div data-modules="ExampleModule">
    <form method="get" action="#" data-action="showText">
        <h2></h2>
        <p>
            <input type="text" name="example_text">
            <button type="submit">Show Me</button>
        </p>
    </form>
</div>

<div data-modules="ExampleModule" data-module-options='{"title":"I am a second instance of ExampleModule!"}'>
    <form method="get" action="#" data-action="showText">
        <h2></h2>
        <p>
            <input type="text" name="example_text">
            <button type="submit">Show Me</button>
        </p>
    </form>
</div>
The Foundry framework will automatically instantiate and initialize a class called "ExampleModule" for each element with an attribute with data-modules="ExampleModule". This class does two things: Sets the title visible to the user in the <h2> tag, and alerts the text in the text box when submitting the form.

The source code for ExampleModule:

PHP Code:
var ExampleModule Module.extend({
    
prototype: {
        
actions: {
            
submit: [
                
"showText"
            
]
        },

        
elementStore: {
            
elements: {
                
title: { selector"h2" }
            }
        },

        
options: {
            
title"Just a Test"
        
},

        
_ready: function() {
            
Module.prototype._ready.call(this);

            
this.title().innerHTML this.options.title;
        },

        
showText: function(eventelementparams) {
            
event.stop();

            var 
form element.form || element;

            
alert(form.elements.example_text.value);
        }
    }
}); 
Let me know what you think!