Eu e o criador do moo4q  Ryan
Florence geralmente concordamos na maioria dos tópicos
relacionados com o JavaScript, dentre os quais o de que a maioria dos
frameworks em JavaScript, inclusive jQuery, MooTools e Dojo, tem muito mais
recursos do que a maioria dos websites precisa. Você não construiria um website
de um grande empreendimento ou de uma corporação sem um framework extenso em JavaScript,
mas muitos websites menores simplesmente não precisam de tantos recursos.

Entre no novo framework em JavaScript do
Florence, o SnackJS – um framework em
JavaScript que proporciona somente a funcionalidade que a maioria dos pequenos
websites precisa – e com somente 3KB!

Download SnackJS

O que significa “somente a
funcionalidade que a maioria dos pequenos websites precisa”?  Para mim, isso quer dizer que tenham a
possibilidade de:

• trabalhar
  mais facilmente com arrays
• recuperar
  e modificar eficientemente classes e atributos etc de elementos CSS
• adicionar,
  remover e dispensar event handlers facilmente
• executar
  e manejar resultados de solicitações básicas de AJAX/JSON/JSONP

O  SnackJS proporciona tudo
isso, com alguns extras:

• um
  pequeno sistema pub/sub para comunicação app mais fácil
• um método estendido para mesclar superficialmente propriedades de objetos
• um
  favorito de todos: um evento “ready”
• um
  selector engine wraper para fácil
  implementação  de qualquer engine
  selector  (Slick, Sizzle etc.)
• um
  método punch agindo como dojo.connect, no qual uma função pode ser atribuída
  para executar sempre que outra função for executada
• uma
  solução element store

Vamos dar uma olhada em
algumas partes do código SnackJS para que você possa “sentir” o seu uso.

snack.extend

Este método
simplesmente funde propriedades de qualquer número de objetos no primeiro
argumento:

// Mix objects
var endObject = {
  color: "red"
};
snack.extend(
  endObject, // The starting object
  { color: "green", text: "Name" }, // A second object
  { color: "blue" } // And another
);

// endObject becomes: { color: "blue", "text: "Name" }

snack.punch

A habilidade de se “conectar”
a funções é extremamente útil no Dojo Toolkit, de forma que você não poderia
ser mais feliz do que ao vê-lo no SnackJS:

// Create an object with a function
var myObjectWithFns = {
  color: "red",
  onColorChange: function(color) {
    // Reset the color
    this.color = color;
  }
};

// Punch time:  whenever myObjectWithFns is called, call another function which simple logs the value
var reactor = function(color) {
  console.log("The color was just changed to: ",color);
};
snack.punch(myObjectWithFns,"onColorChange",reactor,true);
myObjectWithFns.onColorChange("red");

Sempre que myObjectWithFn.onColorChange é executado, a função reactor roda
imediatamente

snack.wrap

O
snack.wrap
funciona de forma muito similar ao método dojo.query, ou no emprego do
jQuery(“selector”) , no qual ele encapsula nós, de forma que
funcionalidade extra pode ser adicionada a ele. Os nós não são modificados,
uma vez que estão no MooTools.

// Get all DIV elements.
var divs = snack.wrap("div");
// Add a CSS class to the divs
divs.addClass("found");
// Add a click event that...
divs.attach("click",function() {
  // Removes the class we added
  snack.wrap(this).removeClass("found");
});

snack.listener

O método snack.listener é sua maneira padrão de disparar eventos dos nós de forma a funcionar em qualquer navegador.

// Add an event listener to a given node
var listener = snack.listener({
  node: document.getElementById("content"),
  event: "click"
},function() {
  console.warn("You clicked on the node!");
});

// Detach the listener at any time
listener.detach();

// ...and add it back again
listener.attach();

Especialmente interessantes
são os métodos detach e attach, permitindo que você efetivamente habilite e
desabilite event listeners.

snack.request

Execute uma
solicitação AJAX padrão, com as opções-padrão:

// Create an AJAX request
var req = snack.request({
  url: "get-user-bio.php",
  data: {
    userId: 1234
  },
  method: "get",
  now: false // Don't send immediately
},function(error,response){ // The success event
  // If it was successful...
  if(!error) {
    document.getElementById("content").innerHTML = response;
  }
});

// Now send it!
req.send();

snack.publisher:
Implementação PubSub

O SnackJS implementa o sempre
útil sistema pub/sub, com a criação do publisher e, então, publica e subscreve:

// Set up a pub/sub event
var pubsub = snack.publisher();

// Create a subscription to an event
pubsub.subscribe("inputchange",function(val) {
  console.warn("The value was changed to: ",val);
});

// Attach an onKeyUp event to the input node
// When keyup'd, the node's value has changed, and we should notify all subscribers
snack.wrap("#email").attach("keyup",function() {
  pubsub.publish("inputchange",[this.value]);
});

A força do pub/sub é que você
não precisa fazer referências a a eventos ou a qualquer outra coisa – você só precisa
do nome do wire. Sempre que uma mensagem é publicada naquele wire, você saberá!

Essas são apenas algumas das
funcionalidades disponíveis no SnackJS. Há muitos outros métodos disponíveis. Assim sendo, eu o encorajo a examinar a documentação do SnackJS.
Aposto que o SnackJS tem todas funcionalidades que você precisa para a maioria
dos websites!

Seguindo em
frente

O SnackJS foi recentemente
liberado, de forma que não há muitos módulos/plugins customizados disponíveis.
Há alguns itens que eu gostaria de ver adicionados ao SnackJS:

• definidor de estilos – Eu sei que a propriedade style de cada nó é onde você define os estilos individuais, mas a opacidade dá mais trabalho, uma vez que não é padrão, e um definidor que gerenciasse isso automaticamente seria incrível
• objetos deferreds – Eles são enviados de Deus no Dojo, e poderiam revelar-se no SnackJS também

Download SnackJS

O SnackJS pode ser encontrado
no GitHub, e a documentação e os demos podem ser encontrados no snackjs.com. Parabéns ao Ryan Florence pelo seu
micro framework irado! Espero contribuir no futuro!

Logo estarei mostrando a
vocês como criar seu próprio SnackJS plugin para criar nós, colocá-los na
página obtendo e definindo seus
atributos! Mantenha-se ligado!

?

Texto original disponível em http://davidwalsh.name/snackjs