Combinando OO e Funcional em javascript de forma prática

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 ing " , { value: function(){} } );

var markup = "<div id=" " + id + ""> </div>";

markup = "<div id=" #{id} "> </div>";

var markup = "<div id=" #{id} "> </div>";

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: ""; }); } });

https://github.com/documentcloud/underscore

var empresa = { nome: $( "input #nome " ) , endereco: $("input#endereco") }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : "application/json", headers : {"Content-Type":"application/json", "Accept":"application/json"}, success : callback, type : "POST" , url : "/empresas" });

var empresa = { nome: $( "input #nome " ) , endereco: $("input#endereco") }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : "application/json", headers : {"Content-Type":"application/json", "Accept":"application/json"}, success : callback, type : " POST " , url : " /empresas " });

class EmpresasController < ApplicationController end jQuery.ajax({ data : empresa, type : " POST " , url : " /empresas " });

class EmpresasController < ApplicationController end rake routes POST /empresas(.:format) {:action=>"create", :controller=>"empresas"} jQuery.ajax({ data : empresa, type : " POST " , url : " /empresas " });

class EmpresasController < ApplicationController end rake routes POST /empresas (.:format) {:action=>" create ", :controller=>" empresas "} jQuery.ajax({ data : empresa, type : " POST " , url : " /empresas " });

class EmpresasController < ApplicationController end rake routes POST /empresas (.:format) {:action=>" create ", :controller=>" empresas "} var empresas = new EmpresasController empresas. create ( empresa , callback) jQuery.ajax({ data : empresa, type : " POST " , url : " /empresas " });

var empresa = { nome: $( "input #nome " ) , endereco: $("input#endereco") }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : "application/json", headers : {"Content-Type":"application/json", "Accept":"application/json"}, success : callback, type : "POST" , url : "/empresas" });

var empresa = { nome: $( "input #nome " ) , endereco: $("input#endereco") }); 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: "/controller" , method: "POST" } };

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: "/controller" , method: "POST" } } }; EmpresasController.prototype = InterfaceDJR ;

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: $( "input #nome " ) , endereco: $("input#endereco") }); var empresas = new EmpresasController empresas. create ( empresa , callback)

var empresa = $("form#empresas").getJSON() ; var empresas = new EmpresasController empresas. create ( empresa , callback)

sammy.post('#empresas', function() { var empresa = $("form#empresas").getJSON() ; new EmpresasController() . create ( empresa , callback) });

http://www.milfont.org	638
http://coderwall.com	17
http://feeds.feedburner.com	12
http://us-w1.rockmelt.com	7
http://paper.li	5
https://twitter.com	3
http://twitter.com	1
http://www.newsblur.com	1

Combinando OO e Funcional em javascript de forma prática

by Milfont Consulting on Sep 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 684

Statistics

Combinando OO e Funcional em javascript de forma prática — Presentation Transcript