SSP - The Simple Singleton Pattern

{ @r_mdias - rmdias.com }
git.io/QQ7OIQ

{ RODOLFO
DIAS }

{ DESIGN
PATTERNS }
WHY
USE IT??

{ DESIGN
PATTERNS ( in JS ) }

{ → DESIGN PATTERNS (in JS)}
['Factory', 'Prototype', 'Mixin', 'Singleton']

{ → DESIGN PATTERNS (in JS)}
['Factory', 'Prototype', 'Mixin', 'Singleton']
(A LITTLE
HARD)

{ DESIGN
PATTERNS ( in JS ) }
(IN
EASY WAY)

{ DENNIS
CALAZANS }
denniscalazans.com
contato@denniscalazans.com

{ RODOLFO
DIAS }
rmdias.com
contact@rmdias.com
{ DENNIS
CALAZANS }
denniscalazans.com
contato@denniscalazans.com

{ → HOW IT WORKS? }
var SSP = SSP || {};

{ → SSP USAGE }

<script src="SSP.js"></script>

{ → SSP USAGE }
// SSP.MyModule.js
SSP.MyModule = {
setUp: function() {
console.debug("My SSP module is runing!");
}
}

{ → SSP USAGE }
// SSP.MyModule.Child.js
SSP.MyModule.Child = {
setUp: function() {
console.debug("My SSP module is runing!");
}
}

{ → SSP USAGE }

<script src="SSP.MyModule.js"></script>
<script src="SSP.MyModule.Child.js"></script>
<script>SSP.init();</script>

{ SSP
METHODS
AND
PROPERTIES }

{ → SSP - PROPERTIES / _nameSpace }
// All modules have a property called nameSpace that
// returning string the name of module.
SSP.MyModule = {
setUp: function() {
var self = this;
console.debug(self._nameSpace);
// return -> "SSP.MyModule"
}
}

{ → SSP - METHODS / .setUp( ) }
// SetUp is a Main method.
// It always runs when the father's module is called.
SSP.MyModule = {
setUp: function() {
console.debug(‘My SSP Module is running!’);
// return -> "My SSP Module is running!"
}
}

{ → SSP - METHODS / .init( ) }
// This method initialize all modules from your application.
SSP.init();
SSP.init(SSP.MyModule);
SSP.init(SSP.MyModule, SSP.MyOtherModule);

{ → SSP - METHODS / .applyByNamespace(‘namespace’, params) }
// Using this you can run a method that's located in other
// module/part from your application, but using `_namespace`.
// For example:
SSP.applyByNamespace(‘SSP.MyModule');
// SSP.MyModule();

{ → SSP - METHODS / .applyByNamespace(‘namespace’, params) }
// Using this you can run a method that's located in other
// module/part from your application, but using `_namespace`.
// For example:
SSP.applyByNamespace(‘SSP.MyModule’, SomeParameter);
// SSP.MyModule(SomeParameter);

{ → SSP - PROPERTIES AND METHODS }
// Available Methods
- _nameSpace;
- .init();
- .setUp();
- .delegate(scope, method);
- .readModule(Module);
- .getByNamespace('namespace');
- .applyByNamespace('namespace');
- .initModuleByNamespace('nameSpace', params);

{ EXAMPLE
→ TODO APP }
(HOW
WE DO)

{ → TODO APP }
<script src="Todo.js"></script>

{ → TODO APP }
'use strict';
function createTask(){
// body...
};

{ → TODO APP }
'use strict';
function updateTask(taskID){
// body...
};

{ → TODO APP }
'use strict';
function deleteTask(taskID){
// body...
};

{ → TODO APP }
'use strict';
function completeTask(taskID){
// body...
};

{ → TODO APP }
'use strict';
function buildTasksList(tasks) {
// body...
};

{ → TODO APP }
var form, completeTaskButton, deleteTaskButton, updateTaskButton;
form = document.querySelector('.submit-task');
completeTaskButton = document.querySelector('.complete-task');
deleteTaskButton = document.querySelector('.delete-task');
updateTaskButton = document.querySelector('.update-task');

{ → TODO APP }
form.addEventListener('submit', function(e) {
createTask(taskName);
buildTasksList(tasks);
// body...
});

{ → TODO APP }
completeTaskButton.addEventListener('click', function(e) {
completeTask(taskID);
// body...
});

{ → TODO APP }
deleteTaskButton.addEventListener('click', function(e) {
deleteTask(taskID);
// body...
});

{ → TODO APP }
updateTaskButton.addEventListener('click', function(e) {
updateTask(taskID);
// body...
});

'use strict';
// body...
};
// body...
};
// body...
};
// body...
};
function taskCounter(tasks){
// body...
};
// body...
};

'use strict';
// body...
};
// body...
};
// body...
};
// body...
};
function taskCounter(tasks){
// body...
};
// body...
};
|
:(

// body...
});
// body...
});
deleteTask(taskID);
// body...
});
updateTask(taskID);
// body...
});
|
:(

// body...
});
// body...
});
deleteTask(taskID);
// body...
});
updateTask(taskID);
// body...
});
|
: (`

{ EXAMPLE
→ TODO APP }
(HOW TO DO
USING SSP)

{ → TODO APP }

{ → TODO APP }
<script src="SSP.Todo.js"></script>

{ → TODO APP }
<script src="SSP.Todo.Requests.js"></script>

{ → TODO APP }
<script src="SSP.Todo.Requests.js"></script>
<script>SSP.init();</script>

{ → TODO APP }
// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
},
createTask : function() {
// body...
},
buildTasksList : function(todoList){
// body...
}
}

{ → TODO APP }
// SSP.Todo.Requests.js
SSP.Todo.Requests = {
setUp: function() {
var self = this;
},
getTodoList : function() {
// body...
},
setTodoList : function(parameter) {
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
},
var self = this;
},
updateTask : function(taskID) {
// body...
},
// body...
},
deleteTask : function(taskID) {
// body...
},
completeTask : function(taskID) {
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
SSP.Todo.createTask();
},
var self = this;
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
X
SSP.Todo.createTask();
},
var self = this;
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
},
var self = this;
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file
},
var self = this;
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
},
var self = this;
self.Requests.setTodoList(todoList);
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
},
var self = this;
self.buildTasksList(self.Requests.getTodoList());
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}

// SSP.Todo.JS
SSP.Todo = {
setUp: function() {
var self = this;
self.createTask();
},
var self = this;
self.buildTasksList(self.Requests.getTodoList());
},
// body...
},
// body...
},
// body...
},
// body...
},
// body...
}
}
|
: (

// SSP.Todo.Requests.js
SSP.Todo.Requests = {
setUp: function() {
var self = this;
},
getTodoList : function() {
// body...
},
setTodoList : function(parameter) {
// body...
}
}
|
: (

{ VLW, FLWS O/ }

{ THANKS!! }

SSP - The Simple Singleton Pattern

More Related Content

What's hot (16)

Viewers also liked (14)

SSP - The Simple Singleton Pattern