SSP - The Simple Singleton Pattern
76
{ @r_mdias - rmdias.com } git.io/QQ7OIQ
-
Upload
rodolfo-dias -
Category
Software
-
view
424 -
download
0
description
Development > Organization > Good practices > Standards... SSP is a easy way to modularize and organize your project. Bringing the idea of OOP to JS, but in a simple way. Using it you gain: - Readability - Understanding of the parties - Modularization - Reuse - Adaptability
Transcript of SSP - The Simple Singleton Pattern
{ RODOLFO DIAS }
{ @r_mdias - rmdias.com }
{ RECIFE - BRAZIL }
{ FRONT END ENGINEER - UFMG }
{ / MINAS DEV }
{ DESIGN PATTERNS }
WHY USE IT??
{ DESIGN PATTERNS }
{ DESIGN PATTERNS ( in JS ) }
{ → DESIGN PATTERNS (in JS)}
['Factory', 'Prototype', 'Mixin', 'Singleton']
{ → DESIGN PATTERNS (in JS)}
(A LITTLE HARD)
['Factory', 'Prototype', 'Mixin', 'Singleton']
{ DESIGN PATTERNS ( in JS ) }
(IN EASY WAY)
{ SSP }
{ SSP }
{ RODOLFO DIAS }
rmdias.com [email protected]
{ DENNIS CALAZANS }
denniscalazans.com [email protected]
{ SSP WHAT’S IT ? }
{ SSP HOW IT WORKS? }
{ → HOW IT WORKS? }
var SSP = SSP || {};
{ SSP USAGE }
{ → SSP USAGE }
<!-- Call the SSP file -->
<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 }
<!-- Incorporating Files -->
<script src="SSP.js"></script> <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 }
{ → TODO APP }
{ 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); buildTasksList(tasks); // body... });
{ → TODO APP }
deleteTaskButton.addEventListener('click', function(e) { deleteTask(taskID); buildTasksList(tasks); // body... });
{ → TODO APP }
updateTaskButton.addEventListener('click', function(e) { updateTask(taskID); buildTasksList(tasks); // body... });
'use strict';
function createTask(){ // body... };
function updateTask(taskID){ // body... };
function deleteTask(taskID){ // body... };
function completeTask(taskID){ // body... };
function taskCounter(tasks){ // body... };
function buildTasksList(tasks) { // body... };
'use strict';
function createTask(){ // body... };
function updateTask(taskID){ // body... };
function deleteTask(taskID){ // body... };
function completeTask(taskID){ // body... };
function taskCounter(tasks){ // body... };
function buildTasksList(tasks) { // body... };
:( |
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');
form.addEventListener('submit', function(e) { createTask(taskName); buildTasksList(tasks); // body... });
completeTaskButton.addEventListener('click', function(e) { completeTask(taskID); buildTasksList(tasks); // body... });
deleteTaskButton.addEventListener('click', function(e) { deleteTask(taskID); buildTasksList(tasks); // body... });
updateTaskButton.addEventListener('click', function(e) { updateTask(taskID); buildTasksList(tasks); // body... });
:( |
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');
form.addEventListener('submit', function(e) { createTask(taskName); buildTasksList(tasks); // body... });
completeTaskButton.addEventListener('click', function(e) { completeTask(taskID); buildTasksList(tasks); // body... });
deleteTaskButton.addEventListener('click', function(e) { deleteTask(taskID); buildTasksList(tasks); // body... });
updateTaskButton.addEventListener('click', function(e) { updateTask(taskID); buildTasksList(tasks); // body... });
: (`|
{ EXAMPLE → TODO APP }
(HOW TO DO USING SSP)
{ → TODO APP }
<script src="SSP.js"></script>
<script src="SSP.js"></script> <script src="SSP.Todo.js"></script>
{ → TODO APP }
<script src="SSP.js"></script> <script src="SSP.Todo.js"></script> <script src="SSP.Todo.Requests.js"></script>
{ → TODO APP }
<script src="SSP.js"></script> <script src="SSP.Todo.js"></script> <script src="SSP.Todo.Requests.js"></script> <script>SSP.init();</script>
{ → TODO APP }
{ → 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() {
}, createTask : function() { var self = this;
}, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
// SSP.Todo.JS
SSP.Todo = { setUp: function() {
SSP.Todo.createTask(); }, createTask : function() { var self = this;
}, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
// SSP.Todo.JS
SSP.Todo = { setUp: function() {
SSP.Todo.createTask(); }, createTask : function() { var self = this;
}, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
X
// SSP.Todo.JS
SSP.Todo = { setUp: function() { var self = this;
self.createTask(); }, createTask : function() { var self = this;
}, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
// SSP.Todo.JS
SSP.Todo = { setUp: function() { var self = this;
self.createTask(); self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file }, createTask : function() { var self = this;
}, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
// SSP.Todo.JS
SSP.Todo = { setUp: function() { var self = this;
self.createTask(); self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file }, createTask : function() { var self = this;
self.Requests.setTodoList(todoList);
}, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
// SSP.Todo.JS
SSP.Todo = { setUp: function() { var self = this;
self.createTask(); self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file }, createTask : function() { var self = this;
self.Requests.setTodoList(todoList); self.buildTasksList(self.Requests.getTodoList()); }, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
// SSP.Todo.JS
SSP.Todo = { setUp: function() { var self = this;
self.createTask(); self.buildTasksList(self.Requests.getTodoList()); // accessing module in another file }, createTask : function() { var self = this;
self.Requests.setTodoList(todoList); self.buildTasksList(self.Requests.getTodoList()); }, updateTask : function(taskID) { // body... }, updateTask : function(taskID) { // body... }, deleteTask : function(taskID) { // body... }, completeTask : function(taskID) { // body... }, buildTasksList : function(todoList){ // body... } }
:
(
|
// SSP.Todo.Requests.js
SSP.Todo.Requests = { setUp: function() { var self = this; }, getTodoList : function() { // body... }, setTodoList : function(parameter) { // body... } }
:
(
|
{ → TODO APP }
{ SSP → WHO USES IT? }
{ VLW, FLWS \O/ }
{ @r_mdias - rmdias.com }
{ THANKS!! }
{ @r_mdias - rmdias.com }
