Your SlideShare is downloading. ×
0
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Beagajs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beagajs

860

Published on

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

No Downloads
Views
Total Views
860
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Antes de começar...
  • 2. > typeof NaN === "number" true >
  • 3. > "1" == 1 true > "1" === 1 false >
  • 4. > typeof [] 'object' > Object.prototype.toString.call([]) '[object Array]'
  • 5. Tipos dinâmicos
  • 6. Tipos fracos Tipos dinâmicos
  • 7. Tipos fracos Tipos dinâmicos Orientado a protótipos
  • 8. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes
  • 9. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces
  • 10. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages
  • 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. 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. Não tem métodos
  • 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. 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. 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. 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. Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade: 'Propriedade' } >
  • 19. Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade: 'Propriedade' } > JSON?
  • 20. Tudo é objeto? > 1.0.toString(); '1' >
  • 21. Tudo é objeto? > 1.toString(); ...
  • 22. Tudo é objeto?
  • 23. Feita em 10 dias
  • 24. https://twitter.com/#!/diveintomark/status/112607722704343040
  • 25. Como se divertir com uma linguagem dessas?
  • 26. Combinando Programação funcional e Orientação a Objetos em Javascript de forma prática e divertida @cmilfont Beaga JS Beozonte 2012
  • 27. Minimalismo e Simplicidade
  • 28. > var empresa = { ... denominacaoSocial: "Milfont Evil Corp" ... } > empresa.cnpj === "9999999999999" } false >
  • 29. > var empresa = { ... denominacaoSocial: "Milfont Evil Corp" ... } > empresa.cnpj === "9999999999999" } false > empresa.endereco.sede === "Capitolio" TypeError: Cannot read property 'sede' of undefined
  • 30. > if(empresa.endereco && empresa.endereco.sede && empresa.endereco.sede.numero === "Capitolio")
  • 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. > Object.prototype.try = function(){}; > empresa.try("empresa.endereco.sede.numero");
  • 33. > Object. prototype .try = function(){}; > empresa.try("empresa.endereco.sede.numero");
  • 34. Object.defineProperty(Object.prototype, "try", { value: function(){} } );
  • 35. Object. defineProperty (Object.prototype, "try", { value: function(){} } );
  • 36. Problemas de Extender built-in https://github.com/kriskowal/es5-shim
  • 37. Object.defineProperty(Object.prototype, "try", { value: function(){} } );
  • 38. Object.defineProperty(Object.prototype, " try ", { value: function(){} } );
  • 39. Object.defineProperty(Object.prototype, "try ing ", { value: function(){} } );
  • 40. var markup = &quot;<div id=&quot;&quot; + id + &quot;&quot;> </div>&quot;;
  • 41. markup = &quot;<div id=&quot; #{id} &quot;> </div>&quot;;
  • 42. var markup = &quot;<div id=&quot; #{id} &quot;> </div>&quot;;
  • 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. https://github.com/documentcloud/underscore
  • 45. DRY
  • 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. 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. class EmpresasController < ApplicationController end jQuery.ajax({ data : empresa, type : &quot; POST &quot;, url : &quot; /empresas &quot; });
  • 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. 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. 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. 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. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); var empresas = new EmpresasController empresas. create ( empresa , callback)
  • 54. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; }
  • 55. var empresas = new EmpresasController empresas. create ( empresa , callback); var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  • 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. 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. function EmpresasController() { } EmpresasController. prototype = DJR;
  • 59. function EmpresasController() { DJR.call(this); }
  • 60. function EmpresasController() { this.useDJR = DJR; this.userDJR(); }
  • 61. function EmpresasController() { DJR.call(this); } var InterfaceDJR = function(){ this.routes = { create : { url: &quot;/controller&quot; , method: &quot;POST&quot; } } }; EmpresasController.prototype = InterfaceDJR;
  • 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. 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. var DJR = function() { }; DJR.algumMetodo = function(){}; DJR['algumMetodo'] = function(){};
  • 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) ; }; };
  • 68. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); var empresas = new EmpresasController empresas. create ( empresa , callback)
  • 69. var empresa = $(&quot;form#empresas&quot;).getJSON() ; var empresas = new EmpresasController empresas. create ( empresa , callback)
  • 70. sammy.post('#empresas', function() { var empresa = $(&quot;form#empresas&quot;).getJSON() ; new EmpresasController() . create ( empresa , callback) });
  • 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);
  • 72. https://github.com/milfont
  • 73. http://www.egenial.pro/pt/extjs

×