From 628dd627a1fb7abb7092c82efc3ec5399119be86 Mon Sep 17 00:00:00 2001 From: timmycheng1221 Date: Mon, 26 Oct 2015 17:53:05 +0800 Subject: [PATCH 1/5] Bind this in Event handlers --- homework/content.js | 8 ++++---- homework/list.js | 12 ++++++------ 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..04d7aaf 100644 --- a/homework/content.js +++ b/homework/content.js @@ -4,11 +4,11 @@ var _wrapper = document.querySelector('#note-content-wrapper'); function start() { - window.addEventListener('note-open', function(event) { + window.addEventListener('note-open', (function(event) { var note = event.detail; resetWrapper(); drawNote(note); - }); + }).bind(this)); } function resetWrapper() { @@ -31,7 +31,7 @@ _wrapper.appendChild(buff); } - document.addEventListener('DOMContentLoaded', function(event) { + document.addEventListener('DOMContentLoaded', (function(event) { start(); - }); + }).bind(this)); })(); diff --git a/homework/list.js b/homework/list.js index 21eddbc..44fe632 100644 --- a/homework/list.js +++ b/homework/list.js @@ -11,9 +11,9 @@ drawList(); preloadFirstNote(); }); - window.addEventListener('click', function(event) { + window.addEventListener('click', (function(event) { onNoteOpen(event); - }); + }).bind(this)); } function onNoteOpen(event) { @@ -59,7 +59,7 @@ var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); xhr.responseType = 'json'; - xhr.onreadystatechange = function(e) { + xhr.onreadystatechange = (function(e) { // Watch out: we have a mysterious unknown 'this'. if (this.readyState === 4 && this.status === 200) { var listData = this.response; @@ -68,12 +68,12 @@ } else if (this.status !== 200 ){ // Ignore error in this case. } - }; + }).bind(this); xhr.send(); } - document.addEventListener('DOMContentLoaded', function(event) { + document.addEventListener('DOMContentLoaded', (function(event) { start(); - }); + }).bind(this)); })(); From 7ea84a2ef4793ea58c4074cc0559d816bf01bc33 Mon Sep 17 00:00:00 2001 From: timmycheng1221 Date: Mon, 26 Oct 2015 19:36:13 +0800 Subject: [PATCH 2/5] Deal with object properties w/ constructor & prototype --- homework/content.js | 66 +++++++++++---------- homework/index.html | 1 + homework/list.js | 140 +++++++++++++++++++++++--------------------- homework/main.js | 9 +++ 4 files changed, 118 insertions(+), 98 deletions(-) create mode 100644 homework/main.js diff --git a/homework/content.js b/homework/content.js index 04d7aaf..bef5d4d 100644 --- a/homework/content.js +++ b/homework/content.js @@ -1,37 +1,43 @@ 'use strict'; -(function() { - var _wrapper = document.querySelector('#note-content-wrapper'); +(function(exports) { - function start() { - window.addEventListener('note-open', (function(event) { - var note = event.detail; - resetWrapper(); - drawNote(note); - }).bind(this)); + var NoteContentManager = function() { + this._wrapper = document.querySelector('#note-content-wrapper'); } + + NoteContentManager.prototype = { - function resetWrapper() { - _wrapper.innerHTML = ''; - } + start() { + window.addEventListener('note-open', (function(event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); + }, - function drawNote(note) { - var title = note.title; - var h = document.createElement('h2'); - h.textContent = title; - var passages = note.passages; - var buff = document.createDocumentFragment(); - passages.forEach(function(passage) { - var p = document.createElement('p'); - p.classList.add('note-passage'); - p.textContent = passage; - buff.appendChild(p); - }); - _wrapper.appendChild(h); - _wrapper.appendChild(buff); - } + resetWrapper() { + this._wrapper.innerHTML = ''; + }, + + drawNote(note) { + var title = note.title; + var h = document.createElement('h2'); + h.textContent = title; + var passages = note.passages; + var buff = document.createDocumentFragment(); + passages.forEach(function(passage) { + var p = document.createElement('p'); + p.classList.add('note-passage'); + p.textContent = passage; + buff.appendChild(p); + }); + this._wrapper.appendChild(h); + this._wrapper.appendChild(buff); + } + + }; - document.addEventListener('DOMContentLoaded', (function(event) { - start(); - }).bind(this)); -})(); + exports.NoteContentManager = NoteContentManager; + +})(window); diff --git a/homework/index.html b/homework/index.html index e387963..ad28075 100644 --- a/homework/index.html +++ b/homework/index.html @@ -3,6 +3,7 @@ Homework - Note List + diff --git a/homework/list.js b/homework/list.js index 44fe632..a13abab 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,79 +1,83 @@ 'use strict'; -(function() { +(function(exports) { - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); + var NoteListManager = function() { + var this._listNoteContent = []; + var this._wrapper = document.querySelector('#note-list-wrapper'); + }; - function start() { - fetchList(function(data) { - updateList(data); - drawList(); - preloadFirstNote(); - }); - window.addEventListener('click', (function(event) { - onNoteOpen(event); - }).bind(this)); - } + NoteListManager.prototype = { - function onNoteOpen(event) { - if (event.target.classList.contains('note-title')) { - var id = event.target.dataset.noteId; - var content = _listNoteContent[id]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - }; - } + start() { + this.fetchList((function(data) { + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); + }).bind(this); + window.addEventListener('click', (function(event) { + this.onNoteOpen(event); + }).bind(this)); + }, - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', - { detail: content })); - } - } + onNoteOpen(event) { + if (event.target.classList.contains('note-title')) { + var id = event.target.dataset.noteId; + var content = this._listNoteContent[id]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + }; + }, - function updateList(list) { - _listNoteContent = list; - } + preloadFirstNote() { + if (this._listNoteContent.length !== 0) { + var content = this._listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', + { detail: content })); + } + }, - function drawList() { - var list = _listNoteContent; - var ul = document.createElement('ul'); - ul.id = 'note-title-list'; - var buff = document.createDocumentFragment(); - list.forEach(function(note, i) { - var li = document.createElement('li'); - li.dataset.noteId = i; - li.classList.add('note-title'); - li.textContent = note.title; - // Note: buff is captured, so we now have a - // little closure naturally. - buff.appendChild(li); - }); - ul.appendChild(buff); - _wrapper.appendChild(ul); - } + updateList(list) { + this._listNoteContent = list; + }, - function fetchList(afterFetch) { - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); - xhr.responseType = 'json'; - xhr.onreadystatechange = (function(e) { - // Watch out: we have a mysterious unknown 'this'. - if (this.readyState === 4 && this.status === 200) { - var listData = this.response; - // The flow ends here. - afterFetch(listData); - } else if (this.status !== 200 ){ - // Ignore error in this case. - } - }).bind(this); - xhr.send(); - } + drawList() { + var list = this._listNoteContent; + var ul = document.createElement('ul'); + ul.id = 'note-title-list'; + var buff = document.createDocumentFragment(); + list.forEach(function(note, i) { + var li = document.createElement('li'); + li.dataset.noteId = i; + li.classList.add('note-title'); + li.textContent = note.title; + // Note: buff is captured, so we now have a + // little closure naturally. + buff.appendChild(li); + }); + ul.appendChild(buff); + this._wrapper.appendChild(ul); + }, + + fetchList(afterFetch) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); + xhr.responseType = 'json'; + xhr.onreadystatechange = (function(e) { + // Watch out: we have a mysterious unknown 'this'. + if (this.readyState === 4 && this.status === 200) { + var listData = this.response; + // The flow ends here. + afterFetch(listData); + } else if (this.status !== 200 ){ + // Ignore error in this case. + } + }).bind(this); + xhr.send(); + } + + }; - document.addEventListener('DOMContentLoaded', (function(event) { - start(); - }).bind(this)); + exports.NoteListManager = NoteListManager; -})(); +})(window); diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..28bfc9e --- /dev/null +++ b/homework/main.js @@ -0,0 +1,9 @@ +'use strict'; + + // Kick off +document.addEventListener('DOMContentLoaded', function(event) { + var NoteListManager = new NoteListManager(); + var NoteContentManager = new NoteContentManager(); + NoteListManager.start(); + NoteContentManager.start(); +}); \ No newline at end of file From bea1d3a42013262445f7af5acd8003753174039b Mon Sep 17 00:00:00 2001 From: timmycheng1221 Date: Mon, 26 Oct 2015 19:53:55 +0800 Subject: [PATCH 3/5] Deal with asynchronous flows with Promise --- homework/list.js | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/homework/list.js b/homework/list.js index a13abab..ea97fe9 100644 --- a/homework/list.js +++ b/homework/list.js @@ -10,11 +10,13 @@ NoteListManager.prototype = { start() { - this.fetchList((function(data) { + this.fetchList() + .then((function(data) { this.updateList(data); this.drawList(); this.preloadFirstNote(); - }).bind(this); + }).bind(this)).catch((function(){ + }).bind(this)); window.addEventListener('click', (function(event) { this.onNoteOpen(event); }).bind(this)); @@ -60,22 +62,22 @@ }, fetchList(afterFetch) { - var xhr = new XMLHttpRequest(); - xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); - xhr.responseType = 'json'; - xhr.onreadystatechange = (function(e) { - // Watch out: we have a mysterious unknown 'this'. - if (this.readyState === 4 && this.status === 200) { - var listData = this.response; - // The flow ends here. - afterFetch(listData); - } else if (this.status !== 200 ){ - // Ignore error in this case. - } - }).bind(this); - xhr.send(); - } - + return new Promise((function(resolve , reject) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); + xhr.responseType = 'json'; + xhr.onreadystatechange = function(e) { + // Watch out: we have a mysterious unknown 'this'. + if (this.readyState === 4 && this.status === 200) { + var listData = this.response; + // The flow ends here. + afterFetch(listData); + } else if (this.status !== 200 ){ + // Ignore error in this case. + } + }; + xhr.send(); + }).bind(this)); }; exports.NoteListManager = NoteListManager; From 7dbccee820c982787bfdecec8cd80b41629e9a4b Mon Sep 17 00:00:00 2001 From: timmycheng1221 Date: Mon, 26 Oct 2015 22:19:16 +0800 Subject: [PATCH 4/5] Write my first test case for a pure function --- homework/test/test-list.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..cbec663 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -1,8 +1,22 @@ -describe('Test > ', function() { +describe('Test NoteListManager ', function() { + beforeEach(function() { + test = new NoteListManager(); }); - it('will test some pure functions', function() { - // Write any pure function assertion here. - }); + it('will test updateList functions', function() { + // Write any pure function assertion here.{ + var dummyList = [ + { "title": "Indian 'mystery woman' Geeta says family not hers", + "passages": [ + "An Indian woman who was stranded in Pakistan for a decade has returned home, but says the family she had identified in photos is not hers.", + "India's Foreign Minister Sushma Swaraj said the woman, named Geeta, is refusing to recognise her family.", + "Geeta arrived in Delhi on Monday morning, days after she identified her family in photos sent from India." + ]} + ]; + + test.updateList(dummuyList); + + assert.equal(test._listNoteContent, dummuyList); + }); }); From e236862cbe6be74b72e1e30274f2e0a44676d334 Mon Sep 17 00:00:00 2001 From: timmycheng1221 Date: Tue, 27 Oct 2015 11:51:37 +0800 Subject: [PATCH 5/5] debug --- homework/index.html | 2 +- homework/list.js | 12 +++++++----- homework/main.js | 8 ++++---- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/homework/index.html b/homework/index.html index ad28075..975d252 100644 --- a/homework/index.html +++ b/homework/index.html @@ -3,9 +3,9 @@ Homework - Note List - + diff --git a/homework/list.js b/homework/list.js index ea97fe9..a4661db 100644 --- a/homework/list.js +++ b/homework/list.js @@ -3,8 +3,8 @@ (function(exports) { var NoteListManager = function() { - var this._listNoteContent = []; - var this._wrapper = document.querySelector('#note-list-wrapper'); + this._listNoteContent = []; + this._wrapper = document.querySelector('#note-list-wrapper'); }; NoteListManager.prototype = { @@ -61,7 +61,7 @@ this._wrapper.appendChild(ul); }, - fetchList(afterFetch) { + fetchList() { return new Promise((function(resolve , reject) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://127.0.0.1:8000/demo-list-notes.json', true); @@ -71,14 +71,16 @@ if (this.readyState === 4 && this.status === 200) { var listData = this.response; // The flow ends here. - afterFetch(listData); + resolve(listData); } else if (this.status !== 200 ){ // Ignore error in this case. + reject(xhr); } }; xhr.send(); }).bind(this)); - }; + } + } exports.NoteListManager = NoteListManager; diff --git a/homework/main.js b/homework/main.js index 28bfc9e..f8ea783 100644 --- a/homework/main.js +++ b/homework/main.js @@ -2,8 +2,8 @@ // Kick off document.addEventListener('DOMContentLoaded', function(event) { - var NoteListManager = new NoteListManager(); - var NoteContentManager = new NoteContentManager(); - NoteListManager.start(); - NoteContentManager.start(); + var noteListManager = new NoteListManager(); + var noteContentManager = new NoteContentManager(); + noteListManager.start(); + noteContentManager.start(); }); \ No newline at end of file