Enkle JavaScript-abstraksjoner

A presentation in Norwegian on simple JavaScript abstractions

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.