Your SlideShare is downloading. ×
  • Like
Clean Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Clean Javascript

  • 22,379 views
Published

SaCSS vol.29( http://atnd.org/events/20768 ) での発表資料です。

SaCSS vol.29( http://atnd.org/events/20768 ) での発表資料です。

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
22,379
On SlideShare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
42
Comments
0
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Clean JavaScripthttp://www.flickr.com/photos/hoshikowolrd/5151171470/ Sapporo.jsSaCSS vol.29 - 2011.11.26 (Ryunosuke SATO)
  • 2. Community for people who like JavaScript. Sapporo.js
  • 3. Sapporo.jshttp://sapporojs.org
  • 4. Sapporo.jsNow learning
  • 5. I’m a programmer
  • 6. @tricknotes
  • 7. Clean JavaScripthttp://www.flickr.com/photos/hoshikowolrd/5151171470/ Sapporo.jsSaCSS vol.29 - 2011.11.26 (Ryunosuke SATO)
  • 8. JavaScript
  • 9. JavaScript
  • 10. about JavaScript
  • 11. Works in everywhere!
  • 12. http://www.flickr.com/photos/peco-sunnyday/2752403413/ interesting!
  • 13. I like
  • 14. JavaScript is most popular!
  • 15. but...
  • 16. http://www.flickr.com/photos/maynard/6105929170/ difficult
  • 17. Now training...
  • 18. ? ?How to face the difficulty
  • 19. Oops... :(
  • 20. some ideas
  • 21. withDOM
  • 22. point
  • 23. HTML JavaScript
  • 24. HTML JavaScript
  • 25. here!HTML JavaScript
  • 26. practice
  • 27. - Attach events from outer -problem JavaScript
  • 28. - Attach events from outer -solutionHTML JavaScript
  • 29. - Attach events from outer -<a onclick=”showMessage()”>Click me</a> code smell
  • 30. - Attach events from outer -<a id=”showMessage”>Click me</a>var a = document.getElementById(‘showMessage’);a.addEventListener(‘click’, showMessage); improvement
  • 31. - Separate from Selector -problemHTML id class
  • 32. - Separate from Selector -solutionHTML id class
  • 33. - Separate from Selector -function showPhoto(photoId) { var photo = document.getElementById(‘photo-’ + photoId); // do ...}
  • 34. - Separate from Selector -function showPhoto(photoId) { var photo = document.getElementById(‘photo-’ + photoId); // do ...} code smell
  • 35. - Separate from Selector -var showPhoto = function(element) { // do ...}var photo = document.getElementById(‘photo-12’);showPhoto(photo); improvement
  • 36. - modulized functions -problem
  • 37. - modulized functions -solution
  • 38. - modulized functions -// users.jsvar showUserName = function() { // do somethig}var showUserAge = function(){ // do somethig}var validateUserForm = function() { // do somethig} code smell
  • 39. - modulized functions -// users.jsvar showUserName = function() { // do somethig} globalvar showUserAge = function(){ // do somethig}var validateUserForm = function() { // do somethig}
  • 40. - modulized functions -// users.jsvar users = {}; globalusers.showName = function () { // do somethig}users.showAge = function (){ // do somethig}users.validateForm = function () { // do somethig}
  • 41. - modulized functions -// users.js(function(global) { global.users = {}; global users.showName = function () { // do somethig } // ...)(this); improvement
  • 42. overwrite behavior -problem JavaScript DOM
  • 43. overwrite behavior -solution DOM DOM
  • 44. overwrite behavior -// using jQuery$(‘a#showDialog’).click(function() { $.ajax(‘/about’, { success: function(html) { // do something... } });}); code smell
  • 45. overwrite behavior -// using jQuery$(‘a#showDialog’).click(function() { $.ajax($(this).attr(‘href’), { success: function(html) { // do something... } });}); improvement
  • 46. shallow scope -problem
  • 47. shallow scope -solution 2 function → this
  • 48. shallow scope -// using jQueryvar $elements = $(‘a#remote’);$elements.click(function() { var url = $(this).attr(‘href’); $.ajax(url, { success: function(html) { var text = $(html).text(); $element.text(text); } }); return false;});
  • 49. shallow scope -// using jQueryvar $elements = $(‘a#remote’);$elements.click(function() { deep var url = $(this).attr(‘href’); $.ajax(url, { success: function(html) { var text = $(html).text(); $element.text(text); } }); return false;}); code smell
  • 50. shallow scope -// using jQueryvar $elements = $(‘a#remote’);$elements.click(function() { var url = $(this).attr(‘href’); $.ajax(url, { success: function(html) { var text = $(html).text(); $(this).text(text); }, context: this }); return false;}); improvement
  • 51. DOM - DOM to model -problemDOM
  • 52. DOM - DOM to model -solutionDOM
  • 53. DOM - DOM to model -var element = document.getElementById(‘message’);element.addEventListener(‘click’, function() { // this == element if (this.getAttribute(‘data-is-checked’)) { this.setAttribute(‘data-is-checked’, true); this.innerText = ‘clicked!’; }}); code smell
  • 54. DOM - DOM to model -var domToModel = function(element, Model) { var method, name, object, parent, proto; model = Object.create(element); proto = Model.prototype; for (name in proto) { method = proto[name]; model[name] = method; } Model.apply(model); return model;};var CustomElement = function() {};CustomElement.prototype.showText = function() { if (!this.getAttribute(‘data-is-checked’)) { var element = document.getElementById(‘message’); this.setAttribute(‘data-is-checked’, true); var model = domToModel(element, CustomElement); this.innerText = ‘clicked!’; model.addEventListener(‘click’, function() { } model.showText();}; });
  • 55. DOM - DOM to model -var domToModel = function(element, Model) { var method, name, object, parent, proto; model = Object.create(element); proto = Model.prototype; for (name in proto) { method = proto[name]; model[name] = method; } Model.apply(model); return model;};var CustomElement = function() {};CustomElement.prototype.showText = function() { if (!this.getAttribute(‘data-is-checked’)) { var element = document.getElementById(‘message’); this.setAttribute(‘data-is-checked’, true); var model = domToModel(element, CustomElement); this.innerText = ‘clicked!’; model.addEventListener(‘click’, function() { } model.showText();}; });
  • 56. DOM - DOM to model -var domToModel = function(element, Model) { var method, name, object, parent, proto; model = Object.create(element); proto = Model.prototype; for (name in proto) { method = proto[name]; model[name] = method; } Model.apply(model); return model;};var CustomElement = function() {};CustomElement.prototype.showText = function() { if (!this.getAttribute(‘data-is-checked’)) { var element = document.getElementById(‘message’); this.setAttribute(‘data-is-checked’, true); var model = domToModel(element, CustomElement); this.innerText = ‘clicked!’; model.addEventListener(‘click’, function() { } model.showText();}; }); improvement
  • 57. - separate logic with view -problem
  • 58. - separate logic with view -solution
  • 59. - separate logic with view -function createTimer() { var timerId; var startTimer = function(millisec) { timerId = setTimeout(function() { $(‘.timeout’).text(‘finished’); }, millisec); } var stopTimer = function() { clearTimeout(timerId); } return { startTimer: startTimer, stopTimer: stopTimer }}
  • 60. - separate logic with view -function createTimer() { var timerId; var startTimer = function(millisec) { timerId = setTimeout(function() { $(‘.timeout’).text(‘finished’); view }, millisec); } var stopTimer = function() { clearTimeout(timerId); } return { startTimer: startTimer, stopTimer: stopTimer }} code smell
  • 61. - separate logic with view -function Timer(millisec) { this. millisec = millisec; this.callbacks = []; this.timerId = null;}Timer.prototype.afterFinish = function(callback) { return this.callbacks.push(callback);};Timer.prototype.start = function() { var callbacks = this.callbacks; this.timerId = setTimeout(function() { var callback, i, length; for (i = 0, length = callbacks.length; i < length; i++) { var timer = new Timer(1000); callback = callbacks[i]; timer.afterFinish(function() { callback(); $(.timer .message).text(Finished!!); } }); }, this. millisec); timer.start();};Timer.prototype.stop = function() { clearTimeout(this.timerId);}
  • 62. - separate logic with view -function Timer(millisec) { this. millisec = millisec; this.callbacks = [];} this.timerId = null; modelTimer.prototype.afterFinish = function(callback) { return this.callbacks.push(callback);};Timer.prototype.start = function() { view var callbacks = this.callbacks; this.timerId = setTimeout(function() { var callback, i, length; for (i = 0, length = callbacks.length; i < length; i++) { var timer = new Timer(1000); callback = callbacks[i]; timer.afterFinish(function() { callback(); $(.timer .message).text(Finished!!); } }); }, this. millisec); timer.start();};Timer.prototype.stop = function() { clearTimeout(this.timerId);} improvement
  • 63. A tiny fraction
  • 64. others...
  • 65. Pure JavaScript
  • 66. Application
  • 67. https://gist.github.com/1362110
  • 68. http://documentcloud.github.com/backbone/
  • 69. http://www.sproutcore.com/
  • 70. interesthttp://www.flickr.com/photos/bonguri/4610536789/
  • 71. reading
  • 72. Good text
  • 73. writing
  • 74. Shall we learn aboutClean JavaScript?