Clean Javascript
19 likes16,849 views
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.
![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();
}; });](https://image.slidesharecdn.com/cleanjavascript-111210053822-phpapp01/85/Clean-Javascript-65-320.jpg)
![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();
}; });](https://image.slidesharecdn.com/cleanjavascript-111210053822-phpapp01/85/Clean-Javascript-66-320.jpg)
![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](https://image.slidesharecdn.com/cleanjavascript-111210053822-phpapp01/85/Clean-Javascript-67-320.jpg)
![- 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);
}](https://image.slidesharecdn.com/cleanjavascript-111210053822-phpapp01/85/Clean-Javascript-72-320.jpg)
![- 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](https://image.slidesharecdn.com/cleanjavascript-111210053822-phpapp01/85/Clean-Javascript-73-320.jpg)
Clean Javascript
- 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
- 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
- 22. I like
- 23. JavaScript is most popular!
- 24. but...
- 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
- 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
- 85. reading
- 86. Good text
- 87. writing
- 89. Shall we learn about Clean JavaScript?