Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Enkle JavaScript-abstraksjoner

Enkle JavaScript-abstraksjoner

A presentation in Norwegian on simple JavaScript abstractions

6c51c14716e24bc1f1a3fb5ad234e773?s=128

Kim Joar Bekkelund

August 31, 2012
Tweet

More Decks by Kim Joar Bekkelund

Other Decks in Programming

Transcript

  1. Enkle JavaScript-abstraksjoner Kim Joar Bekkelund

  2. $ Slutt å bruke jQuery direkte overalt i koden din!

  3. Hvorfor? $(document).ready(function() { $('#new-status form').submit(function(e) { e.preventDefault(); $.ajax({ url: '/status',

    data: { text: $('#new-status textarea').val() }, success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); $('#new-status textarea').val(''); } }); }); });
  4. $(document).ready(function() { $('#new-status form').submit(function(e) { e.preventDefault(); $.ajax({ url: '/status', data:

    { text: $('#new-status textarea').val() }, success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); $('#new-status textarea').val(''); } }); }); }); Hvorfor? PAGE EVENT USER EVENT NETWORK I/O NETWORK EVENT TEMPLATING ER DISSE TO RELATERT?
  5. Dette er komplekst 20 vs 1000 kodelinjer Testing Gjenbruk Single

    responsibility Intensjon
  6. Vi trenger mindre kobling Vi trenger struktur Vi trenger abstraksjoner

  7. Modeller

  8. Modeller $.ajax({ url: '/status', data: { text: $('#new-status textarea').val() },

    success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); $('#new-status textarea').val(''); } });
  9. function addStatus() { $.ajax({ url: '/status', data: { text: $('#new-status

    textarea').val() }, success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); $('#new-status textarea').val(''); } }); } addStatus(); Modeller
  10. function addStatus(text) { $.ajax({ url: '/status', data: { text: text

    }, success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); $('#new-status textarea').val(''); } }); } addStatus($('#new-status textarea').val()); Modeller
  11. Callback som input?

  12. addStatus({ text: 'test', success: function() { ... }, }); Jeg

    ønsker å skrive Istedenfor addStatus('test')
  13. addStatus({ text: 'test', success: function() { ... }, }); Jeg

    ønsker å skrive Istedenfor HER SKJER DET OFTE MYE HVA OM JEG ØNSKER Å KALLE DENNE FLERE PLASSER? addStatus('test')
  14. Eventer!

  15. Eventer function addStatus(text) { $.ajax({ url: '/status’, data: { text:

    text }, success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); } }); }
  16. var events = new EventEmitter(); function addStatus(text) { $.ajax({ url:

    '/status', data: { text: text }, success: function(data) { $('#statuses ul').append('<li>' + data.status + '</li>'); } }); } Eventer
  17. Eventer var events = new EventEmitter(); function addStatus(text) { $.ajax({

    url: '/status', data: { text: text }, success: function(data) { events.emit('status:added', data.status); } }); }
  18. Eventer var events = new EventEmitter(); function addStatus(text) { $.ajax({

    url: '/status', data: { text: text }, success: function(data) { events.emit('status:added', data.status); } }); } events.addListener('status:added', function(status) { $('#statuses ul').append('<li>' + status + '</li>'); });
  19. Nå kan vi decouple Ajax og DOM helt events.addListener('status:added', appendStatus);

    addStatus($('#new-status textarea').val());
  20. Flere kan lytte function appendStatus() { ... } function updateStatusesCount()

    { ... } function clearStatusInput() { ... } events.addListener('status:added', updateStatusesCount); events.addListener('status:added', clearStatusInput); events.addListener('status:added', appendStatus); addStatus($('#new-status textarea').val());
  21. Flere kan lytte function appendStatus() { ... } function updateStatusesCount()

    { ... } function clearStatusInput() { ... } events.addListener('status:added', updateStatusesCount); events.addListener('status:added', clearStatusInput); events.addListener('status:added', appendStatus); addStatus($('#new-status textarea').val()); SINGLE RESPONSIBILITY ENKELT Å TESTE ENKLERE Å BRUKE
  22. Abstrahere views

  23. Det eier et HTML-element Et views ansvar:

  24. Views kan lese fra DOM-en, endre den, jobbe med modeller

    og lytte på eventer
  25. Vårt view-API var el = $('#statuses ul'); var statusesView =

    new StatusesView(el); statusesView.appendStatus('test'); StatusesView er nå ansvarlig for alt relatert til DOM-en i statuslisten
  26. Implementasjon av view-API var StatusesView = function(el) { this.el =

    el; // jQuery objekt } StatusesView.prototype.appendStatus = function(status) { this.el.append('<li>' + status + '</li>'); // istedenfor $('#statuses ul').append(...) } Null stress — det er kun konvensjon!
  27. … men hvordan får viewet tak i data?

  28. Eventene

  29. Lytte på event i viewet var StatusesView = function(el) {

    this.el = el; // binde event ... events.addListener('status:added', this.appendStatus, this); } StatusesView.prototype.appendStatus = function(status) { this.el.append('<li>' + status + '</li>'); } new StatusesView($('#statuses ul')); // instans av viewet addStatus('test'); // trigger 'status:added'
  30. Modeller + views + eventer

  31. Sette opp applikasjonen $(document).ready(function() { new StatusesView($('#statuses ul')); // her

    kalles addStatus }); function addStatus(status) { $.ajax({ // ... success: function(data) { events.emit('status:added', data.status); } }); }
  32. Eller, enda bedre $(document).ready(function() { var statuses = new Statuses();

    // model med add-metode new StatusesView($('#statuses ul'), statuses); }); —
  33. Vi har flyttet nettverkskall til Modeller Vi har flyttet DOM-håndtering

    til Views Vi kommuniserer med events istedenfor callback. Vi har kode som er mye enklere å teste.
  34. Du trenger ikke bruke det mindre, men bruk det smartere!

    $
  35. Takk for meg.