The main purpose that Nox was created was to help developers giving a nice structure to their websites and apps.
It won't replace any full featured framework (Such as Backbone, AngularJS, Ember and so many others), because it doesn't have "magical" methods that will help you do your logic.
Basically everything you do, you do by your own hands, but it helps you with some common patterns, such as Namespaces, Constructors, Modules, Dependency Injection, Emitters and Decorators.
Although its awesomeness, it doesn't require any thid part library to start using Nox, but you can use any with no problems.
You can also install Noxjs using Bower.
bower install noxjs
Enough talking, let's see how we can do things happen when using Nox.js
When you create namespace in Nox, you add a Constructor to that namespace
The simple way to do this is to create a single index namespace.
Nox('App', function() {
});
typeof App; // function
You can also create more complex namespaces, using as many indexes you want. It won't replace a previous one created.
Nox('App.Home', function() {
});
Nox('App.Home.form', function() {
});
Nox('App.Home.view', function() {
});
typeof App.Home; // function
typeof App.Home.form; // function
typeof App.Home.view; // function
When you create a namespace, a constructor is attached to it, so you can easily create instances of that constructors in the old fashioned way!
Nox('App.Home.form', function() {
});
var instanceOfForm = new App.Home.form(); // function
What's the purpose of having a constructors without prototypes? Look how easy you can do that.
You can pass a parameter to the function you created using Nox, that parameter is a pointer to the constructor you are creating... So you have a closure for that constructor, and access to attach prototypes to that constructor:
Nox('App', function(app) {
app.prototype.myMethod = function() {
return true;
};
});
var instanceOfForm = new App(); // function
instanceOfForm.myMethod(); // true
It's quite boring to type the word "prototype" everytime... But there's a solution! You can use the word "fn" as an alias to prototype.
Nox('App', function(app) {
app.fn.myMethod = function() {
return true;
};
app.fn.mySecondMethod = function() {
return false;
};
});
var instanceOfForm = new App(); // function
instanceOfForm.myMethod(); // true
instanceOfForm.mySecondMethod(); // false
If you attach an method called "initialize" the prototype of your constructor, then it's automatically called when an instance is created.
Nox('App', function(app) {
app.fn.initialize = function() {
console.log('Instance created');
};
});
var instanceOfForm = new App(); // Log: Instance created
If you want to pass some parameters to your constructor when an instance is created, you can use the initialize method.
Nox('App', function(app) {
app.fn.initialize = function(param1, param2) {
console.log(param1);
console.log(param2);
};
});
var instanceOfForm = new App(true, false); // Log: true, Log: false
It's pretty simple to use this pattern when you are using Noxjs, all instances already have a method decorate on it.
First of all create your Nox method, then using Nox.decorator you can pass as the first parameter the name of the constructor which will receive the decorator and the name of the decorator, separated with "underline", like this: "App_decorator"
The second parameter is an object, and inside of that all the methods which will be decorated.
When using decorators, your instance has an object called "uber", which points to the previous instance of your instance.
Nox('Sale', function(sale) {
sale.fn.initialize = function(price) {
this.price = price;
};
sale.fn.getPrice = function() {
return this.price;
};
});
// Now I'll create some decorators, for different taxes
// Sale stands to the nox constructor
// tax1 is the decorator
Nox.decorator('Sale_tax1', {
getPrice: function() {
// uber points to the previous reference of sale
var price = this.uber.getPrice();
return price += 50;
}
});
Nox.decorator('Sale_tax2', {
getPrice: function() {
var price = this.uber.getPrice();
return price += 30;
}
});
var sale = new Sale(100);
var sale2 = new Sale(100);
sale = sale.decorate('tax1');
sale = sale.decorate('tax2');
sale.getPrice(); // 180
sale2.getPrice(); // 100
Using event emitters makes your app simpler, because you can catch events in any part of your app, and with Nox it's dead simple to use it.
All instances has those 4 methods, "on", "emit", "once", "removeListener".
With "on" you can attach an event to the instance.
Nox('App', function(app) {
app.fn.initialize = function() {
// when an instance is created, we attach an event to the instance
this.on('custom-event', this.customCallback);
};
app.fn.customCallback = function() {
console.log('Custom callback called');
}
});
var instanceOfForm = new App();
"emit" is used to trigger the previous created event.
Nox('App', function(app) {
app.fn.initialize = function() {
// when an instance is created, we attach an event to the instance
this.on('custom-event', this.customCallback);
};
app.fn.customCallback = function() {
console.log('Custom callback called');
}
});
var instanceOfForm = new App();
instanceOfForm.emit('custom-event'); // Log: Custom callback called
You can use those instances inside other Nox modules, and also emit events from a module to another.
If you want an event to be triggered only once, you can use the "once" method.
Nox('App', function(app) {
app.fn.initialize = function() {
// when an instance is created, we attach an event to the instance
this.once('custom-event', this.customCallback);
};
app.fn.customCallback = function() {
console.log('Custom callback called');
}
});
var instanceOfForm = new App();
instanceOfForm.emit('custom-event'); // Log: Custom callback called
instanceOfForm.emit('custom-event'); // Nothing happens
You can easily remove events using the "removeListener" method.
You are able to delete a single event (if it's a named function), or remove all events if no callback is specified.
Nox('App', function(app) {
app.fn.initialize = function() {
// when an instance is created, we attach an event to the instance
this.on('custom-event', this.customCallback1);
this.on('custom-event', this.customCallback2);
// Only customCallback1 is removed
this.removeListener('custom-event', this.customCallback1);
};
app.fn.customCallback1 = function() {
console.log('callback1');
}
app.fn.customCallback2 = function() {
console.log('callback2');
}
});
var instanceOfForm = new App();
instanceOfForm.emit('custom-event'); // Log: callback2
// removes all callbacks
instanceOfForm.removeListener('custom-event');
instanceOfForm.emit('custom-event'); // nothing is logged
A cool thing about Nox is that every custom module can be included with dependency injection, let's say you want to use the "events" module.
If you want to include a module, it must be passed between the namespace and the constructor function, you can pass an Array of modules, or all modules as single parameters.
And to all modules you pass, you have to use a parameter into the constructors function.
Nox('App', 'module1', 'module2', function(app, module1, module2) {
});
Nox('App2', ['module1', 'module2'], function(app, module1, module2) {
});
All constructors you created using Nox, automatically becomes a Nox module, so you can inject them into another constructor, and so on...
To include them, simply use the namespace you used to create it.
Nox('App.Home.view', function(app) {
});
Nox('New.namespace', 'App.Home.view' function(namespace, view) {
// the variable view points to the App.Home.view constructor
})
You can easily create your own modules, using Nox.module.
Nox.module('myCoolModule', function() {
var myCoolModule = {};
myCoolModule.myCoolMethod: function() {
return 'Nox :)';
};
return myCoolModule;
});
// usage
Nox('App', 'myCoolModule', function(app, myCoolModule) {
myCoolModule.myCoolMethod(); // Nox :)
})
A list of all modules created to use with Nox.
Nox.js supports the most used browsers:
Google Chrome: All major versions
Mozilla Firefox: All major versions
Internet Explorer: 7+