ob$ — Manual Completo

Versão: 1.1
Tipo: Micro-framework reativo em JavaScript puro
Dependências: nenhuma

Visão Geral

ob$ é um micro-framework que permite criar interfaces reativas usando apenas HTML e JavaScript simples.

Ele funciona como um container de estado global.

Quando uma variável muda:

ob$.nome = "Richard"

todos os elementos da página ligados a essa variável são atualizados automaticamente.

Sem frameworks pesados.

Sem build.

Sem dependências.

Instalação

Inclua o arquivo obs.js na página.

<script src="obs.js"></script>

Depois disso o objeto global ob$ estará disponível.

Conceito Principal

Tudo gira em torno de variáveis reativas.

Exemplo:

ob$.usuario = "Maria"

Qualquer elemento HTML que use usuario será atualizado automaticamente.

Variáveis Reativas

Criar variável:

ob$.nome = "João"

Alterar variável:

ob$.nome = "Carlos"

Excluir variável:

delete ob$.nome

data-bind (texto)

Liga uma variável ao texto de um elemento.

HTML

<span data-bind="nome"></span>

JavaScript

ob$.nome = "Pedro"

Resultado na tela

Pedro

data-html (HTML interno)

Permite renderizar HTML dentro do elemento.

HTML

<div data-html="conteudo"></div>

JavaScript

ob$.conteudo = "<b>Olá mundo</b>"

Resultado

Olá mundo (em negrito)

data-img (imagem)

Atualiza automaticamente o atributo src de uma imagem.

HTML

<img data-img="foto">

JavaScript

ob$.foto = "avatar.png"

data-class (classe CSS)

HTML

<div data-class="classe"></div>

JavaScript

ob$.classe = "alerta vermelho"

data-style (estilo CSS)

HTML

<div data-style="estilo"></div>

JavaScript

ob$.estilo = "background:red;color:white"

mostrar

Mostra o elemento quando a variável for verdadeira.

HTML

<div mostrar="logado">
    Bem vindo!
</div>

JavaScript

ob$.logado = true

esconder

Esconde o elemento quando a variável for verdadeira.

HTML

<div esconder="logado">
    Faça login
</div>

repetir listas

Permite renderizar arrays automaticamente.

HTML

<ul>
    <li repetir="produto em produtos">
        {{ name }}
    </li>
</ul>

JavaScript

ob$.produtos = [
    {name:"Notebook"},
    {name:"Mouse"},
    {name:"Teclado"}
]

Resultado

Notebook
Mouse
Teclado

templates dentro de repetir

Campos suportados

{{ campo }}
{{ campo.subcampo }}
{{ $index }}
{{ $id }}

Exemplo

<div repetir="produto em produtos">

    <h3>{{ name }}</h3>

    <p>{{ description }}</p>

    <span>{{ price }}</span>

</div>

exemplo de card de produto

HTML

<div repetir="produto em produtos" class="card">

    <img src="{{ image }}">

    <h3>{{ name }}</h3>

    <p>{{ description }}</p>

    <strong>{{ price }}</strong>

</div>

JavaScript

ob$.produtos = [
    {
        name:"Notebook",
        description:"16GB RAM",
        price:"R$4500",
        image:"notebook.jpg"
    }
]

scroll infinito

Se existir um elemento com id load-more, o ob$ pode carregar mais dados automaticamente.

HTML

<div id="load-more">
    Carregando...
</div>

JavaScript

ob$.loadMore = async function(){

    const res = await fetch("/api/produtos")

    const data = await res.json()

    ob$.produtos = [...ob$.produtos, ...data]

}

ob$.init()

callbacks de mudança

Permite executar código quando uma variável muda.

Callback específico:

ob$.$("nome").callback = function(oldValue,newValue){

    console.log(oldValue,newValue)

}

ob$.nome = "Carlos"

callback global

Executa para qualquer variável alterada.

ob$._defaultCallback = function(chave,valorAntigo,valorNovo){

    console.log(chave,"mudou")

}

data-model (input bidirecional)

Permite que um input altere uma variável automaticamente.

HTML

<input data-model="nome">

JavaScript

ob$.nome = "Maria"

Quando o usuário digitar no input, ob$.nome também muda.

reprocessar DOM

Se você alterar o DOM manualmente:

ob$.bindAll()

Isso reaplica todos os bindings.

inicialização

Para ativar todos os recursos:

document.addEventListener("DOMContentLoaded",function(){

    ob$.init()

})

propriedades internas

Versão do framework

ob$.version

Resetar estado

ob$.reset()

exemplo completo

HTML

<h1 data-bind="titulo"></h1>

<ul>

    <li repetir="produto em produtos">
        {{ name }} - {{ price }}
    </li>

</ul>

JavaScript

ob$.titulo = "Lista de Produtos"

ob$.produtos = [
    {name:"Mouse",price:"R$50"},
    {name:"Teclado",price:"R$120"}
]

filosofia do ob$

ob$ foi criado para ser:

• extremamente simples
• sem dependências
• fácil de entender
• fácil de integrar com qualquer backend
• rápido de escrever
• rápido de executar

Ele permite construir aplicações modernas usando apenas:

HTML
JavaScript
JSON
APIs

Sem complexidade desnecessária.

site oficial

Em construção.

Projeto iniciado por Richard.