Building the Web Application - HTML5, JavaScript, and jQuery - page 155

It is important that you understand the importance of the () at the end of this code block. It
means that the variable represented by tasksController is set to the object returned by the
anonymous function, not the function itself.
The main advantage of this approach is that no other code can construct another tasksCon-
troller , since there is no function that can be invoked. As a result, the variable tasksCon-
troller is a singleton. A singleton is another design pattern that is used to ensure only a
single instance of a type of object (in traditional object orientated languages, only a single
instance of a class) will exist in the application.
It is important that our tasksController is a singleton, since it is going to manage state. If
multiple tasksController were created they may have different state, and would therefore
interfere with each other when they attempted to update the DOM with this state.
The controller will have a method called init that will be responsible for performing any
initialisation tasks that need to occur when tasks.html loads, but this will be called expli-
citly within tasks.html rather than implicitly when the script loads. This is because we may
have multiple controllers for different functional areas, and we only want to initialize them
when the user selects to use them.
When we initialize the controller we are going to pass it the main element in tasks.html
page as a parameter, This controller is going to be responsible for that specific portion of
the DOM, and therefore any jQuery selects it performs should be done within the context
of that element.

This is not going to be important in this application, since it will only consist of a single
distinct set of functionality, however in a large scale single-page application, with many
functional areas, each functional area would be given its own controller, and its own main
element that it is responsible for.
The following is our controller implementation:

tasksController = function() {
var taskPage;

var initialised = false;

return {

init : function(page) {
if (!initialised) {

taskPage = page;

$(taskPage).find( '[required="required"]' ).prev('label').append( '<span>*</span>').children(

'span').addClass('required');