POO+JSON+JavaScript

POO JSON JavaScript

Quando começamos a trabalhar mais com javascript, aproveitando as vantagens de uma linguagem client-side e o código começar a crescer e ficar mais complexo, surge nessecidade de seguir algum padrão.

E nada melhor, do que implementar algo que você já esteja acostumado a utlizar, como o Paradígma Orientado a Objetos(POO).

Trantando como uma CLASSE, as informações manipuladas no código, torna-o mais legível, organizado e de fácil manutenção.

Declarando uma classe em javascript:

            //Declaração da classe Pessoa
            function Pessoa() {
                //Definição dos atributos
                this.nome = "";
                this.idade = 0;
                this.formado = false;
            }

            //Instaciação de um objeto da classe Pessoa
            var _fulano = new Pessoa();

            //Acessando e alterando o valor de um atributo
            _fulano.idade = 15;

Supondo que possuímos o seguinte formulário:

        <!-- :: JQUERY :: -->
        <script type="text/javascript" src="jquery-1.4.1.js"></script>
        Nome:
        <input id="txtNome" type="text" />
        Idade:
        <input id="txtIdade" type="text" />
        Formado:
        <input id="chkFormado" type="checkbox" />Sim

        <input id="btnEnviar" type="button" value="Enviar" />

Com a classe declarada, fica mais legível e organizado manipular seus dados:

      $(function () {
            //Evento click do botão Enviar
            $('#btnEnviar').click(function () {

                //Instaciação de um objeto da classe Pessoa
                var _pessoa = new Pessoa();

                //Acessando e alterando os valores dos atributos
                _pessoa.nome = $('#txtNome').val();
                _pessoa.idade = $('#txtIdade').val();
                _pessoa.formado = $('#chkFormado').attr('checked');

                alert(
                        'Meu nome é  ' + _pessoa.nome +
                        ', tenho ' + _pessoa.idade +
                        ' anos e ' +
                        (_pessoa.formado ? 'já' : 'ainda não') + ' sou formado'
                    );
            });
        });

Com o objeto definido e os valores dos seus atributos preenchidos, podemos aproveitar esta estrutura e converte-lo para o formato JSON, com a finalidade de passar esses dados para o code behind, através de um ajax, _doPostBack ou outra necessidade. Para desfrutar dessa vantagem, de maneira fácil e simples, vamos utilizar o plugin Jquery JSON.

Adicionando referência do plugin à pagina:

        <!-- :: JQUERY-JSON  :: -->
        <script type="text/javascript" src="jquery.json-2.2.js"></script>

Realizando a conversão do objeto para o formato JSON:

        //Converte o objeto '_pessoa' para o formato Json
        var string_Json = $.toJSON(_pessoa);

Realizando a conversão de uma string no formato JSON para um objeto:

        //Converte uma string no formato Json para objeto
        var obj = $.parseJSON(string_Json);

Este artigo abordou conceitos básicos do POO, mas caso você tenha mas interesse sobre esse assunto, eu indico os artigos dessa série em PT/BR e dessa série em EN .
Que são muito bons!