A micro-library for DRY:ing up the boring boilerplate of user scripts
Dette scriptet burde ikke installeres direkte. Det er et bibliotek for andre script å inkludere med det nye metadirektivet // @require https://update.greasyfork.org/scripts/480/1446/onjs.js
The fun part of user scripting is deciding what happens. The boring part is scavenging the DOM for bits of templated data, or elements you want to mod.
Have on.js do it for you!
MIT licensed, or
Copyheart:
copying is an act of love.
Please copy and share!
Want to sift away noise at retailmenot?
// hide the noise at http://www.retailmenot.com/view/vayama.com
on({ dom: [ 'css* #offers li.offer'
, { deal: 'xpath .'
, coupon: 'css? .crux .code'
}
]
, ready: nukeCouponless
});
function nukeCouponless(offers) {
offers.forEach(function sift(a) {
if (!a.coupon)
a.deal.style.display = 'none';
});
}
Separate logic from page structure.
I could talk all night about what this buys you – here are some highlights:
Beautiful code
Optimize for happiness!
This is of course personal,
but I love how clean on.js
makes my user scripts.
I can see what they do, at a moment's glance, and what data they depend on. Maintenance gets easier.
Sane native javascript types
The DOM API:s are not only verbose,
but also cripple results with bad types!
From on.js array selectors, you get a
real Array that you can operate on with
.forEach, .map, .some, .every,
.filter, .reduce, .slice, .indexOf,
and all the other really awesome
Array.prototype methods.
More complex scripts become feasible
As a script's complexity grows,
so does the burden of maintaining it.
With on.js, this is still true
– but it grows far slower!
Seeing (and naming) the structure of the input your code operates on helps reading and writing the code operating on it.
Reuse one script's page structure awareness
Maybe you later want to whip up another script using the same data, or even make a shell web scraper for it?
Copy, paste, done! You're in business – in seconds.
Have your scripts magically self-deprecate
Web sites change. This makes user scripts break, start doing the wrong thing, or filling your console with errors.
When they change so your script no longer has the stuff it needs, your code will just never run instead of breaking the page.
If you don't miss it, great! – that site has improved, and your script will never bother it.
If you do – just update
its on.js preamble,
and your code just
magically works again.
on.js comes with a test suite.
It uses node.js,
test'em and
coffee-script.
Once node is installed,
run this to install the latter two:
npm install testem coffee-script -g
Then you can run it like this, for instance:
testem -l chrome
Incidentally, it provides pretty good docs about all the ways you can slice a page, and and how they work.
New tests are easy to add.
Just stick them in the appropriate
.coffee file in tests/,
or make a new .js or .coffee file
in the same directory, and
test'em will pick it up, too.
They are currently written in jasmine, lightly tweaked for improved readability.