quark 2.2.1
Quark is a small javascript library that aims to let you compose your own framework from scratch. It brings a different syntax than the other frameworks which is a lot more intuitive and browser-friendly.
Quark is an alternative to Ender without all the building process and a lot of overhead.
Installation
npm install pyrsmk-quark
bower install pyrsmk-quark
As Ender, you'll need to install third-party libraries to add ajax, animations, etc... But it has a basic support for readiness, node selection and creation.
Quick examples
var $ = quark$ $$ = quark$$;
data'state' 'ok';
;
Note that data()
and css()
methods are available by installing quarky, a good companion for quark.
Basics
Unlike jQuery-like libraries, each node is wrapped by quark and all methods (like css()
) are available. Even into the methods themselves (like on()
in quarky). But you can access to the base node with :
var node = node;
If you need to verify if a node has already been wrapped or not, you can test for :
if'quarked' in somenode // the node is wrapped
Quark has a heavy fault tolerance when searched nodes do not exist. Imagine, you have some blog comments that are not there for any reason, then that line won't crash anything :
;
Readiness
Quark implements a basic ready function that should work in most browsers :
;
Selecting nodes
$()
will return one wrapped node.
$$()
will return a list of wrapped. A forEach()
method has been added to iterate over the nodes.
;
If you want to retrieve an array of nodes instead of an array of wrapped nodes, set true
as second argument (really useful when some library expects an array of nodes) :
var nodes = ;
Creating nodes
You can create on node by calling $()
. The returned node is wrapped as well :
;
You can create several nodes too :
var nodes = ; nodes; ;
Calling node methods
Quark is shipped with two base methods : findOne()
and findAll()
.
// Find only one .bar node in .foo nodes;// Find all .bar nodes in .foo nodes;
Calling node methods on $$()
will apply the method to each node, as expected. But note that if the method is returning a value then $$()
will return an array of all returned values. Per example :
// Return an array of all .bar nodes found in each .foo node;
Writing extensions
Writing extensions is simple, you just have to write code like the example below and release your library on NPM with a quark
tag (so it can easily be found).
Here's the API :
- $._whenReady(function) : takes a function that verifies if the DOM is ready or not
- $._selectNode(selector) : takes a function to select one node
- $._selectNodes(selector) : takes a function to select several nodes
- $._createNode(html) : takes a function to create one node
- $._createNodes(html) : takes a function to create several nodes
- $._nodeMethods : is an object and accepts new methods that will be appended to nodes by quark
Example
Here's a full example, based on quarky, nut, domReady, morpheus and qwest. First, we configure our framework :
var $ = quark$ $$ = quark$$; // Set the selector engine$ { return 0;};$_selectNodes = nut; // Set the ready function$_whenReady = domready; // Add animation methods$_nodeMethods { return ;};$_nodeMethods { var node = this; return ;};$_nodeMethods { var node = this; return ;}; // Add an ajax method to the front object$ajax = qwest;
Now that the framework is set, we can use it :
// When the DOM is ready;
License
Quark is published under the MIT license.