SnackJS:Tiny-But-Tasty JavaScript Framework

Tvůrce moo4q Ryan Florence a já se obecně shodneme na většině témat souvisejících s JavaScriptem, jedním z nich je, že většina rámců JavaScriptu, včetně jQuery, MooTools a Dojo, je mnohem bohatší na funkce (a tedy větší), než většina webových stránek potřebuje. Bez rozsáhlého rámce JavaScriptu byste nevytvořili firemní web nebo web na podnikové úrovni, ale mnoho webů v menším měřítku to prostě nepotřebuje. Vstupte do nového JavaScriptového frameworku Florence, SnackJS – JavaScriptového frameworku, který poskytuje pouze funkce, které potřebuje většina menších webů – a to pouze v 3 kB ! (minified a gzip )

Stáhněte si SnackJS

Co znamená „pouze funkce, které potřebuje většina menších webů“? Tím myslím schopnost:

  • snadněji pracovat s poli
  • efektivně načítat a upravovat třídy a atributy CSS prvků atd.
  • snadno přidávat, odebírat a spouštět obslužné nástroje událostí
  • provést a zpracovat výsledek základního požadavku AJAX/JSON/JSONP

SnackJS poskytuje vše výše uvedené s několika doplňky:

  • malý pub/subsystém pro snadnější komunikaci s aplikacemi
  • metoda rozšíření pro mělké sloučení vlastností objektu
  • všechno oblíbené:„připravená“ událost
  • obal selektoru pro snadnou implementaci jakéhokoli selektorového enginu (Slick, Sizzle atd.)
  • metoda děrování, která funguje velmi podobně jako dojo.connect, protože funkci lze přiřadit ke spuštění kdykoli je spuštěna jiná funkce
  • řešení obchodu s prvky

Pojďme se podívat na úryvky kódu SnackJS, abyste měli představu o jeho použití!

snack.extend

Tato metoda jednoduše sloučí vlastnosti z libovolného počtu objektů do prvního argumentu:

// 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" }

svačina.punč

Možnost „připojení“ k funkcím je v rámci sady nástrojů Dojo extrémně užitečná, takže jsem nemohl být šťastnější, když jsem to viděl ve 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");

Kdykoli se zobrazí myObjectWithFn.onColorChange se provede, reactor funkce se okamžitě spustí.

snack.wrap

snack.wrap funguje velmi podobně jako dojo.query metoda nebo jQuery("selector") použití v tom, že obaluje uzly, takže k nim lze přidat další funkce. Samotné uzly se neupravují, jako v 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

snack.listener metoda je vaše standardní syntaxe události uzlu napříč prohlížeči.

// 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();

Zvláště pěkné jsou detach a attach metody, které vám umožní efektivně zakázat a povolit posluchače událostí.

snack.request

Spustí standardní požadavek AJAX se standardními možnostmi:

// 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:Implementace PubSub

SnackJS implementuje vždy užitečný systém pub/sub tím, že vytvoří vydavatele a poté jej zveřejní a předplatí:

// 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]);
});

Síla pub/sub spočívá v tom, že nepotřebujete odkazy na události ani nic jiného – stačí vám pouze název drátu. Kdykoli bude zpráva zveřejněna na tomto drátu, budete o tom vědět!

To jsou jen některé z funkcí dostupných v rámci SnackJS. K dispozici je mnohem více metod, proto vám doporučuji, abyste se podívali na dokumentaci SnackJS. Vsadím se, že SnackJS má všechny funkce, které potřebujete pro většinu webů!

Posun vpřed

Snack JS byl vydán teprve nedávno, takže není k dispozici mnoho vlastních modulů/pluginů. Existuje několik položek, které bych rád přidal do SnackJS:

  • nastavovač a získávání stylů – vím, že style vlastnost nodes je místo, kde nastavujete jednotlivé styly, ale neprůhlednost zabere více práce, protože to není standardní, a nástroj pro nastavení objektů na styly by byl úžasný
  • odložené – jsou darem z nebes v rámci Dojo a mohly by se ukázat jako u SnackJS
Stáhněte si SnackJS

Úložiště SnackJS žije na GitHubu a dokumentaci a ukázky lze nalézt na snackjs.com. Gratulujeme Ryanu Florence k tomuto úžasnému mikrorámci! Těším se, že budu v budoucnu přispívat!

V nadcházejících dnech vám ukážu, jak si můžete vytvořit svůj vlastní plugin SnackJS pro vytváření uzlů, jejich umístění na stránku a získávání a nastavení jejich atributů! Zůstaňte naladěni!