SlideShare ist ein Scribd-Unternehmen logo
1 von 71
Antes de começar...
> typeof NaN === "number" true >
> "1" == 1 true > "1" === 1 false >
> typeof [] 'object' > Object.prototype.toString.call([]) '[object Array]'
Tipos dinâmicos
Tipos fracos Tipos dinâmicos
Tipos fracos Tipos dinâmicos Orientado a protótipos
Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes
Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces
Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages
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
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
Não tem métodos
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..."
ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "...  and a method is a function associated with an object via a property. "
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, 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. "
Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade:  'Propriedade'  } >
Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade:  'Propriedade'  } > JSON?
Tudo é objeto? > 1.0.toString(); '1' >
Tudo é objeto? > 1.toString(); ...
Tudo é objeto?
Feita em 10 dias
https://twitter.com/#!/diveintomark/status/112607722704343040
Como se divertir com uma linguagem dessas?
Combinando Programação funcional e Orientação a Objetos em Javascript de forma prática @cmilfont QCon São Paulo 2011
Minimalismo e Simplicidade
> var empresa = { ... denominacaoSocial:  "Milfont Evil Corp" ... } > empresa.cnpj  ===   " 9999999999999"  } false >
> var empresa = { ... denominacaoSocial:  "Milfont Evil Corp" ... } > empresa.cnpj  ===   " 9999999999999"  } false > empresa.endereco.sede === "Capitolio" TypeError: Cannot read property 'sede' of undefined
> if(empresa.endereco &&  empresa.endereco.sede &&  empresa.endereco.sede.numero === "Capitolio")
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
> Object.prototype. try  =  function(){}; > empresa.try( "empresa.endereco.sede.numero " );
> Object. prototype . try  =  function(){}; > empresa.try( "empresa.endereco.sede.numero " );
Object.defineProperty(Object.prototype,  " try " ,  { value: function(){} } );
Object. defineProperty (Object.prototype,  " try " ,  { value: function(){} } );
Problemas de Extender built-in https://github.com/kriskowal/es5-shim
Object.defineProperty(Object.prototype,  " try " ,  { value: function(){} } );
Object.defineProperty(Object.prototype,  " try " ,  { value: function(){} } );
Object.defineProperty(Object.prototype,  " try ing " ,  { value: function(){} } );
var markup = &quot;<div id=amp;quot; &quot;  +  id  +  &quot;amp;quot;>  </div>&quot;;
markup = &quot;<div id=amp;quot; #{id} amp;quot;>  </div>&quot;;
var  markup = &quot;<div id=amp;quot; #{id} amp;quot;>  </div>&quot;;
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;; }); } });
https://github.com/documentcloud/underscore
DRY
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; });
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; });
class   EmpresasController   <   ApplicationController end jQuery.ajax({  data  : empresa, type  :  &quot; POST &quot; , url  :  &quot; /empresas &quot; });
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; });
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; });
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; });
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; });
var empresa =  { nome:   $( &quot;input #nome &quot; ) , endereco:   $(&quot;input#endereco&quot;) }); var empresas = new  EmpresasController empresas. create ( empresa , callback)
var empresas = new  EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; }
var empresas = new  EmpresasController empresas. create ( empresa , callback); var Interface = { this.routes = { action : { url:  &quot;/controller&quot; , method:  &quot;POST&quot; } };
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; } };
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; } };
function EmpresasController() { } EmpresasController. prototype  = DJR;
function EmpresasController() { DJR.call(this); }
function EmpresasController() { this.useDJR = DJR; this.userDJR(); }
function EmpresasController() { DJR.call(this); } var InterfaceDJR = function(){ this.routes = { create : { url:  &quot;/controller&quot; , method:  &quot;POST&quot; } } }; EmpresasController.prototype = InterfaceDJR ;
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 }); }; };
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]); } };
var DJR = function() { }; DJR.algumMetodo = function(){}; DJR['algumMetodo'] = function(){};
var DJR = function() { this.ajax = function(action, args) {  } for (var action in this.route) { this[action] = function() { this.ajax(act,arguments); } }; };
 
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) ; }; };
var empresa =  { nome:   $( &quot;input #nome &quot; ) , endereco:   $(&quot;input#endereco&quot;) }); var empresas = new  EmpresasController empresas. create ( empresa , callback)
var empresa =  $(&quot;form#empresas&quot;).getJSON() ; var empresas = new  EmpresasController empresas. create ( empresa , callback)
sammy.post('#empresas', function() { var empresa =  $(&quot;form#empresas&quot;).getJSON() ; new  EmpresasController() . create ( empresa , callback) });
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);

Weitere ähnliche Inhalte

Was ist angesagt?

(Portuguese) Java EE Poliglota
(Portuguese) Java EE Poliglota(Portuguese) Java EE Poliglota
(Portuguese) Java EE PoliglotaPhil Calçado
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
PHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsPHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsGuilherme Blanco
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007Claudio Gamboa
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
Object Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simplesObject Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simplesOtávio Calaça Xavier
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBLuciano Borges
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksBruno Abrantes
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScriptClaudio Gamboa
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend FrameworkJaime Neto
 
modernizando a arquitertura de sua aplicação
modernizando a arquitertura  de sua aplicaçãomodernizando a arquitertura  de sua aplicação
modernizando a arquitertura de sua aplicaçãoAntonio Spinelli
 
Gerando bindings de bibliotecas C++ para Python
Gerando bindings de bibliotecas C++ para PythonGerando bindings de bibliotecas C++ para Python
Gerando bindings de bibliotecas C++ para PythonMarcelo Lira
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroMichael Castillo Granados
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da WebJose Berardo
 

Was ist angesagt? (19)

Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
 
(Portuguese) Java EE Poliglota
(Portuguese) Java EE Poliglota(Portuguese) Java EE Poliglota
(Portuguese) Java EE Poliglota
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
PHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsPHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object Calisthenics
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
Object Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simplesObject Calisthenics: relaxe e escreva códigos simples
Object Calisthenics: relaxe e escreva códigos simples
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Javascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworksJavascript - Princípios da linguagem e utilização de frameworks
Javascript - Princípios da linguagem e utilização de frameworks
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScript
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend Framework
 
Php 08 Oo
Php 08 OoPhp 08 Oo
Php 08 Oo
 
modernizando a arquitertura de sua aplicação
modernizando a arquitertura  de sua aplicaçãomodernizando a arquitertura  de sua aplicação
modernizando a arquitertura de sua aplicação
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
Gerando bindings de bibliotecas C++ para Python
Gerando bindings de bibliotecas C++ para PythonGerando bindings de bibliotecas C++ para Python
Gerando bindings de bibliotecas C++ para Python
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguro
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 

Andere mochten auch

Engine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML SpritesEngine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML SpritesMilfont Consulting
 
Apresentando Extreme Programming
Apresentando Extreme ProgrammingApresentando Extreme Programming
Apresentando Extreme ProgrammingMilfont Consulting
 
BDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e RailsBDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e RailsMilfont Consulting
 
Equipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridasEquipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridasMilfont Consulting
 
Internet 2020: The Future Connection
Internet 2020: The Future ConnectionInternet 2020: The Future Connection
Internet 2020: The Future ConnectionChristine Nolan
 

Andere mochten auch (10)

Engine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML SpritesEngine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML Sprites
 
Domain driven design
Domain driven designDomain driven design
Domain driven design
 
Behaviour Driven Development
Behaviour Driven DevelopmentBehaviour Driven Development
Behaviour Driven Development
 
Apresentando Extreme Programming
Apresentando Extreme ProgrammingApresentando Extreme Programming
Apresentando Extreme Programming
 
BDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e RailsBDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e Rails
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
 
Mvc sem Controller
Mvc sem ControllerMvc sem Controller
Mvc sem Controller
 
Mare de Agilidade - BDD e TDD
Mare de Agilidade - BDD e TDDMare de Agilidade - BDD e TDD
Mare de Agilidade - BDD e TDD
 
Equipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridasEquipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridas
 
Internet 2020: The Future Connection
Internet 2020: The Future ConnectionInternet 2020: The Future Connection
Internet 2020: The Future Connection
 

Ähnlich wie Combinando OO e Funcional em javascript de forma prática

Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebBruno Borges
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryHarlley Oliveira
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Bruno Borges
 
03 - Formulários &amp; Dados
03 - Formulários &amp; Dados03 - Formulários &amp; Dados
03 - Formulários &amp; DadosMarcio Marinho
 
2009 05 20 Floripa Flex
2009 05 20 Floripa Flex2009 05 20 Floripa Flex
2009 05 20 Floripa FlexEduardo Kraus
 
Puppet – Torne Seu Datacenter áGil
Puppet – Torne Seu Datacenter áGilPuppet – Torne Seu Datacenter áGil
Puppet – Torne Seu Datacenter áGiljefesrodrigues
 
JavaScript - Aula Introdutória
JavaScript - Aula IntrodutóriaJavaScript - Aula Introdutória
JavaScript - Aula Introdutórialucasleite
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage apiSuissa
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework JavascriptMarcio Romu
 
MongoDB com a Turma do Chaves
MongoDB com a Turma do ChavesMongoDB com a Turma do Chaves
MongoDB com a Turma do ChavesPedro Menezes
 
uma história sobre testes de API
uma história sobre testes de APIuma história sobre testes de API
uma história sobre testes de APISamuel Lourenço
 
LINQ - Language Integrated Query
LINQ - Language Integrated QueryLINQ - Language Integrated Query
LINQ - Language Integrated QueryDalton Valadares
 

Ähnlich wie Combinando OO e Funcional em javascript de forma prática (20)

Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento Web
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
 
nDeveloper Framework
nDeveloper FrameworknDeveloper Framework
nDeveloper Framework
 
Spring Capitulo 02
Spring Capitulo 02Spring Capitulo 02
Spring Capitulo 02
 
Uma Breve Introdução ao MongoDB
Uma Breve Introdução ao MongoDBUma Breve Introdução ao MongoDB
Uma Breve Introdução ao MongoDB
 
03 - Formulários &amp; Dados
03 - Formulários &amp; Dados03 - Formulários &amp; Dados
03 - Formulários &amp; Dados
 
Tutorial Dwr - Combos Dependentes
Tutorial Dwr - Combos DependentesTutorial Dwr - Combos Dependentes
Tutorial Dwr - Combos Dependentes
 
2009 05 20 Floripa Flex
2009 05 20 Floripa Flex2009 05 20 Floripa Flex
2009 05 20 Floripa Flex
 
Puppet – Torne Seu Datacenter áGil
Puppet – Torne Seu Datacenter áGilPuppet – Torne Seu Datacenter áGil
Puppet – Torne Seu Datacenter áGil
 
JavaScript - Aula Introdutória
JavaScript - Aula IntrodutóriaJavaScript - Aula Introdutória
JavaScript - Aula Introdutória
 
Facelets
FaceletsFacelets
Facelets
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage api
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
MongoDB com a Turma do Chaves
MongoDB com a Turma do ChavesMongoDB com a Turma do Chaves
MongoDB com a Turma do Chaves
 
uma história sobre testes de API
uma história sobre testes de APIuma história sobre testes de API
uma história sobre testes de API
 
LINQ - Language Integrated Query
LINQ - Language Integrated QueryLINQ - Language Integrated Query
LINQ - Language Integrated Query
 
Php 04 Mysql
Php 04 MysqlPhp 04 Mysql
Php 04 Mysql
 
Spring Capitulo 03
Spring Capitulo 03Spring Capitulo 03
Spring Capitulo 03
 

Mehr von Milfont Consulting (20)

Continuous integration e continuous delivery para salvar o seu projeto!
Continuous integration e continuous delivery para salvar o seu projeto!Continuous integration e continuous delivery para salvar o seu projeto!
Continuous integration e continuous delivery para salvar o seu projeto!
 
MVC Model 3
MVC Model 3MVC Model 3
MVC Model 3
 
Dar caos à ordem
Dar caos à ordemDar caos à ordem
Dar caos à ordem
 
I TDD my jQuery code without Browser
I TDD my jQuery code without BrowserI TDD my jQuery code without Browser
I TDD my jQuery code without Browser
 
Oxente BDD
Oxente BDDOxente BDD
Oxente BDD
 
Construindo WebApps ricas com Rails e Sencha
Construindo WebApps ricas com Rails e SenchaConstruindo WebApps ricas com Rails e Sencha
Construindo WebApps ricas com Rails e Sencha
 
Dar Ordem ao Caos
Dar Ordem ao CaosDar Ordem ao Caos
Dar Ordem ao Caos
 
Primeiro Dia Livre Opensocial
Primeiro Dia Livre OpensocialPrimeiro Dia Livre Opensocial
Primeiro Dia Livre Opensocial
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
 
Course Hibernate 2008
Course Hibernate 2008Course Hibernate 2008
Course Hibernate 2008
 
Opensocial
OpensocialOpensocial
Opensocial
 
Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
OpenSocial CCT
OpenSocial CCTOpenSocial CCT
OpenSocial CCT
 
Cct Dsl
Cct DslCct Dsl
Cct Dsl
 
Conhecendo a JSR 223: Scripting for the Java Platform
Conhecendo a JSR 223: Scripting for the Java PlatformConhecendo a JSR 223: Scripting for the Java Platform
Conhecendo a JSR 223: Scripting for the Java Platform
 
Ajaxificando
AjaxificandoAjaxificando
Ajaxificando
 
Integração Contínua 3FCSL
Integração Contínua 3FCSLIntegração Contínua 3FCSL
Integração Contínua 3FCSL
 
Extreme Programming
Extreme ProgrammingExtreme Programming
Extreme Programming
 
Sead 29 09 2006 Usabilidade Com Ajax
Sead 29 09 2006 Usabilidade Com AjaxSead 29 09 2006 Usabilidade Com Ajax
Sead 29 09 2006 Usabilidade Com Ajax
 
Tw Course Ajax 2007 Ap04
Tw Course Ajax 2007 Ap04Tw Course Ajax 2007 Ap04
Tw Course Ajax 2007 Ap04
 

Combinando OO e Funcional em javascript de forma prática

  • 2. > typeof NaN === &quot;number&quot; true >
  • 3. > &quot;1&quot; == 1 true > &quot;1&quot; === 1 false >
  • 4. > typeof [] 'object' > Object.prototype.toString.call([]) '[object Array]'
  • 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
  • 14. ECMA 262, 3rd Edition, December 1999), página 2 (4.2): &quot;An ECMAScript object is an unordered collection of properties each with zero or more attributes...&quot;
  • 15. ECMA 262, 3rd Edition, December 1999), página 2 (4.2): &quot;... and a method is a function associated with an object via a property. &quot;
  • 16. ECMA 262, 5.1 Edition, June 2011), página 2 (4.2): &quot;… A function that is associated with an object via a property is a method . &quot;
  • 17. ECMA 262, 5.1 Edition, June 2011), página 2 (4.2): &quot;… A function that is associated with an object via a property is a method . &quot; ECMA 262, 3rd Edition, December 1999), página 2 (4.2): &quot;... and a method is a function associated with an object via a property. &quot;
  • 18. Objeto Literal > var objeto = { ... propriedade: &quot;Propriedade&quot; ... } > objeto { propriedade: 'Propriedade' } >
  • 19. Objeto Literal > var objeto = { ... propriedade: &quot;Propriedade&quot; ... } > objeto { propriedade: 'Propriedade' } > JSON?
  • 20. Tudo é objeto? > 1.0.toString(); '1' >
  • 21. Tudo é objeto? > 1.toString(); ...
  • 23. Feita em 10 dias
  • 25. Como se divertir com uma linguagem dessas?
  • 26. Combinando Programação funcional e Orientação a Objetos em Javascript de forma prática @cmilfont QCon São Paulo 2011
  • 28. > var empresa = { ... denominacaoSocial: &quot;Milfont Evil Corp&quot; ... } > empresa.cnpj === &quot; 9999999999999&quot; } false >
  • 29. > var empresa = { ... denominacaoSocial: &quot;Milfont Evil Corp&quot; ... } > empresa.cnpj === &quot; 9999999999999&quot; } false > empresa.endereco.sede === &quot;Capitolio&quot; TypeError: Cannot read property 'sede' of undefined
  • 30. > if(empresa.endereco && empresa.endereco.sede && empresa.endereco.sede.numero === &quot;Capitolio&quot;)
  • 31. ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) => nil ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) == &quot; teste&quot; => false
  • 32. > Object.prototype. try = function(){}; > empresa.try( &quot;empresa.endereco.sede.numero &quot; );
  • 33. > Object. prototype . try = function(){}; > empresa.try( &quot;empresa.endereco.sede.numero &quot; );
  • 34. Object.defineProperty(Object.prototype, &quot; try &quot; , { value: function(){} } );
  • 35. Object. defineProperty (Object.prototype, &quot; try &quot; , { value: function(){} } );
  • 36. Problemas de Extender built-in https://github.com/kriskowal/es5-shim
  • 37. Object.defineProperty(Object.prototype, &quot; try &quot; , { value: function(){} } );
  • 38. Object.defineProperty(Object.prototype, &quot; try &quot; , { value: function(){} } );
  • 39. Object.defineProperty(Object.prototype, &quot; try ing &quot; , { value: function(){} } );
  • 40. var markup = &quot;<div id=amp;quot; &quot; + id + &quot;amp;quot;> </div>&quot;;
  • 41. markup = &quot;<div id=amp;quot; #{id} amp;quot;> </div>&quot;;
  • 42. var markup = &quot;<div id=amp;quot; #{id} amp;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;; }); } });
  • 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);