Javascript

Classes e heranças com Javascript sem usar framework

js

Usar coisas prontas adianta a vida, não investigar suas entranhas é um erro fácil de cometer. Eu tenho andado bem ocupado com EmberJS, AngularJS, BackboneJS e KnockoutJS.

E sabe o que eu descobri? Todos compartilham o mesmo comportamento de MVC, dessa semelhança o que eu mais gostei foi que ambos implementam um certo tipo de extensão de classes, é como se você registrasse ela no root do documento DOM (window).

O que garante o trunfo de um para outro são técnicas especificas como templates, data-biding, componentes UI; Ao mesmo tempo que aprendo com cada um deles de dentro para fora, eu vou escrevendo o meu, a vida fica bem mais fácil melhorar o que já foi criado, lá na frente quem sabe alguém não chegue a usar o meu!?

Certo, como é então que se usa classes e heranças no Js sem framework? Simples, implemente um você mesmo com poucos passos. Me lembra muito da época que o Actionscript 1.0 ainda estava sendo especificado, JS dos dias de hoje é o actionscript de 10 anos atrás. No dia que essa linguagem ganhar tipação das coisas, provavelmente as coisas virarão coisas, sacou?!

Boilerplate necessário

 
;(function(){
 
	var Classe = window.Classe = {};
 
	var fator = function () {};
 
 
    var inherits = function (parent, protoProps, staticProps) {
        var child;
        if (protoProps && protoProps.hasOwnProperty('constructor')) {
            child = protoProps.constructor;
        } else {
            child = function () { return parent.apply(this, arguments); };
        }
        // vindo do underscoreJS
        _.extend(child, parent);
 
        //Prototype é quem vai fazer valer a pena
        fator.prototype = parent.prototype;
        child.prototype = new fator();
 
        if (protoProps) _.extend(child.prototype, protoProps);
        if (staticProps) _.extend(child, staticProps);
 
        child.prototype.constructor = child;
        child.__super__ = parent.prototype;
 
        return child;
    };
    function ExtendsEls(protoProps, staticProps) {
        var child = inherits(this, protoProps, staticProps);
        child.extend = ExtendsEls;
        return child;
    }
    Classe.Base = function () {};
    Classe.Base.extends = ExtendsEls;
})();

Digamos que eu até poderia mudar no final e chamar direto ().call(this,name). Só que ai eu quebro a idéia de fazer simples sem precisar chamar o construtor e fazer a evaluação da classe em tempo de execução.

Ao invés disso você pode criar o construtor e inicar o que precisa dentro dele.

No final das contas eu criei outro arquivo MeuApp.js e escrevi o seguinte código.

// Classe extendida da classe pai Classe
var Carro = Classe.Base.extends({
	aceleracao : 0,
	buzinar: function (){
		console.log('bit bit, sai do meio!');
	}
});
 
// Carro de corrida extende Carro
 
var CarroCorrida = Carro.extends({
	constructor : function (name){
		CarroCorrida.__super__.constructor.call(this,name);
	},
	acelerar: function (){
		var acc = this.aceleracao > 300 ? this.aceleracao=Math.round(300 - Math.random()*300) : this.aceleracao+=10;
		$('body').html('<p>'+ acc +' km/h</p>');
		console.log(this.aceleracao + ' km/h');
	}
 
});
 
 
// Ferrari é um objeto 
var ferrari = new CarroCorrida();
ferrari.buzinar();
 
// Testar a aceleracao
window.setInterval(function(){ferrari.acelerar()},100);

Fácil, não? Ai agora é só implementar Views e Controllers, só depende do que você quiser fazer. A boa notícia é que mesmo sem tipação você pode simular tal opção sem se preocupar com decadência do objeto.

Ah! o código está no Github também.

8 thoughts on “Classes e heranças com Javascript sem usar framework

    • O Tsuru.io da Globo é um bom software para PaaS. Essa é uma área que ainda está se formando. Muita coisa muda em um lapso de segundo.

  1. Concordo que a dependência total de frameworks é algo a ser evitado e parabenizo pela qualidade do código!
    Porém dizer que esse inherits (que até onde eu lembro do código fonte do BackboneJS + underscore é bastante baseado nestes) é “fácil, não?” seria uma utopia. Seria considerar que conhecimento profundo de como o prototype funciona em browsers modernos é conhecimento básico.
    Infelizmente, enquanto eu ouvir gente perguntando se eu programo em jQuery ou em Javascript, saberei que entender o código mostrado ai em cima é pra poucos ^^
    Obs: cheguei ao seu blog procurando por possíveis bugs já reportados do phonegap 2.7. Sabe de alguma coisa?

    • O phonegap 2.7 ainda está sendo revisto muita coisa. O mais aconselhado é sempre usar uma versão à menos 2.6 por exemplo.

      Obrigado pelo comentário.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *