on.js

A micro-library for DRY:ing up the boring boilerplate of user scripts

ეს სკრიპტი არ უნდა იყოს პირდაპირ დაინსტალირებული. ეს ბიბლიოთეკაა, სხვა სკრიპტებისთვის უნდა ჩართეთ მეტა-დირექტივაში // @require https://update.greasyfork.org/scripts/480/1446/onjs.js.

ავტორი
johan 2
ვერსია
1.0
შექმნილია
19.04.2014
განახლებულია
19.04.2014
ლიცენზია
პ/გ

on.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!

Quick Example

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';
  });
}

What's the benefit?

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.

Tests

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.