Clean JavaScripthttp://www.flickr.com/photos/hoshikowolrd/5151171470/                                                      ...
Community for people who like JavaScript.      Sapporo.js
Sapporo.jshttp://sapporojs.org
Sapporo.jsNow learning
I’m a programmer
@tricknotes
Clean JavaScripthttp://www.flickr.com/photos/hoshikowolrd/5151171470/                                                      ...
JavaScript
JavaScript
about JavaScript
Works in everywhere!
http://www.flickr.com/photos/peco-sunnyday/2752403413/                interesting!
I like
JavaScript is most popular!
but...
http://www.flickr.com/photos/maynard/6105929170/                              difficult
Now training...
?                     ?How to face the difficulty
Oops... :(
some ideas
withDOM
point
HTML   JavaScript
HTML   JavaScript
here!HTML       JavaScript
practice
- Attach events from outer -problem   JavaScript
- Attach events from outer -solutionHTML JavaScript
- Attach events from outer -<a onclick=”showMessage()”>Click me</a>                                    code smell
- Attach events from outer -<a id=”showMessage”>Click me</a>var a = document.getElementById(‘showMessage’);a.addEventListe...
- Separate from Selector -problemHTML   id   class
- Separate from Selector -solutionHTML   id   class
- Separate from Selector -function showPhoto(photoId) {  var photo = document.getElementById(‘photo-’ + photoId);  // do ....
- Separate from Selector -function showPhoto(photoId) {  var photo = document.getElementById(‘photo-’ + photoId);  // do ....
- Separate from Selector -var showPhoto = function(element) {  // do ...}var photo = document.getElementById(‘photo-12’);s...
- modulized functions -problem
- modulized functions -solution
- modulized functions -// users.jsvar showUserName = function() {  // do somethig}var showUserAge = function(){  // do som...
- modulized functions -// users.jsvar showUserName = function() {  // do somethig}                             globalvar s...
- modulized functions -// users.jsvar users = {};                               globalusers.showName = function () {  // d...
- modulized functions -// users.js(function(global) {  global.users = {};            global users.showName = function () {...
overwrite behavior -problem     JavaScript DOM
overwrite behavior -solution DOM           DOM
overwrite behavior -// using jQuery$(‘a#showDialog’).click(function() {  $.ajax(‘/about’, {    success: function(html) {  ...
overwrite behavior -// using jQuery$(‘a#showDialog’).click(function() {  $.ajax($(this).attr(‘href’), {    success: functi...
shallow scope -problem
shallow scope -solution        2            function    →         this
shallow scope -// using jQueryvar $elements = $(‘a#remote’);$elements.click(function() {  var url = $(this).attr(‘href’); ...
shallow scope -// using jQueryvar $elements = $(‘a#remote’);$elements.click(function() {         deep  var url = $(this).a...
shallow scope -// using jQueryvar $elements = $(‘a#remote’);$elements.click(function() {  var url = $(this).attr(‘href’); ...
DOM       - DOM to model -problemDOM
DOM        - DOM to model -solutionDOM
DOM                                     - DOM to model -var element = document.getElementById(‘message’);element.addEventL...
DOM                                                        - DOM to model -var domToModel = function(element, Model) {  va...
DOM                                                        - DOM to model -var domToModel = function(element, Model) {  va...
DOM                                                        - DOM to model -var domToModel = function(element, Model) {  va...
- separate logic with view -problem
- separate logic with view -solution
- separate logic with view -function createTimer() {  var timerId;  var startTimer = function(millisec) {    timerId = set...
- separate logic with view -function createTimer() {  var timerId;  var startTimer = function(millisec) {    timerId = set...
- separate logic with view -function Timer(millisec) {  this. millisec = millisec;  this.callbacks = [];  this.timerId = n...
- separate logic with view -function Timer(millisec) {  this. millisec = millisec;  this.callbacks = [];}  this.timerId = ...
A tiny fraction
others...
Pure JavaScript
Application
https://gist.github.com/1362110
http://documentcloud.github.com/backbone/
http://www.sproutcore.com/
interesthttp://www.flickr.com/photos/bonguri/4610536789/
reading
Good text
writing
Shall we learn      aboutClean JavaScript?
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Clean Javascript
Upcoming SlideShare
Loading in...5
×

Clean Javascript

22,559

Published on

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

Published in: Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
22,559
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
43
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

Clean Javascript

  1. 1. Clean JavaScripthttp://www.flickr.com/photos/hoshikowolrd/5151171470/ Sapporo.jsSaCSS vol.29 - 2011.11.26 (Ryunosuke SATO)
  2. 2. Community for people who like JavaScript. Sapporo.js
  3. 3. Sapporo.jshttp://sapporojs.org
  4. 4. Sapporo.jsNow learning
  5. 5. I’m a programmer
  6. 6. @tricknotes
  7. 7. Clean JavaScripthttp://www.flickr.com/photos/hoshikowolrd/5151171470/ Sapporo.jsSaCSS vol.29 - 2011.11.26 (Ryunosuke SATO)
  8. 8. JavaScript
  9. 9. JavaScript
  10. 10. about JavaScript
  11. 11. Works in everywhere!
  12. 12. http://www.flickr.com/photos/peco-sunnyday/2752403413/ interesting!
  13. 13. I like
  14. 14. JavaScript is most popular!
  15. 15. but...
  16. 16. http://www.flickr.com/photos/maynard/6105929170/ difficult
  17. 17. Now training...
  18. 18. ? ?How to face the difficulty
  19. 19. Oops... :(
  20. 20. some ideas
  21. 21. withDOM
  22. 22. point
  23. 23. HTML JavaScript
  24. 24. HTML JavaScript
  25. 25. here!HTML JavaScript
  26. 26. practice
  27. 27. - Attach events from outer -problem JavaScript
  28. 28. - Attach events from outer -solutionHTML JavaScript
  29. 29. - Attach events from outer -<a onclick=”showMessage()”>Click me</a> code smell
  30. 30. - Attach events from outer -<a id=”showMessage”>Click me</a>var a = document.getElementById(‘showMessage’);a.addEventListener(‘click’, showMessage); improvement
  31. 31. - Separate from Selector -problemHTML id class
  32. 32. - Separate from Selector -solutionHTML id class
  33. 33. - Separate from Selector -function showPhoto(photoId) { var photo = document.getElementById(‘photo-’ + photoId); // do ...}
  34. 34. - Separate from Selector -function showPhoto(photoId) { var photo = document.getElementById(‘photo-’ + photoId); // do ...} code smell
  35. 35. - Separate from Selector -var showPhoto = function(element) { // do ...}var photo = document.getElementById(‘photo-12’);showPhoto(photo); improvement
  36. 36. - modulized functions -problem
  37. 37. - modulized functions -solution
  38. 38. - modulized functions -// users.jsvar showUserName = function() { // do somethig}var showUserAge = function(){ // do somethig}var validateUserForm = function() { // do somethig} code smell
  39. 39. - modulized functions -// users.jsvar showUserName = function() { // do somethig} globalvar showUserAge = function(){ // do somethig}var validateUserForm = function() { // do somethig}
  40. 40. - modulized functions -// users.jsvar users = {}; globalusers.showName = function () { // do somethig}users.showAge = function (){ // do somethig}users.validateForm = function () { // do somethig}
  41. 41. - modulized functions -// users.js(function(global) { global.users = {}; global users.showName = function () { // do somethig } // ...)(this); improvement
  42. 42. overwrite behavior -problem JavaScript DOM
  43. 43. overwrite behavior -solution DOM DOM
  44. 44. overwrite behavior -// using jQuery$(‘a#showDialog’).click(function() { $.ajax(‘/about’, { success: function(html) { // do something... } });}); code smell
  45. 45. overwrite behavior -// using jQuery$(‘a#showDialog’).click(function() { $.ajax($(this).attr(‘href’), { success: function(html) { // do something... } });}); improvement
  46. 46. shallow scope -problem
  47. 47. shallow scope -solution 2 function → this
  48. 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. 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. 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. 51. DOM - DOM to model -problemDOM
  52. 52. DOM - DOM to model -solutionDOM
  53. 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. 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. 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. 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. 57. - separate logic with view -problem
  58. 58. - separate logic with view -solution
  59. 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. 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. 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. 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. 63. A tiny fraction
  64. 64. others...
  65. 65. Pure JavaScript
  66. 66. Application
  67. 67. https://gist.github.com/1362110
  68. 68. http://documentcloud.github.com/backbone/
  69. 69. http://www.sproutcore.com/
  70. 70. interesthttp://www.flickr.com/photos/bonguri/4610536789/
  71. 71. reading
  72. 72. Good text
  73. 73. writing
  74. 74. Shall we learn aboutClean JavaScript?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×