Purpose of this library is to help web developer put all JavaScript code in single file and then use 'fayer' to fire only required code (functions) on particular page.
- Sources: http://github.com/sandeepjain/fayer
- Author: Sandeep Jain | Twitter : @sandeepjain
- Size: 0.94kb (Minified version) | 0.48kb (gzipped) | jQuery version: Just 0.8kb
Fayer is Dual licensed under the MIT or GPL Version 2 licenses.
- Simple and easy to understand code, with small footprint (Just 0.94kb when minified).
- Doesn't require jQuery or any other JavaScript library (Framework agnostic)
- Makes it easy to push all JavaScript code in single file.
- Has
fayer.notOnfunction to prevent code from being fired on few particular pages on website. - Expose single global object
fayer - Use as jQuery plugin
$.fayer(folder: integration/jQuery) - Integrate with ender using command
ender add Fayer(folder: integration/ender)
-
Set unique identifier string for all pages of your website on body tag's 'id' attribute.
<body id="page-home"> <body id="page-contact"> <body id="page-about"> <body id="page-catalog"> -
Register and fire functions
Inside your JavaScript you can write following code to fire functions on respective pages.
For homepage (page-home):
fayer.on("page-home", function () { // code for homepage goes here })For About and Contact page (page-about, page-contact):
fayer.on(["page-about", "page-contact"], function () { // code for about and contact page goes here })Not for about page but for all other pages on website:
fayer.notOn("page-about", function () { // code for about, contact and catalog page goes here })[RegExp based matching] For contact and catalog page:
fayer.on(/page-c*/, function () { // code for contact and catalog page goes here })Alternatively you even have mass assign functions (works for
onandnotOn):fayer.on({ 'page-home': function () { // code for home page goes here }, 'page-about': function () { // code for about page goes here } }); -
Done!! Read functions section below for more customization.
###Initialize###
Use this function to instruct fayer to find unique page string.
fayer.init(func)
func (Function): This function must return string.
fayer.init(attr)
attr (String): If this is string then, fayer will search identifier string at body[function]
fayer.init()
If no parameter is passed then fayer will search for identifier string at body[id].
###Fire functions###
fayer.on(page, func)
fayer.notOn(page, func)
page (Array/String/RegExp): Array/String/Regular Expression containing unique page identifiers. func (Function): Function to be fired if condition is satisfied.
Mass assign functions:
fayer.on(obj)
fayer.notOn(obj)
obj: id:function key value pair object
###Other Helpful functions###
fayer.is(page)
page (String): Unique page identifier.
fayer.isIn(page)
page (Array/String/RegExp): Unique page identifier.
You can even use fayer as jQuery plugin, find source under directory (integration/jQuery).
With jQuery access fayer as $.fayer and hence functions as...
$.fayer.init, $.fayer.on, $.fayer.notOn, etc.
Please Note (by runeh)
- Fayer calls the functions immediately when matching, and in the same order as they are referenced in app code. (As opposed to libs that add functions to a registry and then dispatch them later)
- Fayer does not deal with onload/domready. It's the responsibility of the app code.
##Contributor(s)
- URL based identifier matching.
- [DONE v1.0.3] RegEx based identifier matching.
- [DONE v1.0.4] Ender integration code.
- jQuery version of 'fayer' (integration/jQuery/jquery.fayer.js)
- Added ender integration code (integration/ender)
- Published to NPM as 'Fayer'
- Resolved bug: where string was improperly considered as Array and thus 'on' and 'notOn' functions failed.
- Revised version numbers to 0.x to 1.0.x, as version number should always start from 1.
- RegEx based identifier matching functionality.
- Removed un-reliable use of typeof operator and replaced it with
Object.prototype.toStringfunction. - Tested it across FF, Chrome, IE.
- Even after adding all this new features, file size is same.
- Added ability to pass in a hash of ids/functions to .on and .notOn