return true;
A JavaScript Library
This free library aims to help client-side programmers maintain performance and functionality in the cross-browser environment, where the JavaScript run-time manages HTML/CSS content and presentation.
Allow me to thank some of the great people that can relate!
Supporters!
Thank(You);XirSys, awesome, free WebRTC Cloud Service!
- making the web a better place
Alex Thomas, great guy and start-up founder of Pylon.io!
- seeing on's benefit in Pylon's future web success
Contributers!
Thank(You);John-David Dalton, great guy and the creator of Lo-Dash!
- renaming on's toString return value
A Javascript Library
It uniquely integrates the essentials of web JavaScript.
- a.) Best-practices
- b.) Cross-browser compatability
- c.) DOM iteration/manipulation
- d.) Event callbacks
- e.) Ajax polling
- f.) File-uploading
- g.) Script-loading
- h.) Asynchronous scope-intelligence
- i.) Datatype-detection
- j.) Iframes and more!
Including optional resources for development:
-
- Scope-intelligent console wiki
A Keyword
onThe single keyword, on, sweetens your javascript with two flavors of sugar!
A Syntax
(command)[on](data)(parameter);Friendly and intuitive!
====================================
('mouseup')[on](theElement)
( function(e)
{
this;
}
);('for each img')[on](theElement)
( function(i)
{
this[i];
return false;
}
);('POST applesauce=true')[on]('../ajax/url/?topic=food')
( function()
{
this.POST;
this.GET;
this.responseText;
}
);A Standard
on[type];Conventional augmentation!
====================================
on.document.eachElementByAttribute
( 'the-attribute'
, 'the-value'
, function(i)
{
this[i];
return false;
}
);on.element.offsetLeft.call(theElement);on.iframe.document(theIframeElement);A Paradigm
this instanceof Cool;Fluidly adapts to your HTML with
- Hybrid functionality!
- Nestable bindings!
- Graceful degradation!
- Polyfill!
- & More!
====================================
<form id="TheUploadForm" action="../the/static/url">
<input type="file" value="Select A File" />
<input type="submit" value="Submit" />
</form>('submit')[on](document.getElementById('TheUploadForm'))
( function(e)
{
on.event.preventDefault.call(e);
this.action = "../the/ajax/url";
('upload')[on](this)
( function(e)
{
console.log( 100 * ( e.loaded/e.total ) + "%" )
}
);
('POST')[on](this)
( function()
{
console.log( this.responseText )
}
);
}
);A Mentor
on.about();Live console manual!
source: /opt/on.about.js
- Inject during development
- Delete during production
method: on.about()
- Call anywhere!
- Asynchronously scope-intelligent
====================================
var contentBody = document.getElementById('content-body');
var contentTabs = document.getElementById('content-tabs');
var activeTab;
('mouseover')[on](contentTabs.children)
( function(e)
{
on.event.preventDefault.call(e);
on.about(); //prints man page for Events on Elements
var me = activeTab = this;
('GET')[on](this.href+"?ajax=true")
( function()
{
if (activeTab != me) return;
on.about(); //prints man page for ajax GET on URL
contentBody.innerHTML = this.responseText;
}
);
}
);
on.about(); //prints man page for on.jsA Performance
Benchmarks!
DOM
Classes
Attributes
A Revolution
Download the source!
- 14kb Min.
Beginners, grab this too!
Check out the tutorials!
- Live Console Manual
- Element Resources
- Element Classes
- Event Callbacks
- Ajax Requests
- Ajax Submission
- Syntax Overview
Bookmark the wiki!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent