on.js

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

Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/480/1446/onjs.js

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

Autor
johan 2
Versão
1.0
Criado
19/04/2014
Atualizado
19/04/2014
Tamanho
14,6 KB
Licença
N/A

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.