What’s it?
A tiny ~7kb extendable JavaScript utility library with a JQuery like syntax for getting work executed quick!
If you’re in search of small footprint utility library with a syntax much like JQuery, TFUZ could also be simply what you want.
Get TFUZ at https://github.com/bretgeek/tfuz
Go to https://tfuz.com for ongoing documentation and examples.
Options
- Tiny! – at present below ~7KB minified (smaller if gzipped).
- Can be utilized as a normal objective JQuery like library.
- Simple acquainted syntax with built-in chainable DOM manipulation strategies.
- Constructed-in iterable delay queue.
- Capacity arrange customized observers on any ingredient.
- And extra …
Why?
Not each web site makes use of React (and pals) and never each web site wants all of the options that require loading the complete JQuery library.
TFUZ is the pagespeed aware net developer’s greatest buddy. It is tremendous small and straightforward to increase.
Positive you can write every little thing TFUZ has to supply in Vanilla JavaScript however TFUZ is so small and the syntax is acquainted and straightforward to keep in mind that it will probably probably prevent time / growth prices.
TFUZ is your tiny software belt of most used DOM manipulation instruments with some actually cool further bits.
If TFUZ would not have what you want you’ll be able to simply add it!
Fundamental Utilization
- Fundamental utilization for manually including and utilizing TFUZ to an online web page.
Add TFUZ to your web page earlier than your closing physique tag :
<script src='https://yoururl.com/tfuz.min.js'></script>
Use TFUZ such as you would JQuery
// someplace in your html
<div id='app'> I'm an App </div>
- In a script tag after tfuz.min.js add:
// create a wrapper operate to carry all of the stuff you wish to do:
operate init(){
// Choose a component and return a reference to it utilizing "seize"
// there are numerous choices to "seize" however this minimal use returns a reference
// to the primary ingredient (so you do not preserve querying the DOM) of #app by default
let app = tfuz.seize('#app');
app.css('colour: crimson;'); // adjustments app's colour with CSS
}
// Run your wrapper operate when the doc is prepared...
tfuz.prepared(init);
Add your personal performance and make plugins!
- In your similar script file from above add:
operate myplug(){
this.css('colour: crimson;');
return this;
}
// Now inform TFUZ to make use of the plugin:
// *** Be aware you will need to inform TFUZ to make use of plugins on the prime of your script file earlier than initalizing the rest.
tfuz.use({title: 'myplug', fn: myplug}); // add to prime of your init/wrapper operate.
// Use the brand new plugin wherever you need later:
app.myplug(); // use plguin after reference to app was "grabbed";
Some TFUZ Strategies – *For assist learn the operate signatures within the code or contact me!
- append – el.append(‘textual content or html’) – append to backside of el.
- appendTo – el.appendTo(‘.otherEl’ or el.appendTo(Elvar) – append to first of selector or to reference.
- prependTo – Similar as appendTo however prepends to mad.
- seize – tfuz.seize (question doc) or el.seize(‘selector’, {all: false, fn: func}) (question ranging from ingredient) – quick hand for every that can run operate and return discovered assortment (first discovered by default).
- every– el.every({sel, ‘selector1, selector2’, all: true, fn: func}) – run operate on assortment of selectors.
- choose – el.choose({sel, ‘selector1, selector2’, first: false, fn: func}) – run operate on assortment of selectors and return assortment.
- prepared – tfuz.prepared(func) – run operate when doc is prepared
- css – el.css(‘colour: blue;’) OR el.css(‘colour: blue;’, { add = false } ) to overwrite CSS, true by default so as to add to present CSS)
- html – el.html() to return html, el.html(‘some new html right here’) to set html.
- _text– el._text() to return textual content, el._text(‘some new textual content right here’) to set textual content – *prefixed with underscore as a result of anchor tags have a textual content property you can’t overwrite.
- plg – add a brand new plugin.
- fn – alias to plg.
- use – alias to plg.
- on – el.on(‘click on’, func) – provides an occasion listener.
- off – el.off(‘click on’, func) – removes occasion listener created by on.
- set off – set off an occasion created with on.
- observe– pay attention for adjustments on components – learn code!
- unobserve – cease observing observers of components created by observe.
- getobservers – Get listing of observers
- scroll – tfuz.scroll(func) – run operate on scroll.
- attr – get or set attributes of el.
- removeAttr – el.removeAttr(‘attr’) – take away attributes of el
- addClass – el.addClass(‘classname listing’);
- removeClass – el.removeClass(‘classlist’);
- toggle – toggle on or off a category
- rpx – take away px, em from numbers and return quantity.
- cs – return computed values.
- isString – return boolean if is a string.
- isFunction – return boolean if is a operate.
- isObject – return boolean is an Object.
- isArray – return boolean if is an array.
- isElement – return bollean if is an Factor.
- isNumber -return boolean if is a quantity.
- isEmpty – return boolean if empty object.
- createNode – create Node and optionall append or prepend to caller.
- delay – iterate-able delay queue – el.delay({time: 1000, fn: yourFunc, iterate: 6 }); – runs yourFunc each second for six iterations – chained delays are queued and ran so as till queue is empty..
Delay Instance
// Create a standard operate - for instance this operate will enhance a counter
operate delayCount(e){
if(!e.templateHTML){
if(!e.countme){
e.countme = 0;
}
e.templateHTML = e.html(); // save authentic html for future iterations
}
e.countme++;
console.log('Depend is '+e.countme);
e.html(e.templateHTML + ' '+e.countme)
}
// name delay from app and watch the magic occur because the depend as much as 6 is appended to the prevailing html.
app.delay({time: 1000, fn: delayCount, iterate: 6 }); // chain extra delays right here if you need.
Like TFUZ and wish to assist?
Get TFUZ fork and make imporvements on https://github.com/bretgeek/tfuz
