Combinando OO e Funcional em javascript de forma prática

2,884
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,884
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Combinando OO e Funcional em javascript de forma prática

  1. 1. Antes de começar...
  2. 2. > typeof NaN === "number" true >
  3. 3. > "1" == 1 true > "1" === 1 false >
  4. 4. > typeof [] 'object' > Object.prototype.toString.call([]) '[object Array]'
  5. 5. Tipos dinâmicos
  6. 6. Tipos fracos Tipos dinâmicos
  7. 7. Tipos fracos Tipos dinâmicos Orientado a protótipos
  8. 8. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes
  9. 9. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces
  10. 10. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages
  11. 11. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages Não tem contexto Private
  12. 12. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages Não tem contexto Private Não tem contexto Protected
  13. 13. Não tem métodos
  14. 14. ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "An ECMAScript object is an unordered collection of properties each with zero or more attributes..."
  15. 15. ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "... and a method is a function associated with an object via a property. "
  16. 16. ECMA 262, 5.1 Edition, June 2011), página 2 (4.2): "… A function that is associated with an object via a property is a method . "
  17. 17. ECMA 262, 5.1 Edition, June 2011), página 2 (4.2): "… A function that is associated with an object via a property is a method . " ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "... and a method is a function associated with an object via a property. "
  18. 18. Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade: 'Propriedade' } >
  19. 19. Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade: 'Propriedade' } > JSON?
  20. 20. Tudo é objeto? > 1.0.toString(); '1' >
  21. 21. Tudo é objeto? > 1.toString(); ...
  22. 22. Tudo é objeto?
  23. 23. Feita em 10 dias
  24. 24. https://twitter.com/#!/diveintomark/status/112607722704343040
  25. 25. Como se divertir com uma linguagem dessas?
  26. 26. Combinando Programação funcional e Orientação a Objetos em Javascript de forma prática @cmilfont QCon São Paulo 2011
  27. 27. Minimalismo e Simplicidade
  28. 28. > var empresa = { ... denominacaoSocial: "Milfont Evil Corp" ... } > empresa.cnpj === " 9999999999999" } false >
  29. 29. > var empresa = { ... denominacaoSocial: "Milfont Evil Corp" ... } > empresa.cnpj === " 9999999999999" } false > empresa.endereco.sede === "Capitolio" TypeError: Cannot read property 'sede' of undefined
  30. 30. > if(empresa.endereco && empresa.endereco.sede && empresa.endereco.sede.numero === "Capitolio")
  31. 31. ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) => nil ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) == " teste" => false
  32. 32. > Object.prototype. try = function(){}; > empresa.try( "empresa.endereco.sede.numero " );
  33. 33. > Object. prototype . try = function(){}; > empresa.try( "empresa.endereco.sede.numero " );
  34. 34. Object.defineProperty(Object.prototype, " try " , { value: function(){} } );
  35. 35. Object. defineProperty (Object.prototype, " try " , { value: function(){} } );
  36. 36. Problemas de Extender built-in https://github.com/kriskowal/es5-shim
  37. 37. Object.defineProperty(Object.prototype, " try " , { value: function(){} } );
  38. 38. Object.defineProperty(Object.prototype, " try " , { value: function(){} } );
  39. 39. Object.defineProperty(Object.prototype, " try ing " , { value: function(){} } );
  40. 40. var markup = &quot;<div id=&quot; &quot; + id + &quot;&quot;> </div>&quot;;
  41. 41. markup = &quot;<div id=&quot; #{id} &quot;> </div>&quot;;
  42. 42. var markup = &quot;<div id=&quot; #{id} &quot;> </div>&quot;;
  43. 43. Object.defineProperty(String.prototype, 'interpolate', { enumerable: false , value: function (values, pattern) { var pattrn = pattern || /#{([^}]+)}/g ; return this .replace(pattrn, function (match, value){ var result = values[value]; return (result)? result: &quot;&quot;; }); } });
  44. 44. https://github.com/documentcloud/underscore
  45. 45. DRY
  46. 46. var empresa = { nome: $( &quot;input #nome &quot; ) , endereco: $(&quot;input#endereco&quot;) }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : &quot;application/json&quot;, headers : {&quot;Content-Type&quot;:&quot;application/json&quot;, &quot;Accept&quot;:&quot;application/json&quot;}, success : callback, type : &quot;POST&quot; , url : &quot;/empresas&quot; });
  47. 47. var empresa = { nome: $( &quot;input #nome &quot; ) , endereco: $(&quot;input#endereco&quot;) }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : &quot;application/json&quot;, headers : {&quot;Content-Type&quot;:&quot;application/json&quot;, &quot;Accept&quot;:&quot;application/json&quot;}, success : callback, type : &quot; POST &quot; , url : &quot; /empresas &quot; });
  48. 48. class EmpresasController < ApplicationController end jQuery.ajax({ data : empresa, type : &quot; POST &quot; , url : &quot; /empresas &quot; });
  49. 49. class EmpresasController < ApplicationController end rake routes POST /empresas(.:format) {:action=>&quot;create&quot;, :controller=>&quot;empresas&quot;} jQuery.ajax({ data : empresa, type : &quot; POST &quot; , url : &quot; /empresas &quot; });
  50. 50. class EmpresasController < ApplicationController end rake routes POST /empresas (.:format) {:action=>&quot; create &quot;, :controller=>&quot; empresas &quot;} jQuery.ajax({ data : empresa, type : &quot; POST &quot; , url : &quot; /empresas &quot; });
  51. 51. class EmpresasController < ApplicationController end rake routes POST /empresas (.:format) {:action=>&quot; create &quot;, :controller=>&quot; empresas &quot;} var empresas = new EmpresasController empresas. create ( empresa , callback) jQuery.ajax({ data : empresa, type : &quot; POST &quot; , url : &quot; /empresas &quot; });
  52. 52. var empresa = { nome: $( &quot;input #nome &quot; ) , endereco: $(&quot;input#endereco&quot;) }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : &quot;application/json&quot;, headers : {&quot;Content-Type&quot;:&quot;application/json&quot;, &quot;Accept&quot;:&quot;application/json&quot;}, success : callback, type : &quot;POST&quot; , url : &quot;/empresas&quot; });
  53. 53. var empresa = { nome: $( &quot;input #nome &quot; ) , endereco: $(&quot;input#endereco&quot;) }); var empresas = new EmpresasController empresas. create ( empresa , callback)
  54. 54. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; }
  55. 55. var empresas = new EmpresasController empresas. create ( empresa , callback); var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  56. 56. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; } var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  57. 57. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { } EmpresasController. prototype = DJR; var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  58. 58. function EmpresasController() { } EmpresasController. prototype = DJR;
  59. 59. function EmpresasController() { DJR.call(this); }
  60. 60. function EmpresasController() { this.useDJR = DJR; this.userDJR(); }
  61. 61. function EmpresasController() { DJR.call(this); } var InterfaceDJR = function(){ this.routes = { create : { url: &quot;/controller&quot; , method: &quot;POST&quot; } } }; EmpresasController.prototype = InterfaceDJR ;
  62. 62. function EmpresasController() { DJR.call(this); } var DJR = function() { this .ajax = function(object, callback, error, method, url, params) { jQuery.ajax({ context : self, data : object, cache : false, dataType : 'json', error : error, success : callback, type : method, url : url }); }; };
  63. 63. var DJR = function() { this.ajax = function(action, args) { var json = args[0]; var callback = args[1]; $.ajax({ url: this.route[action].url, type: this.route[action].method, data: JSON.stringify(json) }); } this. __noSuchMethod__ = function(){ this.ajax(arguments[0], arguments[1]); } };
  64. 64. var DJR = function() { }; DJR.algumMetodo = function(){}; DJR['algumMetodo'] = function(){};
  65. 65. var DJR = function() { this.ajax = function(action, args) { } for (var action in this.route) { this[action] = function() { this.ajax(act,arguments); } }; };
  66. 67. var DJR = function() { this.ajax = function(action, args) { } for (var action in this.route) { this[action] = function( act ){ return function() { this.ajax(act,arguments); } } (action) ; }; };
  67. 68. var empresa = { nome: $( &quot;input #nome &quot; ) , endereco: $(&quot;input#endereco&quot;) }); var empresas = new EmpresasController empresas. create ( empresa , callback)
  68. 69. var empresa = $(&quot;form#empresas&quot;).getJSON() ; var empresas = new EmpresasController empresas. create ( empresa , callback)
  69. 70. sammy.post('#empresas', function() { var empresa = $(&quot;form#empresas&quot;).getJSON() ; new EmpresasController() . create ( empresa , callback) });
  70. 71. var valorDosDebitos = lancamento.partidas .filter(function(partida){ return partida.natureza === Partida.DEBITO; }).map(function(partida){ return partida.valor; }).reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; }, 0);

×