Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SSP - The Simple Singleton Pattern

1,052 views

Published on

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

Published in: Software
  • Be the first to comment

SSP - The Simple Singleton Pattern

  1. 1. { @r_mdias - rmdias.com } git.io/QQ7OIQ
  2. 2. { RODOLFO DIAS } { @r_mdias - rmdias.com }
  3. 3. { RECIFE - BRAZIL }
  4. 4. { FRONT END ENGINEER - UFMG }
  5. 5. { / MINAS DEV }
  6. 6. { DESIGN PATTERNS }
  7. 7. { DESIGN PATTERNS } WHY USE IT??
  8. 8. { DESIGN PATTERNS ( in JS ) }
  9. 9. { → DESIGN PATTERNS (in JS)} ['Factory', 'Prototype', 'Mixin', 'Singleton']
  10. 10. { → DESIGN PATTERNS (in JS)} ['Factory', 'Prototype', 'Mixin', 'Singleton'] (A LITTLE HARD)
  11. 11. { DESIGN PATTERNS ( in JS ) } (IN EASY WAY)
  12. 12. { SSP }
  13. 13. { SSP }
  14. 14. git.io/QQ7OIQ
  15. 15. git.io/QQ7OIQ
  16. 16. { DENNIS CALAZANS } denniscalazans.com contato@denniscalazans.com
  17. 17. { RODOLFO DIAS } rmdias.com contact@rmdias.com { DENNIS CALAZANS } denniscalazans.com contato@denniscalazans.com
  18. 18. { SSP WHAT’S IT ? }
  19. 19. { SSP HOW IT WORKS? }
  20. 20. { → HOW IT WORKS? } var SSP = SSP || {};
  21. 21. { SSP USAGE }
  22. 22. { → SSP USAGE } <!-- Call the SSP file --> <script src="SSP.js"></script>
  23. 23. { → SSP USAGE } // SSP.MyModule.js SSP.MyModule = { setUp: function() { console.debug("My SSP module is runing!"); } }
  24. 24. { → SSP USAGE } // SSP.MyModule.Child.js SSP.MyModule.Child = { setUp: function() { console.debug("My SSP module is runing!"); } }
  25. 25. { → 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>
  26. 26. { SSP METHODS AND PROPERTIES }
  27. 27. { → 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" } }
  28. 28. { → 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!" } }
  29. 29. { → SSP - METHODS / .init( ) } // This method initialize all modules from your application. SSP.init(); SSP.init(SSP.MyModule); SSP.init(SSP.MyModule, SSP.MyOtherModule);
  30. 30. { → 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();
  31. 31. { → 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);
  32. 32. { → SSP - PROPERTIES AND METHODS } // Available Methods - _nameSpace; - .init(); - .setUp(); - .delegate(scope, method); - .readModule(Module); - .getByNamespace('namespace'); - .applyByNamespace('namespace'); - .initModuleByNamespace('nameSpace', params);
  33. 33. { EXAMPLE → TODO APP }
  34. 34. { → TODO APP }
  35. 35. { EXAMPLE → TODO APP } (HOW WE DO)
  36. 36. { → TODO APP } <script src="Todo.js"></script>
  37. 37. { → TODO APP } 'use strict'; function createTask(){ // body... };
  38. 38. { → TODO APP } 'use strict'; function updateTask(taskID){ // body... };
  39. 39. { → TODO APP } 'use strict'; function deleteTask(taskID){ // body... };
  40. 40. { → TODO APP } 'use strict'; function completeTask(taskID){ // body... };
  41. 41. { → TODO APP } 'use strict'; function buildTasksList(tasks) { // body... };
  42. 42. { → 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');
  43. 43. { → TODO APP } form.addEventListener('submit', function(e) { createTask(taskName); buildTasksList(tasks); // body... });
  44. 44. { → TODO APP } completeTaskButton.addEventListener('click', function(e) { completeTask(taskID); buildTasksList(tasks); // body... });
  45. 45. { → TODO APP } deleteTaskButton.addEventListener('click', function(e) { deleteTask(taskID); buildTasksList(tasks); // body... });
  46. 46. { → TODO APP } updateTaskButton.addEventListener('click', function(e) { updateTask(taskID); buildTasksList(tasks); // body... });
  47. 47. '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... };
  48. 48. '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... }; | :(
  49. 49. 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... }); | :(
  50. 50. 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... }); | : (`
  51. 51. { EXAMPLE → TODO APP } (HOW TO DO USING SSP)
  52. 52. { → TODO APP } <script src="SSP.js"></script>
  53. 53. { → TODO APP } <script src="SSP.js"></script> <script src="SSP.Todo.js"></script>
  54. 54. { → TODO APP } <script src="SSP.js"></script> <script src="SSP.Todo.js"></script> <script src="SSP.Todo.Requests.js"></script>
  55. 55. { → TODO APP } <script src="SSP.js"></script> <script src="SSP.Todo.js"></script> <script src="SSP.Todo.Requests.js"></script> <script>SSP.init();</script>
  56. 56. { → TODO APP } // SSP.Todo.JS SSP.Todo = { setUp: function() { var self = this; }, createTask : function() { // body... }, buildTasksList : function(todoList){ // body... } }
  57. 57. { → TODO APP } // SSP.Todo.Requests.js SSP.Todo.Requests = { setUp: function() { var self = this; }, getTodoList : function() { // body... }, setTodoList : function(parameter) { // body... } }
  58. 58. // 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... } }
  59. 59. // 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... } }
  60. 60. // SSP.Todo.JS SSP.Todo = { setUp: function() { X 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... } }
  61. 61. // 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... } }
  62. 62. // 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... } }
  63. 63. // 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... } }
  64. 64. // 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... } }
  65. 65. // 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... } } | : (
  66. 66. // SSP.Todo.Requests.js SSP.Todo.Requests = { setUp: function() { var self = this; }, getTodoList : function() { // body... }, setTodoList : function(parameter) { // body... } } | : (
  67. 67. { → TODO APP }
  68. 68. git.io/QQ7OIQ
  69. 69. { SSP → WHO USES IT? }
  70. 70. git.io/QQ7OIQ
  71. 71. { VLW, FLWS O/ } { @r_mdias - rmdias.com }
  72. 72. { THANKS!! } { @r_mdias - rmdias.com }

×