The document discusses techniques for writing clean JavaScript code. It provides examples of code smells and improvements to address issues like attaching events from the outside, separating selection from logic, shallow scope, overwriting default behavior, and separating logic from views. The document advocates for practices like modularizing functions, separating DOM manipulation from models, and creating model objects to represent DOM elements rather than directly manipulating the DOM. It encourages learning clean JavaScript techniques to write better structured and more maintainable code.

1. Clean JavaScript
http://www.flickr.com/photos/hoshikowolrd/5151171470/
Sapporo.js
SaCSS vol.29 - 2011.11.26 (Ryunosuke SATO)

2. Community for people who like JavaScript.
Sapporo.js

3. Sapporo.js
http://sapporojs.org

4. Sapporo.js
Now learning

6. I’m a programmer

7. @tricknotes

9. Clean JavaScript
http://www.flickr.com/photos/hoshikowolrd/5151171470/
Sapporo.js
SaCSS vol.29 - 2011.11.26 (Ryunosuke SATO)

17. JavaScript

18. JavaScript

19. about JavaScript

20. Works in everywhere!

21. http://www.flickr.com/photos/peco-sunnyday/2752403413/
interesting!

22. I like

23. JavaScript is most popular!

24. but...

25. http://www.flickr.com/photos/maynard/6105929170/
difficult

26. Now training...

27. ?
?
How to face the difficulty

30. Oops... :(

31. some ideas

32. with
DOM

33. point

34. HTML JavaScript

35. HTML JavaScript

36. here!
HTML JavaScript

37. practice

38. - Attach events from outer -
problem
JavaScript

39. - Attach events from outer -
solution
HTML
JavaScript

40. - Attach events from outer -
<a onclick=”showMessage()”>Click me</a>
code smell

41. - Attach events from outer -
<a id=”showMessage”>Click me</a>
var a = document.getElementById(‘showMessage’);
a.addEventListener(‘click’, showMessage);
improvement

42. - Separate from Selector -
problem
HTML id class

43. - Separate from Selector -
solution
HTML id class

44. - Separate from Selector -
function showPhoto(photoId) {
var photo = document.getElementById(‘photo-’ + photoId);
// do ...
}

45. - Separate from Selector -
function showPhoto(photoId) {
var photo = document.getElementById(‘photo-’ + photoId);
// do ...
}
code smell

46. - Separate from Selector -
var showPhoto = function(element) {
// do ...
}
var photo = document.getElementById(‘photo-12’);
showPhoto(photo);
improvement

47. - modulized functions -
problem

48. - modulized functions -
solution

49. - modulized functions -
// users.js
var showUserName = function() {
// do somethig
}
var showUserAge = function(){
// do somethig
}
var validateUserForm = function() {
// do somethig
} code smell

50. - modulized functions -
// users.js
var showUserName = function() {
// do somethig
} global
var showUserAge = function(){
// do somethig
}
var validateUserForm = function() {
// do somethig
}

51. - modulized functions -
// users.js
var users = {};
global
users.showName = function () {
// do somethig
}
users.showAge = function (){
// do somethig
}
users.validateForm = function () {
// do somethig
}

52. - modulized functions -
// users.js
(function(global) {
global.users = {}; global
users.showName = function () {
// do somethig
}
// ...
)(this);
improvement

53. overwrite behavior -
problem
JavaScript
DOM

54. overwrite behavior -
solution
DOM
DOM

55. overwrite behavior -
// using jQuery
$(‘a#showDialog’).click(function() {
$.ajax(‘/about’, {
success: function(html) {
// do something...
}
});
});
code smell

56. overwrite behavior -
// using jQuery
$(‘a#showDialog’).click(function() {
$.ajax($(this).attr(‘href’), {
success: function(html) {
// do something...
}
});
});
improvement

57. shallow scope -
problem

58. shallow scope -
solution
2 function
→ this

59. shallow scope -
// using jQuery
var $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;
});

60. shallow scope -
// using jQuery
var $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

61. shallow scope -
// using jQuery
var $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

62. DOM - DOM to model -
problem
DOM

63. DOM - DOM to model -
solution
DOM

64. 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

65. 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();
}; });

66. 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();
}; });

67. 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

68. - separate logic with view -
problem

69. - separate logic with view -
solution

70. - 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
}
}

71. - 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

72. - 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);
}

73. - separate logic with view -
function Timer(millisec) {
this. millisec = millisec;
this.callbacks = [];
}
this.timerId = null;
model
Timer.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

74. A tiny fraction

76. others...

77. Pure JavaScript

79. Application

80. https://gist.github.com/1362110

81. http://documentcloud.github.com/backbone/

82. http://www.sproutcore.com/

84. interest
http://www.flickr.com/photos/bonguri/4610536789/

85. reading

86. Good text

87. writing

89. Shall we learn
about
Clean JavaScript?