layback.js
As a developer I always kept reusability in mind.
In my everyday work I kept facing the same issues when I had to create some simple javascript code:
I should be able to somehow pass settings to my object... Reaching the dom objects would be nice... I should be able to use events observers... I can make it as a jQuery plugin with some extra work... I have items inside... Oh, it should work a different way on mobile... Wait, haven't I already done these things before?
So I started thinking. I need a simple, lightweight solution to enpower my javascript objects with different kind of features. Something like this would be nice:
var { this; // Do my stuff here} // At this pont I have data access, observer implementation, and dom access // myPlugin jQuery plugin created // items and collection methods added ;
Documentation
Layback is a lightweight javascript "framework", allowing you to enpower your classes with different properties. You can use observers, getters, setters, dom access, jquery pluginiser, collection, and responsiveness. But more importantly you can write your own, reusable features.
Applying layback to your functions
There are two ways to apply the layback features to your function.
Adding feautres after creating a function
var { this; this { this; this; this; this; return this; }}; var creature = hunger: 100 stamina: 10;creature; // 99creature; // 11
Creating a function via layback
Note that the Function will be created globally accessable (in window)
;//...
Accessing layback features of a function that already uses layback
; // => Layback object for the classCreature; // Alternative way of getting it//...
Accessing layback features of an object that already uses layback
var cat = ; // => Layback object for the objectcat // Alternative way of getting it//...
Data handling
Data handling is pretty simple. You can set default values for all the data you'd like to use, and you can use them pretty flexible.
Setting the default data
The default data sets defaults values to all the data accessable inside the object. You can do it by calling the defaults
function while adding the layback features.
;var creature = ;creature; // 1creature; // 100
Adding your own data namespace
;
The treats
The treats are adding extra features to your function. This is the heart of layback.js.
There are 2 different kinds of treats:
- Sytem treats: Automatically applied on your function when you call
.make()
. - Optional treats: You have to add them yourselves by calling the
.use(treatName)
function.
Data treat (system)
It allows you to access data inside the object, it also automatically handles the options you pass to the this.layback(options)
function.
Added features
get(dataName, [default])
: It gets a data. If it doesnt exist can get thedefault
value back.set(dataName, dataValue)
: It sets a data with the key ondataName
, and the value ofdataValue
.
Example usage
; var creature1 = ; // Using the default data onlycreature1; // 0creature1; // 1..100 random number var creature2 = hunger: 50; // Using custom optionscreature2; // 50creature2; // 1..100 random number
Event treat (system)
It's a simple observer implementation.
Added features
dispatch(eventName, [eventData])
: It fires an avent witheventName
, and you can dispatch exra data by using theeventData
argument.observe(eventName, observerFunction)
: It observes theeventName
event. The observerFunction recieves theobservee
object, and theeventData
.
Using default observers
; var fish = legs: 0;fish; // The observer has stopped the walkingfish; // falsefish; // idling var cat = legs: 4;cat; // The observer has not stopped the walkingcat; // true
Using observers on-the-fly
cat;
Using observers via options
;var cat = legs: 4 { // Note that I added 'on' and camelised the event name obj; };
DOM treat (system)
You can access the DOM. It uses jQuery!
Added features
dom(elementName [, parentElement])
: gives you a DOM element with the given name (passed as a dom data).
Using DOM via defaults
;var cat = ;cat; // The text appears in p.new-infocat; // The text appears in .talk
Using DOM via options
var dog = talkContainerElement: '.talk-dog' // Note that I added 'Element' after the dom key;dog; // The text appears in p.new-infocat; // The text appears in .talk-dog
SetGet treat (optional)
The setget treat provides shorthand setters and getters for your object. The setters/getters work as explained in the Data treat section. It works only with the data provided as default data as well!
Example usage
; var fish = ;fish;fish; // 0 var cat = ;cat;cat; // false
Collection treat
Adds collection features to your function object.
Added features
addCollectionItem(item)
: Adds item(s) to the collection. Accepts any kind of object, array of objects, or jQuery objectsgetCollectionItem(index)
: Get the item at index positiongetCollectionItems()
: Retrieves the itemsremoveCollectionItem(item)
: Removes the item from the collectiongetCollectionSize()
: get the length of the collectioneachCollectionItems(callback)
: applies the callback function for each items. See jQuery.each for more info.grepCollectionItems(checkfunction)
: Greps items from the collection. See jQuery.grep for more info.sliceCollectionItems(begin[, end, callback])
: Gets a slice of the collection items frombegin
toend
, and appliescallback
to themsetPagerLimit(limit)
: Sets the pages size.setPageItems(page)
: gets the items atpage
page.
Example usage
; var obj = ;// You can add Object, Array of Objects, jQuery objects hereobj;obj; // the itemsobj; // 3obj; // removes the itemobj; // collection length obj; // adding even and odd casses obj); // get every second element obj; // Set red bg to items 30..40 obj;obj; // get elements 10..20
Responsive features
Using this treat you can change the data inside the object based the window width breakpoints. In addition you can set responders which run only if you are on the defined breakpoint.
Added features
getCurrentBreakpoint()
: get the current breakpoint, and width. e.g: {name: 'tablet', width: 760}respondTo(breakpoint, callback)
: Add acallback
which only applied when you anter thebreakpoint
zone.
Example usage
; var obj = ;obj;obj;// below 760px> mobile:300, above 760px> tablet:900
JQuery plugin features
You can create a jQuery plugin from your object using this treat. The idea behind this is either you provide an element to your object, or JQuery does it for you. If you call your plugin on multiple elements, an object will be created for each of them, so you can avoid the common mistake that your plugin works only with the same matching element.
Added features
getJqueryPluginObject(element)
: Its a class method. Meaning that you function will have this rather than you object. If you provide theelement
here you will get your object back.getJqueryPluginObjects(elements)
: Its a class method. Meaning that you function will have this rather than you object. If you provide theelement
here you will get anArray
containing your objects.
Example usage
Javascript
;
<ul class="my-list"> <li></li> <li setTextContent-options="{text:'Custom text'}"></li> <li></li> </ul>
HTML
; // Getting the objects back from the elementsSetTexTContent; // SetTexTContent {...}SetTexTContent; // [SetTexTContent {...}, SetTexTContent {...}, SetTexTContent {...}]
Result
<ul class="my-list"> <li>Just a text</li> <li setTextContent-options="{text:'Custom text'}">Custom text</li> <li>Just a text</li> </ul>
Using it without using it as a plugin
// Notice that I had to provide the element as an option var mySetTextObj = text: 'Just a text' element: '.my-list li:eq(0)';
Writing you own treat
It's really easy. You can create a function which accepts the target function, and custom data you can provide as the secon parameter of use
. Let me show you through an example.
Example logger treat
var { // Do You logic here ... //By addInitMethod we can set some things to run when we call this.layback(properties); ;}//register your treat;
Using it
;var creature = loggerIsEnabled: true; //> initialized, Creature {....}, Fri Mar 20 2015 17:31:30 GMT+0100 (CET)creature; //> 'Something', Creature {...}, Fri Mar 20 2015 17:31:30 GMT+0100 (CET)var creature2 = loggerIsEnabled: false; //> nothingcreature2; //> nothing
Layback still needs some polishing, fine tuning, and you.
Planned features:
- Ajax requests made easy
- Docblocks (Sorry for not having it yet)
- Treat dependency
- Plugins (replaceable objects with matching interfaces)
- Messaging (using plugins)
- Audio / Video
- Picture element
- Pager / list renderer
Downloads
Credits:
- Paul Irish for the matchMedia polyfill. matchMedia.js
Wanna contribute?
- Create bug tickets!
- Just fork and make pull requests!
- Create treats!