From ba02d4ffac2fa08fcd66c9c70e1a0c3b5335cf9f Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 11:29:20 +0800 Subject: [PATCH 1/9] bind this in event handlers --- homework/content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/homework/content.js b/homework/content.js index 710be28..fde61ff 100644 --- a/homework/content.js +++ b/homework/content.js @@ -8,7 +8,7 @@ var note = event.detail; resetWrapper(); drawNote(note); - }); + }).bind(this); } function resetWrapper() { @@ -33,5 +33,5 @@ document.addEventListener('DOMContentLoaded', function(event) { start(); - }); + }).bind(this); })(); From 0b600d0e3b35fcf772979cd4de66c6c233eaf411 Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 12:12:11 +0800 Subject: [PATCH 2/9] repair --- homework/content.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/homework/content.js b/homework/content.js index fde61ff..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); + }).bind(this)); } function resetWrapper() { @@ -31,7 +31,7 @@ _wrapper.appendChild(buff); } - document.addEventListener('DOMContentLoaded', function(event) { + document.addEventListener('DOMContentLoaded', (function(event) { start(); - }).bind(this); + }).bind(this)); })(); From 0a54cd426c6d4b1862447bae975641ed784e223a Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 12:20:56 +0800 Subject: [PATCH 3/9] Bind this into event handler --- homework/list.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/homework/list.js b/homework/list.js index 21eddbc..662ca85 100644 --- a/homework/list.js +++ b/homework/list.js @@ -6,13 +6,13 @@ var _wrapper = document.querySelector('#note-list-wrapper'); function start() { - fetchList(function(data) { + fetchList((function(data) { updateList(data); drawList(); preloadFirstNote(); - }); - window.addEventListener('click', function(event) { - onNoteOpen(event); + }).bind(this)); + window.addEventListener('click', (function(event) { + onNoteOpen(event).bind(this)); }); } @@ -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(xhr); xhr.send(); } - document.addEventListener('DOMContentLoaded', function(event) { + document.addEventListener('DOMContentLoaded', (function(event) { start(); - }); + }).bind(this)); })(); From 119d2e76ee57a6e944386fde6f1e1e4534315f27 Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 13:01:50 +0800 Subject: [PATCH 4/9] Deal with object properties w/ constructor & prototype --- homework/content.js | 64 +++++++++++++++++++++++++-------------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/homework/content.js b/homework/content.js index 04d7aaf..e03eb52 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 ContentManager = function(){ + this._wrapper = document.querySelector('#note-content-wrapper'); } - function resetWrapper() { - _wrapper.innerHTML = ''; - } + ContentManager.prototype = { + start() { + window.addEventListener('note-open', (function(event) { + var note = event.detail; + this.resetWrapper(); + this.drawNote(note); + }).bind(this)); + }, + // original content.js start function + // call original contest.js resetWrapper function use "this" + // following are the same + resetWrapper(){ + _wrapper.innerHTML = ''; + }, - 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); + 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.ContentManager = ContentManager; + +})(window); \ No newline at end of file From 189c86312b9ed9527fb1f2c4d484e45253cabcc9 Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 13:18:09 +0800 Subject: [PATCH 5/9] Deal with object properties w/ constructor & prototype --- homework/list.js | 58 ++++++++++++++++++++++++++---------------------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/homework/list.js b/homework/list.js index 662ca85..4e9b54b 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,40 +1,47 @@ 'use strict'; -(function() { +//the way of how to refactor list.js is the same as content.js - var _listNoteContent = []; - var _wrapper = document.querySelector('#note-list-wrapper'); - function start() { - fetchList((function(data) { - updateList(data); - drawList(); - preloadFirstNote(); +(function(exports) { + + var ListManager = function(){ + this._listNoteContent = []; + this._wrapper = document.querySelector("#note-content-wrapper"); + } + + ListManager.prototype = { + start() { + this.fetchList((function(data) { + this.updateList(data); + this.drawList(); + this.preloadFirstNote(); }).bind(this)); + window.addEventListener('click', (function(event) { - onNoteOpen(event).bind(this)); + this.onNoteOpen(event).bind(this)); }); } - function onNoteOpen(event) { - if (event.target.classList.contains('note-title')) { + 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 })); - }; - } + }; + } - function preloadFirstNote() { - if (_listNoteContent.length !== 0) { - var content = _listNoteContent[0]; - window.dispatchEvent(new CustomEvent('note-open', + preloadFirstNote() { + if (_listNoteContent.length !== 0) { + var content = _listNoteContent[0]; + window.dispatchEvent(new CustomEvent('note-open', { detail: content })); + } } - } - function updateList(list) { - _listNoteContent = list; + updateList(list) { + this. _listNoteContent = list; } function drawList() { @@ -52,7 +59,7 @@ buff.appendChild(li); }); ul.appendChild(buff); - _wrapper.appendChild(ul); + this._wrapper.appendChild(ul); } function fetchList(afterFetch) { @@ -71,9 +78,6 @@ }).bind(xhr); xhr.send(); } - - document.addEventListener('DOMContentLoaded', (function(event) { - start(); - }).bind(this)); - -})(); +} +exports.ListManager = ListManager; +})(window); From 3e72c650417b8fcbd90e7c34caae3a0d6c7889a7 Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 13:19:54 +0800 Subject: [PATCH 6/9] Deal with object properties w/ constructor & prototype --- homework/main.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 homework/main.js diff --git a/homework/main.js b/homework/main.js new file mode 100644 index 0000000..32e26e1 --- /dev/null +++ b/homework/main.js @@ -0,0 +1,8 @@ +'use strict' + +document.addEventListener('DOMContentLoaded',function(event){ + var contentManager = new ContentManager(); + var listManager = new ListManager(); + contentManager.start(); + listManager.start(); +}); \ No newline at end of file From eac88c4b436ca44f0422c46f50a6fc01647568e9 Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 13:50:40 +0800 Subject: [PATCH 7/9] add main.js --- homework/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/homework/index.html b/homework/index.html index e387963..975d252 100644 --- a/homework/index.html +++ b/homework/index.html @@ -5,6 +5,7 @@ Homework - Note List + From 5105ee3d568a9f62269405fad5d16e3aed68bc9d Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 14:14:06 +0800 Subject: [PATCH 8/9] Deal with asynchronous flows with Promise --- homework/list.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/homework/list.js b/homework/list.js index 4e9b54b..53985c2 100644 --- a/homework/list.js +++ b/homework/list.js @@ -1,7 +1,8 @@ 'use strict'; //the way of how to refactor list.js is the same as content.js - +//repair some error in list.js +// add promise into it (function(exports) { @@ -12,10 +13,12 @@ ListManager.prototype = { start() { - this.fetchList((function(data) { + this.fetchList().then((function(data) { this.updateList(data); this.drawList(); this.preloadFirstNote(); + }).bind(this)) + .catch((function () { }).bind(this)); window.addEventListener('click', (function(event) { @@ -44,7 +47,7 @@ this. _listNoteContent = list; } - function drawList() { + drawList() { var list = _listNoteContent; var ul = document.createElement('ul'); ul.id = 'note-title-list'; @@ -62,21 +65,22 @@ this._wrapper.appendChild(ul); } - 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) { + fetchList(afterFetch) { + 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); + resolve(listData) } else if (this.status !== 200 ){ - // Ignore error in this case. + reject('ERROR'); } - }).bind(xhr); - xhr.send(); + }).bind(xhr); + xhr.send(); + }); } } exports.ListManager = ListManager; From 36ae82cd1725fe3e5e33ac7808167c2c5e259007 Mon Sep 17 00:00:00 2001 From: CaeserNieh Date: Sat, 24 Oct 2015 14:30:22 +0800 Subject: [PATCH 9/9] Write your first test case for a pure function --- homework/test/test-list.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/homework/test/test-list.js b/homework/test/test-list.js index 441fc45..e25131f 100644 --- a/homework/test/test-list.js +++ b/homework/test/test-list.js @@ -2,7 +2,11 @@ describe('Test > ', function() { beforeEach(function() { }); - it('will test some pure functions', function() { + it('my pure testfunctions', function() { // Write any pure function assertion here. + var a = 1; + var b = 2; + var sum = a+b; + assert.equal(3,sum); }); });