jQueryMX is a collection of jQuery libraries that provides functionality necessary to implement and organize large JavaScript applications.
It provides classical inheritance simulation, model-view-controller layers to provide logically separated codebase. It also provides useful DOM helpers, custom events, and language helpers.
In this chapter we will go through the most common or most interesting ones.
Note
For the full plugins list go to http://javascriptmvc.com/docs.html#!jquerymx.
We use the existing Todo application folder structure to play around with jQueryMX plugins.
In the Todo folder create a jquerymx_playground folder with two files using the following code snippet:
<!doctype html>
<html>
<head>
<title>jQueryMX playground</title>
<meta charset="UTF-8"/>
</head>
<body>
<script src="../steal/steal.js?jquerymx_playground/jquerymx_playground_0.js"></script>
</body>
</html>When a code snippet is indicated as run in the console it means paste and execute the example in Google Chrome Console on the opened index.html page. We can use any web browser console such as Firebug, however, Google Chrome (and Safari) seem to be among the best at the moment and have a very handy code complementation.
$.Class provides classical inheritance simulation based on John Resig's Simple JavaScript Inheritance found at http://ejohn.org/blog/simple-javascript-inheritance/.
The class method is available to all class instances whereas the instance method is available only to a particular instance.
Let's write some examples in the file jquerymx_playground_0.js:
steal(
'jquery/class',
function ($) {
$.Class('Bank.Account', {
setup: function () {
console.log('Bank.Account class: setup'),
},
init: function () {
console.log('Bank.Account class: init'),
},
getType: function () {
return 'Bank.Account class method';
}
},
{
setup: function () {
console.log('Bank.Account instance: setup'),
},
init: function () {
console.log('Bank.Account instance: init'),
},
getType: function () {
return 'Bank.Account instance method';
}
}
);
Bank.Account('Bank.Account.SavingsAccount', {
setup: function () {
console.log('Bank.Account.SavingsAccountclass: setup'),
},
init: function () {
console.log('Bank.Account.SavingsAccountclass: init'),
}
},
{
setup: function () {
console.log('Bank.Account.SavingsAccountinstance: setup'),
},
init: function () {
console.log('Bank.Account.SavingsAccountinstance: init'),
},
// getExtendedType: function () {
// return 'Hello ' + this.getType();
// },
getType: function () {
return 'Hello ' + this._super();
}
}
);
// console.log('instantiate: acc, savingAcc'),
// window.acc = new Bank.Account();
// window.savingAcc = new Bank.Account.SavingsAccount();
}
);In the console we can see that classes are created. Lets create some instances as follows:
var acc = new Bank.Account(); var savingAcc = new Bank.Account.SavingAccount();
We can execute instance methods as follows:
acc.getType(); savingAcc.getType();
In the following sections, let's break down the code and see what happened here.
Using $.Class we created a new class with the name Account passing the string Bank.Account as a first parameter. By using the dot notation we created a namespace Bank. This is why we created a new instance of the class Account we called Bank.Account. In this case Bank is just an empty object to help us create nice and tidy application object structure.
An alternative namespace, for example, could CompanyName.Product.SomeClass.
As the second parameter we passed object with properties, which are class properties shared with all classes instances.
In our case class method getType from the Account class is available in the SavingAccount class. We can thus type the following in the console:
Bank.Account.SavingsAccount.getType();
As the third parameter we passed an object with properties, which are instance properties shared with all instances. We thus type the following command in the console:
savingAcc.getType();
In the getType instance method example, we can see how to override methods in the children objects.
In SavingAccount we override the getType method by adding an additional Hello string to the ancestor method of the same name, and call ancestor method using the following:
this._super();
In case we don't want to use the same name, we can use the following:
getExtendedType: function () {
return 'Hello ' + this.getType();
}