Namespace Generator

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<div class="red">
aa
</div>

<div class="lorem">
<div class="red">
aa
</div>
</div>

CSS

.lorem .red { color: red; }

JavaScript

var App = {};

// Basic function to create a namespace in App:
//     usage: App.namespace("mail.views");
App.namespace = function(path) {
    var pathComponents = _.compact(path.split("."));
    return _.reduce(pathComponents, function(obj, key) {
        if (!obj[key]) obj[key] = {};
        return obj[key];
    }, App);
};

App.namespace("mail.views");
App.namespace("mail.models");
App.namespace("user.models");

App.namespace("");
App.namespace(".xxx. .");

console.log(JSON.stringify(App));


// Safely resolve a namespace from a path string:
//     usage: Object.path(App, "mail.views")
Object.path = function(topObj, path) {
    var pathComponents = _.compact(path.split("."));
    return _.reduce(pathComponents, function(obj, key) {
        return obj ? obj[key] : undefined;
    }, topObj);
};
     
console.log("mail.views", Object.path(App, "mail.views"));
console.log("mail.xxx.views", Object.path(App, "mail.xxx.views"));